frontend-design
Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.
Install with Tessl CLI
npx tessl i github:answerzhao/agent-skills --skill frontend-design71
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
82%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 solid description with good completeness and excellent trigger term coverage. The explicit 'Use when...' clause with multiple specific contexts is well-executed. The main weakness is that the capabilities could be more concrete (what specific transformations or outputs?) and the scope is broad enough to potentially conflict with general frontend coding skills.
Suggestions
Add more specific concrete actions like 'generate CSS custom properties', 'create themed component variants', or 'produce WCAG-compliant color schemes' to improve specificity
Differentiate from general frontend coding skills by emphasizing the design-system/styling focus more explicitly, e.g., 'Use when styling or theming is the primary concern, not general application logic'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (frontend/UI) and mentions some actions like 'transform requirements into code' and 'design tokens', but lacks specific concrete actions like 'create color palettes', 'generate CSS variables', or 'build component libraries'. | 2 / 3 |
Completeness | Clearly answers both what ('Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution') and when ('Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI'). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'websites', 'web applications', 'React/Vue components', 'dashboards', 'landing pages', 'web UI', 'design tokens', 'accessibility'. These are terms users naturally use when requesting frontend work. | 3 / 3 |
Distinctiveness Conflict Risk | While it specifies frontend/UI focus with design tokens and accessibility, terms like 'React/Vue components' and 'web applications' could overlap with general coding skills. The design-system angle provides some distinction but 'production-ready frontend code' is fairly broad. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides highly actionable, production-ready guidance for frontend development with excellent code examples and comprehensive coverage of design systems. However, it severely violates token efficiency by explaining concepts Claude already knows and including massive inline content that should be in referenced files. The workflow is present but lacks explicit validation gates between phases.
Suggestions
Reduce content by 60-70% by removing explanations of basic concepts (what design tokens are, how CSS variables work, basic accessibility principles) and trusting Claude's existing knowledge
Move the detailed token definitions, prompt templates, design direction templates, and advanced techniques into separate referenced files (e.g., PROMPTS.md, TOKENS.md, ADVANCED.md)
Add explicit validation checkpoints between workflow phases, such as 'Verify tokens compile before proceeding to components' and 'Run accessibility audit before page assembly'
Consolidate the verification checklist into the workflow phases rather than having it as a separate disconnected section at the end
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at 700+ lines with extensive explanations of concepts Claude already knows (what design tokens are, how CSS custom properties work, basic accessibility principles). Contains massive prompt templates that could be condensed significantly, and repeats similar information across multiple sections. | 1 / 3 |
Actionability | Provides fully executable code examples throughout - CSS custom properties, TypeScript components, Tailwind configurations, and complete prompt templates. Code is copy-paste ready with specific values, not pseudocode. | 3 / 3 |
Workflow Clarity | Has a clear 4-phase workflow (Analysis → Component Development → Page Assembly → QA) with numbered steps, but validation checkpoints are implicit rather than explicit. The verification checklist at the end is comprehensive but disconnected from the workflow phases. | 2 / 3 |
Progressive Disclosure | References external files (examples/css/, examples/typescript/, templates/) appropriately, but the main SKILL.md is monolithic with 700+ lines of inline content. Much of the detailed token definitions, prompt templates, and advanced techniques could be split into separate reference files. | 2 / 3 |
Total | 8 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (982 lines); consider splitting into references/ and linking | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 9 / 11 Passed | |
- 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.