CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

81%Weight 40%Scale 1-5

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

A well-engineered workflow skill: the phased pipeline with approval gates, feedback loops, and worked examples is exemplary, and progressive disclosure is genuinely implemented with three on-demand reference files. The main cost is length — repeated emphasis and inline Stitch detail make the body longer than an overview should be.

Suggestions

Trim repetition of the discovery-first principle (it appears in Core Principles, Phase 2's CRITICAL note, the intro, and 'What This Skill is NOT') — state it once and trust it.

Move Phase 4's manual Stitch workflow details (menu-step guidance like Variants/Edit Theme/Prototype instructions) into references/stitch-integration.md, keeping only the trigger conditions and prompt formula inline.

Condense or drop the 'What This Skill is NOT' section — the frontmatter description and Phase-1 principles already establish the boundaries.

DimensionReasoningScore

Conciseness

The body never explains concepts Claude already knows, but at ~460 lines it restates the discovery-first principle many times ('Never generate code without context', 'References are non-negotiable', 'Do not proceed to Phase 3 until...') and repeats Stitch menu guidance across Phase 4's manual workflow and the prompt-generation rules. This fits the score-3 anchor ('mostly efficient but includes some unnecessary explanation or could be tightened'); it is far from the severely-padded score-1/2 anchors but not the lean score-5.

3 / 5

Actionability

Fully actionable for an instruction-only skill: copy-paste templates for the Design Direction Summary and Execution Plan, exact question phrasings to ask users, a concrete Stitch prompt formula with a worked example ('A data analytics dashboard for SaaS metrics...'), named MCP tool calls (create_project, generate_screen_from_text, generate_variants, edit_screens), and four worked example scenarios. Matches the score-5 anchor ('specific examples cover the common cases').

5 / 5

Workflow Clarity

The 7-phase pipeline is clearly sequenced with explicit validation gates: 'CRITICAL: Do not proceed to Phase 3 until you have at least ONE concrete visual reference', per-unit approval prompts ('Does this match your vision?'), an error-recovery feedback loop ('If the user requests changes, apply them to the CURRENT unit before moving forward. Never accumulate fix later items'), and scaling rules by project size. This is the score-5 anchor's 'explicit validation steps; feedback loops; checklists' pattern.

5 / 5

Progressive Disclosure

Three real one-level-deep reference files (design-principles.md, collection-guide.md, stitch-integration.md), each well-signaled with the exact phase in which to load it, plus a Reference Files section stating 'Load them ON DEMAND, not upfront'. However, the SKILL.md itself runs ~460 lines and inlines detailed Stitch manual-workflow steps that belong in stitch-integration.md — the score-4 anchor ('good structure; most content appropriately placed; minor organization gaps') rather than the concise-overview score-5 pattern.

4 / 5

Total

17

/

20

Passed

Description

96%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: third-person, concrete capabilities, an explicit 'Use when' clause with natural trigger phrases, and a negative-scope clause. Only weakness is the breadth of the frontend domain, which creates minor conflict risk with adjacent web-development skills.

DimensionReasoningScore

Specificity

Lists multiple concrete actions in third person — 'guides users through a structured discovery process', 'Collects visual references, design tokens, typography, icons, layout preferences, and brand guidelines' — with comprehensive coverage of the skill's behavior. It exceeds the score-4 anchor ('several specific actions; minor gaps') and matches the score-5 anchor's comprehensiveness.

5 / 5

Completeness

Explicitly answers both 'what' (structured discovery, reference collection, fidelity-matched output) and 'when' ('Use when the user asks to build, design, create, or improve any frontend interface...'), with concrete trigger phrases — the exact score-5 anchor pattern.

5 / 5

Trigger Term Quality

Covers natural user phrasings thoroughly: 'build me a UI', 'design a page', 'create a component', 'improve this layout', 'make this look better', 'frontend', 'interface', 'redesign', plus artifact types (websites, landing pages, dashboards, forms, modals) and mockup/screenshot inputs. Matches the score-5 anchor's comprehensive synonym coverage; score 4 would understate the breadth.

5 / 5

Distinctiveness Conflict Risk

The negative boundary ('Do NOT use for backend logic, API design, database schemas, or non-visual code tasks') sharpens the niche, but 'any frontend interface' with websites, apps, forms, and modals is broad and could overlap with generic web-build or UI-library skills — the score-4 anchor ('mostly distinct; minor overlap risk with closely related skills'). Score 5 would require a tighter niche like the PDF example.

4 / 5

Total

19

/

20

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

tech-leads-club/agent-skills

Path

packages/skills-catalog/skills/(architecture)/frontend-blueprint/SKILL.md

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.