recipe-front-design

Execute from codebase analysis to frontend design document creation

Quality

63%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/recipe-front-design/SKILL.md

Quality

Content

77%

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

The body is a highly actionable, well-sequenced orchestration recipe with strong validation checkpoints, but it is monolithic and restates the flow multiple times, costing conciseness and progressive-disclosure points. Splitting subagent prompt templates into reference files and deduplicating the flow descriptions would lift it further.

Suggestions

Deduplicate the flow: keep the ASCII Workflow Overview as the single visual reference and remove the inline flow restated in the Orchestrator Definition execution-protocol bullet.

Move the per-subagent prompt templates (Steps 2, 5, 6, 7) into a reference file (e.g. references/subagent-prompts.md) and link to it one level deep, reducing the main file's length.

Consider extracting the Step 1 scope-bootstrap procedure into its own reference so SKILL.md reads as an overview pointing to detailed procedures.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient procedural instruction without explaining concepts Claude already knows, but the end-to-end flow is restated three times (Orchestrator Definition list, the ASCII Workflow Overview, and the Step-by-step Execution Flow), so it could be tightened.	2 / 3
Actionability	Each subagent step gives a concrete subagent_type, description, and a templated prompt with explicit placeholders and expected actions, making the guidance copy-paste ready for the orchestrator pattern.	3 / 3
Workflow Clarity	Steps 1–8 are clearly sequenced with explicit [STOP] approval gates, re-run/correct-scope feedback loops, verification gates (code-verifier, document-reviewer, design-sync), and a completion checklist.	3 / 3
Progressive Disclosure	The skill is well-sectioned but monolithic: all detail (subagent prompts, scope-bootstrap logic, scope-confirmation options) is inline in a single ~170-line file with no bundle references to split it out, matching the 'content that should be separate is inline' anchor.	2 / 3
	Total	10 / 12 Passed

Description

50%

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 conveys the skill's domain and end-to-end intent but is abstract and lacks any explicit 'Use when' trigger guidance, leaving the when-statement implicit. All dimensions land at the middle anchor as a result.

Suggestions

Add an explicit 'Use when ...' trigger clause naming natural user phrases (e.g., 'Use when designing a frontend feature, creating a UI spec or design doc, or planning frontend architecture from an existing codebase').

Replace the abstract 'Execute from ... to ...' framing with concrete actions, e.g. 'Analyzes a codebase and produces frontend design documents (UI Spec, ADR, or Design Doc) with verified trade-offs'.

Include common trigger variations users would actually say ('frontend design', 'UI spec', 'design doc', 'frontend ADR') to improve trigger term coverage.

Dimension	Reasoning	Score
Specificity	Names the domain ('codebase analysis', 'frontend design document') and a couple of actions ('analysis', 'creation'), but the verbs are abstract ('Execute ... to ...') and the action list is not comprehensive, matching the level-2 anchor.	2 / 3
Completeness	It states what the skill does (analysis to design document creation) but provides no 'Use when...' trigger, so per the guideline a missing explicit trigger caps completeness at 2.	2 / 3
Trigger Term Quality	Phrases like 'codebase analysis' and 'frontend design document' are relevant but limited, with no common variations or natural trigger phrasing a user would say, fitting the 'some relevant keywords but missing common variations' anchor.	2 / 3
Distinctiveness Conflict Risk	The frontend-design framing gives it a recognizable niche, but 'codebase analysis' and 'design document' could overlap with sibling design/codebase skills, matching the 'somewhat specific but could still overlap' anchor.	2 / 3
	Total	8 / 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: shinpr/claude-code-workflows
Path: skills/recipe-front-design/SKILL.md
Commit: 56ab6c1

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.