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.

63

Quality

73%

Does it follow best practices?

Impact

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

Content

47%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The skill has an excellent workflow structure with clear phases, validation gates, and scaling guidance, making it strong on workflow clarity. However, it is significantly over-verbose — explaining motivations, design philosophy, and consultant behavior at length when Claude already understands these concepts. The actionability is moderate: while the process is well-defined with templates and examples, the skill lacks concrete code output patterns for its primary purpose (frontend code generation). The progressive disclosure structure is reasonable but undermined by the main file's bloat.

Suggestions

Cut the content by 40-50%: remove motivational reasoning ('A wrong first draft wastes more time...'), the 'What This Skill is NOT' section, and explanations of why each phase matters — Claude can infer these. Focus on the WHAT and HOW.

Move the detailed Stitch Prototyping instructions (Phase 4) into the already-referenced `references/stitch-integration.md` file, keeping only a brief summary and trigger conditions in the main SKILL.md.

Add 1-2 concrete code output examples showing what the Atomic Build phase actually produces (e.g., a sample component with CSS custom properties, semantic HTML, and responsive styles) so Claude has a clear quality target.

Compress the Expert Behavior Guidelines and Technical Quality Standards into concise bullet lists — these are reminders, not tutorials, and Claude already knows accessibility basics and semantic HTML.

DimensionReasoningScore

Conciseness

The skill is extremely verbose at ~350+ lines. It extensively explains concepts Claude already understands (what a design consultant does, why discovery matters, what PDF-like 'references' are). Phrases like 'A wrong first draft wastes more time than 2 minutes of discovery' and 'Every token spent on discovery saves 10x in rework' are motivational padding. The 'What This Skill is NOT' section adds zero actionable value. The core workflow could be conveyed in roughly one-third the length.

1 / 3

Actionability

The skill provides structured phases with clear templates (Design Direction Summary, Execution Plan format) and concrete examples of how to handle different user scenarios. However, it lacks executable code examples — the code generation guidance is procedural/descriptive rather than showing actual code patterns. The Stitch MCP tool calls are concrete, but the core frontend code generation (the skill's primary output) has no concrete code templates or examples.

2 / 3

Workflow Clarity

The 7-phase workflow is clearly sequenced with explicit gates between phases ('Do NOT skip phases', 'Wait for explicit approval', 'CRITICAL: If the user requests changes, apply them to the CURRENT unit before moving forward'). Validation checkpoints are present at each phase transition, and there's a clear feedback loop in Phase 6 (Atomic Build). The conditional Phase 4 is well-explained with entry/exit criteria. The scaling section appropriately adapts the workflow to project size.

3 / 3

Progressive Disclosure

The skill references three external files (references/design-principles.md, references/collection-guide.md, references/stitch-integration.md) with clear load-on-demand instructions and phase mappings. However, no bundle files were provided, so these references cannot be verified. The SKILL.md itself is monolithic — much of the Stitch Prototyping detail (Phase 4) and the lengthy examples section could be offloaded to reference files, reducing the main file's token footprint significantly.

2 / 3

Total

8

/

12

Passed

Description

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 trigger terms covering natural user language, explicit 'Use when' and 'Do NOT use' clauses, and clear differentiation from backend/non-visual 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. Covers many natural variations.

3 / 3

Distinctiveness Conflict Risk

Clearly carves out a distinct niche as a frontend design consultant with a structured discovery process. The explicit exclusion of backend logic, API design, and database schemas reduces conflict risk. The emphasis on the discovery-first workflow differentiates it from generic coding skills.

3 / 3

Total

12

/

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.