CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-blueprint

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

Quality

77%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./packages/skills-catalog/skills/(architecture)/frontend-blueprint/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

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.

DimensionReasoningScore

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.

DimensionReasoningScore

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
tech-leads-club/agent-skills
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.