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

—

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Quality

Content

70%

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

The content has excellent workflow clarity and progressive disclosure — a well-sequenced 7-phase process with explicit checkpoints and properly structured on-demand references. It is weaker on conciseness (overlong for a SKILL.md) and actionability (build-phase guidance is templated rather than executable).

Suggestions

Tighten the body: compress the Core Principles prose, trim the exhaustive "Collect when relevant" enumeration, and condense the Examples section so SKILL.md stays a lean overview.

Add at least one concrete, executable code example for the Atomic Build phase (e.g., a CSS-custom-property token block and one component skeleton) so the build step is copy-paste ready rather than templated.

Move the detailed Stitch manual-workflow walkthrough and prompt-generation rules into references/stitch-integration.md, keeping only the decision logic and MCP tool names in SKILL.md.

Dimension	Reasoning	Score
Conciseness	The body is very long (~460 lines) and could be tightened — long prose on core principles, exhaustive "Collect when relevant" enumeration, and a large Examples section restating the workflow — though it does not explain concepts Claude already knows.	2 / 3
Actionability	Concrete guidance exists (exact Stitch MCP calls, a Design Direction template, prompt formula) but the core build phase offers templates/structure rather than executable, copy-paste code, leaving key implementation detail incomplete.	2 / 3
Workflow Clarity	A clear 7-phase sequence with explicit, frequent checkpoints ("Do NOT skip phases", "Do not proceed to Phase 3 until…", "Wait for explicit approval", apply changes to the CURRENT unit before moving on) provides strong feedback loops.	3 / 3
Progressive Disclosure	The body is an overview with three clearly signaled, one-level-deep references loaded ON DEMAND with specific trigger conditions, and all referenced files (design-principles.md, collection-guide.md, stitch-integration.md) exist in ./references/.	3 / 3
	Total	10 / 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.

The description is well-crafted: it states concrete capabilities, provides rich natural trigger terms, explicitly covers both what and when, and uses a negative-exclusion clause to avoid conflicts. It is a strong, complete description.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — "guides users through a structured discovery process" and "Collects visual references, design tokens, typography, icons, layout preferences, and brand guidelines" — matching the multiple-specific-actions anchor.	3 / 3
Completeness	Explicitly answers both what (discovery process + reference/token collection) and when ("Use when the user asks to build, design, create, or improve any frontend interface…"), with explicit triggers rather than implied ones.	3 / 3
Trigger Term Quality	Includes natural phrases a user would say ("build me a UI", "design a page", "improve this layout", "make this look better", "frontend", "redesign") plus concrete UI types, giving good coverage.	3 / 3
Distinctiveness Conflict Risk	Clear frontend-UI niche sharpened by a "Do NOT use for backend logic, API design, database schemas, or non-visual code tasks" exclusion clause, making wrong-skill triggering unlikely.	3 / 3
	Total	12 / 12 Passed

Validation

100%

Warnings & errors only

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
Commit: 9026164

Reviewed: 4 days ago

Table of Contents

Discovery Implementation Validation

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.