senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
81
78%
Does it follow best practices?
Impact
81%
0.98xAverage score across 6 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./engineering-team/senior-frontend/SKILL.mdQuality
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 communicates both what the skill does and when to use it. It lists specific technologies and concrete actions, and includes an explicit 'Use when...' clause with natural trigger terms. The only minor weakness is that the scope is broad enough (covering all of frontend development) that it could potentially overlap with more specialized skills in the same domain.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, and reviewing frontend code quality. | 3 / 3 |
Completeness | Clearly answers both 'what' (frontend development for React/Next.js/TypeScript/Tailwind) and 'when' with an explicit 'Use when...' clause listing six specific trigger scenarios. | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: React, Next.js, TypeScript, Tailwind CSS, components, bundle sizes, accessibility, frontend, code quality. These cover a good range of terms a user would naturally use when requesting frontend help. | 3 / 3 |
Distinctiveness Conflict Risk | While it specifies frontend technologies clearly, terms like 'reviewing code quality' and 'scaffolding projects' could overlap with general coding or code review skills. The React/Next.js/Tailwind focus helps but 'frontend' is still a broad domain that could conflict with more specialized UI or CSS skills. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
64%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a comprehensive frontend skill with strong actionability through executable commands and complete code examples. However, it suffers from including too much content Claude already knows (React patterns, accessibility basics, TypeScript fundamentals) and duplicates content that is already referenced in external files. The workflows would benefit from explicit validation checkpoints, particularly after scaffolding and bundle optimization steps.
Suggestions
Remove or significantly trim the React Patterns, Accessibility Checklist, and TypeScript Patterns sections since these cover well-known concepts and are already referenced in external files — keep only project-specific conventions or non-obvious patterns.
Add validation checkpoints to workflows: e.g., after scaffolding verify with 'npm run build' succeeds, after bundle optimization re-run the analyzer to confirm score improvement.
Reduce duplication between inline content and referenced files — either keep the detail in references and provide only a brief summary inline, or remove the references and keep the inline content.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is fairly long (~350 lines) and includes some content Claude already knows well, such as basic React patterns (compound components, custom hooks, render props), standard accessibility checklist items, and basic TypeScript patterns. The bundle analysis tables and scaffolder options are useful, but the React patterns section and accessibility checklist largely restate common knowledge. | 2 / 3 |
Actionability | The skill provides fully executable bash commands for scaffolding, component generation, and bundle analysis, along with complete, copy-paste-ready code examples for components, hooks, tests, and Next.js patterns. Options tables are specific and well-documented. | 3 / 3 |
Workflow Clarity | The scaffolding, component generation, and bundle analysis workflows have clear numbered steps, but they lack explicit validation checkpoints. For example, after scaffolding there's no verification step to confirm the project was created correctly, and the bundle optimization workflow says 'apply recommended fixes' without a validate-then-retry loop. | 2 / 3 |
Progressive Disclosure | The skill references external files (references/react_patterns.md, references/nextjs_optimization_guide.md, references/frontend_best_practices.md) which is good, but then proceeds to inline substantial content that overlaps with those references (React patterns, Next.js optimization, accessibility). The table of contents helps navigation, but the content that should be deferred to reference files is duplicated inline. | 2 / 3 |
Total | 9 / 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.
- Repository
- alirezarezvani/claude-skills
- Commit
967fe01
- 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.