AI frontend specialist and design consultant that guides users through a structured discovery process before generating any code. Collects visual references, design tokens, typography, icons, layout preferences, and brand guidelines to ensure the final output matches the user's vision with high fidelity. Use when the user asks to build, design, create, or improve any frontend interface — websites, landing pages, dashboards, components, apps, emails, forms, modals, or any UI element. Also triggers on "build me a UI", "design a page", "create a component", "improve this layout", "make this look better", "frontend", "interface", "redesign", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks.
82
77%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./packages/skills-catalog/skills/(architecture)/frontend-blueprint/SKILL.mdQuality
Discovery
100%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 skill description that excels across all dimensions. It provides specific capabilities, comprehensive natural trigger terms, explicit 'Use when' and 'Do NOT use' clauses, and clear differentiation from backend/non-visual coding skills. The description is thorough without being unnecessarily verbose.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: guides through structured discovery process, collects visual references, design tokens, typography, icons, layout preferences, and brand guidelines, generates code with high fidelity to user's vision. | 3 / 3 |
Completeness | Clearly answers both 'what' (AI frontend specialist that guides through discovery and generates code based on collected design preferences) and 'when' (explicit 'Use when...' clause with detailed trigger scenarios, plus a 'Do NOT use' exclusion clause for additional clarity). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would say: 'build me a UI', 'design a page', 'create a component', 'improve this layout', 'make this look better', 'frontend', 'interface', 'redesign', plus mentions of mockups, screenshots, and design references. These are highly natural phrases. | 3 / 3 |
Distinctiveness Conflict Risk | Clearly carves out a distinct niche as a frontend design specialist with a structured discovery process. The explicit exclusion of backend logic, API design, and database schemas further reduces conflict risk with other coding skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
54%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill has excellent workflow structure with clear phase gates, validation checkpoints, and progressive disclosure of reference materials. However, it is significantly over-verbose — much of the content explains consulting principles and design philosophy that Claude already understands, and the actionability suffers from a lack of concrete code examples or templates despite being a frontend code generation skill. The skill would benefit greatly from being cut to roughly half its length while adding executable code snippets.
Suggestions
Cut the content by 40-50%: remove 'Core Principles' rationale explanations, the 'What This Skill is NOT' section, and redundant justifications throughout (e.g., 'A wrong first draft wastes more time than 2 minutes of discovery'). Claude understands these concepts.
Add concrete, executable code examples in the Atomic Build phase — e.g., a sample CSS custom properties setup, a responsive card component template, or a design tokens file structure that demonstrates the technical quality standards in practice.
Compress the 'Expert Behavior Guidelines' into a brief bullet list of behaviors without explanations — Claude doesn't need to be told why challenging vagueness is good, just instructed to do it.
The four examples at the end could be reduced to two (one clear-vision, one vague-request) with shorter descriptions, as the patterns are repetitive.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~350+ lines. It extensively explains concepts Claude already understands (what a consultant does, why discovery matters, what vague requests are). Sections like 'What This Skill is NOT', 'Core Principles' rationale, and 'Expert Behavior Guidelines' largely restate things Claude inherently knows. The 'Target user is a fullstack developer' framing and repeated justifications ('A wrong first draft wastes more time than 2 minutes of discovery') are unnecessary padding. | 1 / 3 |
Actionability | The workflow phases provide structured guidance and the examples show concrete interaction patterns, but there is no executable code anywhere in the skill itself. The Design Direction template and Execution Plan template are useful structured formats, and the Stitch MCP tool calls are specific. However, the actual code generation guidance is abstract ('Generate the code following the agreed design direction precisely') rather than showing concrete implementation patterns or templates. | 2 / 3 |
Workflow Clarity | The 7-phase workflow is clearly sequenced with explicit gates between phases ('Do NOT skip phases', 'CRITICAL: Do not proceed to Phase 3 until...', 'Wait for explicit approval or adjustments before proceeding'). Each phase has a stated goal, clear exit criteria, and the conditional Phase 4 is well-explained. The atomic build phase includes a validation loop ('Does this match your vision? Any adjustments before I move to the next step?') and explicitly prohibits accumulating 'fix later' items. | 3 / 3 |
Progressive Disclosure | Reference files are clearly listed with specific triggers for when to load them ('Read during Phase 3', 'Read during Phase 2 when the user struggles'). The skill explicitly states 'Load them ON DEMAND, not upfront' and each reference file has a clear description of its contents. The scaling section appropriately compresses the workflow for different project sizes. | 3 / 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.
906a57d
Table of Contents
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.