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.

72

Quality

88%

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

77%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-structured consultant skill with an excellent phased workflow, strong validation checkpoints, and clean progressive disclosure to verified reference files. Its main weakness is conciseness — overlapping sections and consultant framing add length — and the absence of any concrete frontend code example in the build phase.

Suggestions

Consolidate 'What This Skill is NOT' and 'Expert Behavior Guidelines' with Core Principles to remove overlap and cut roughly 30-40 lines of redundant framing.

Add one short, concrete frontend code snippet (e.g., a design-token CSS custom properties block matching the Design Direction template) to the Atomic Build phase so the central deliverable is executable, not just instructional.

Trim consultant-voice aphorisms ('every token spent on discovery saves 10x in rework') that do not change behavior.

DimensionReasoningScore

Conciseness

The body is efficient in places but carries redundancy — 'What This Skill is NOT' restates Core Principles in negative form and 'Expert Behavior Guidelines' overlaps 'Opinionated guidance', plus consultant framing like 'A wrong first draft wastes more time than 2 minutes of discovery' could be trimmed. Not below midpoint: the content is mostly high-value and well-organized rather than padded with concepts Claude already knows.

3 / 5

Actionability

Provides concrete executable guidance: Stitch MCP calls (create_project, generate_screen_from_text, generate_variants, edit_screens, get_screen), a copy-paste Design Direction Summary template, and a prompt formula. Falls short of 5 only because the actual code-generation phase offers no concrete frontend code example, leaving the central deliverable abstract.

4 / 5

Workflow Clarity

The 7-phase workflow is clearly sequenced with explicit validation checkpoints at each transition — 'Do not proceed to Phase 3 until you have at least ONE concrete visual reference', 'Wait for explicit approval', and 'Does this match your vision?' — plus a feedback loop requiring changes to the current unit before advancing.

5 / 5

Progressive Disclosure

The body is an overview that defers deep dives to three real, verified one-level-deep references (design-principles.md, collection-guide.md, stitch-integration.md), each clearly signaled in a Reference Files section with load-on-demand timing guidance, making navigation easy.

5 / 5

Total

17

/

20

Passed

Description

100%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.

The description is exemplary: it states concrete capabilities, provides comprehensive natural trigger phrases, answers both what and when explicitly, and includes a negative boundary to avoid mis-triggering. No changes needed.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'guides users through a structured discovery process', 'Collects visual references, design tokens, typography, icons, layout preferences, and brand guidelines', and code generation — giving comprehensive coverage of capabilities.

5 / 5

Completeness

Explicitly answers both what (frontend design consultant running a discovery process and generating code) and when ('Use when the user asks to build, design, create, or improve any frontend interface'), with concrete trigger phrases and an explicit negative boundary.

5 / 5

Trigger Term Quality

Extensive natural trigger coverage including synonyms and phrasings users actually say: 'build me a UI', 'design a page', 'create a component', 'improve this layout', 'make this look better', 'frontend', 'interface', 'redesign'.

5 / 5

Distinctiveness Conflict Risk

Clear frontend/UI niche with distinct triggers and an explicit exclusion clause ('Do NOT use for backend logic, API design, database schemas, or non-visual code tasks') that minimizes conflict risk.

5 / 5

Total

20

/

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.

Validation16 / 16 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.