frontend-developer
Builds and debugs frontend components, implements responsive layouts, optimizes bundle size and rendering performance, and enforces accessibility standards across React, Vue, Angular, and Svelte projects. Use when the user asks to create or refactor UI components, fix CSS/HTML/JavaScript issues, set up state management, improve Core Web Vitals, configure Tailwind or design tokens, debug hydration or rendering problems, or implement keyboard navigation and ARIA patterns in a web app.
87
84%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Quality
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, well-crafted description that excels in specificity, trigger term coverage, and completeness with a clear 'Use when...' clause. Its main weakness is its broad scope—covering four frameworks and many sub-domains—which increases the risk of conflicting with more specialized skills in a large skill library. The description uses proper third-person voice throughout.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: builds/debugs frontend components, implements responsive layouts, optimizes bundle size and rendering performance, enforces accessibility standards, across named frameworks (React, Vue, Angular, Svelte). | 3 / 3 |
Completeness | Clearly answers both 'what' (builds/debugs frontend components, responsive layouts, bundle optimization, accessibility) and 'when' with an explicit 'Use when...' clause listing seven distinct trigger scenarios. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'UI components', 'CSS/HTML/JavaScript', 'state management', 'Core Web Vitals', 'Tailwind', 'design tokens', 'hydration', 'ARIA patterns', 'keyboard navigation', 'web app', plus framework names. These are terms developers naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | While it has strong frontend-specific triggers, the breadth is very wide—covering CSS, HTML, JavaScript, state management, performance, and accessibility across four frameworks. This could overlap with more specialized skills for individual frameworks, CSS-specific skills, or general JavaScript debugging skills. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a solid, actionable skill with excellent executable examples, clear anti-patterns, and a well-structured workflow with explicit validation checkpoints. Its main weakness is breadth — it covers component building, state management, performance optimization, and accessibility validation all in one file, making it somewhat long. The content could benefit from tighter editing and better progressive disclosure through referenced sub-files.
Suggestions
Consider splitting detailed code examples (e.g., React Query patterns, image optimization) into referenced sub-files to keep the main SKILL.md as a concise overview with navigation links.
Replace the vague 'refer to dedicated framework sub-files if available' with concrete file references or remove the note entirely if those files don't exist.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient with good code examples, but includes some unnecessary framing (e.g., 'not the end', 'the principles apply across all four frameworks') and the scope is quite broad for a single skill file. Some sections like the framework-specific note add little value. The constraints section restates things already implied by the workflow. | 2 / 3 |
Actionability | Provides fully executable code examples (React component, React Query pattern, lazy loading, image optimization), specific CLI commands (axe-cli, lighthouse, playwright), concrete metric targets, and clear anti-pattern vs. pattern comparisons. Everything is copy-paste ready. | 3 / 3 |
Workflow Clarity | The 5-step workflow (Define → Build → Integrate → Optimize → Validate) is clearly sequenced with explicit validation checkpoints in step 5, including a checklist with measurable criteria. The validate step includes feedback loops (zero violations target, coverage thresholds) and specific commands to run before marking work complete. | 3 / 3 |
Progressive Disclosure | The content is well-structured with clear sections and headers, but it's fairly long and monolithic. The mention of 'dedicated framework sub-files if available' is vague rather than clearly signaled. The performance targets table, validation checklist, and detailed code examples could potentially be split into referenced files for better organization. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Repository
- OpenRoster-ai/awesome-agents
- Commit
010799b
- 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.