senior-frontend
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
Install with Tessl CLI
npx tessl i github:sc30gsw/claude-code-customes --skill senior-frontend59
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
92%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong skill description that clearly articulates capabilities with specific technologies and actions, includes an explicit 'Use when...' clause with multiple trigger scenarios, and uses appropriate third-person voice throughout. The main weakness is potential overlap with other development-related skills due to some generic terms like 'performance optimization' and 'reviewing code'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'component scaffolding, performance optimization, bundle analysis, and UI best practices' along with specific technologies (ReactJS, NextJS, TypeScript, Tailwind CSS). | 3 / 3 |
Completeness | Clearly answers both what (comprehensive frontend development with specific technologies and capabilities) AND when with explicit 'Use when...' clause covering multiple trigger scenarios: developing features, optimizing performance, implementing designs, managing state, reviewing code. | 3 / 3 |
Trigger Term Quality | Good coverage of natural terms users would say: 'frontend', 'ReactJS', 'NextJS', 'TypeScript', 'Tailwind CSS', 'performance', 'UI/UX', 'state', 'frontend code' - these are terms developers naturally use when requesting help. | 3 / 3 |
Distinctiveness Conflict Risk | While it specifies frontend technologies, terms like 'performance optimization', 'reviewing code', and 'state management' could overlap with general coding skills or backend skills. The React/Next/Tailwind focus helps but isn't exclusive enough to prevent all conflicts. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
20%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill is a template-like document filled with generic placeholders and boilerplate rather than actionable frontend development guidance. It lacks any concrete React/Next.js code examples, specific TypeScript patterns, or real Tailwind CSS usage. The scripts are referenced but never explained, and the content reads like marketing copy rather than technical instruction.
Suggestions
Replace generic script descriptions with actual usage examples showing real arguments, expected inputs, and sample outputs (e.g., 'python scripts/component_generator.py src/components Button --with-tests' generating a specific file structure)
Add concrete, executable React/Next.js code examples for common patterns like component composition, state management, and data fetching instead of just listing 'Best practices built-in'
Remove irrelevant tech stack items (Go, Swift, Kotlin, Kubernetes, Terraform) that don't apply to frontend development and trim generic best practices Claude already knows
Include at least one complete workflow example with validation steps, such as 'Create component → Run bundle analyzer → Verify bundle size under X kb → Commit'
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose with generic filler content that adds no value. Phrases like 'Automated tool for component generator tasks' and 'Expert-level automation' are meaningless padding. The tech stack section lists technologies irrelevant to frontend (Go, Swift, Kotlin, Kubernetes, Terraform) and the best practices are generic platitudes Claude already knows. | 1 / 3 |
Actionability | No concrete, executable guidance provided. Script commands show generic placeholders like '[options]' and '[arguments]' without explaining what they actually do. No real code examples for React/Next.js patterns, no actual component templates, no specific bundle analysis output interpretation. | 1 / 3 |
Workflow Clarity | Basic numbered steps exist for setup and workflow, but no validation checkpoints or feedback loops. The workflow is vague ('Review recommendations', 'Apply fixes') without specifying what to look for or how to verify success. | 2 / 3 |
Progressive Disclosure | References to external files are present and one-level deep, which is good. However, the main file contains too much generic content that should either be removed or moved to references. The overview doesn't provide enough actionable quick-start content before pointing to references. | 2 / 3 |
Total | 6 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.