recipe-front-design

Execute from requirement analysis to frontend design document creation

Quality

49%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Advisory

Suggest reviewing before use

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/recipe-front-design/SKILL.md

Quality

Discovery

22%

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 description is too vague and process-oriented, describing a workflow ('from X to Y') rather than concrete capabilities. It lacks a 'Use when...' clause, specific actions, and natural trigger terms that would help Claude distinguish this skill from others. The description reads more like a project phase summary than a skill description.

Suggestions

Add a 'Use when...' clause with explicit triggers, e.g., 'Use when the user asks to create a frontend design document, convert requirements into UI specifications, or needs a design spec from product requirements.'

List specific concrete actions the skill performs, e.g., 'Analyzes product requirements, defines UI components and layouts, generates frontend design specifications including component hierarchy, state management, and API contracts.'

Include natural trigger terms users would say, such as 'frontend spec', 'UI design doc', 'design specification', 'component design', 'requirements to design', '.md design document'.

Dimension	Reasoning	Score
Specificity	The description uses vague language like 'execute from requirement analysis to frontend design document creation' without listing concrete actions. It doesn't specify what kind of analysis, what deliverables, or what steps are involved.	1 / 3
Completeness	The description weakly addresses 'what' (requirement analysis to design document creation) but completely lacks any 'when' clause or explicit trigger guidance for when Claude should select this skill.	1 / 3
Trigger Term Quality	Contains some relevant keywords like 'requirement analysis', 'frontend', and 'design document' that users might mention, but lacks common variations and natural phrasing users would actually say (e.g., 'UI design', 'spec', 'wireframe', 'requirements doc').	2 / 3
Distinctiveness Conflict Risk	The mention of 'frontend design document' provides some specificity, but 'requirement analysis' and 'document creation' are broad enough to overlap with many other skills related to documentation, requirements gathering, or design work.	2 / 3
	Total	6 / 12 Passed

Implementation

77%

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

This is a well-structured orchestration skill with strong actionability and workflow clarity—concrete sub-agent invocations, clear sequencing, and explicit stop points make it highly executable. Its main weaknesses are moderate verbosity (some redundant explanations and repeated context) and the inability to verify referenced external files. The skill effectively serves as a runbook for a complex multi-agent frontend design workflow.

Suggestions

Reduce redundancy by removing repeated mentions of output reuse (e.g., 'Both outputs are reused by ui-spec-designer in Step 3 and by technical-designer-frontend in Step 4' is stated in both the step description and the invocation details).

Consider extracting the detailed prompt templates for each sub-agent invocation into a separate reference file to keep the main SKILL.md leaner as an overview.

Dimension	Reasoning	Score
Conciseness	The skill is moderately efficient but contains some redundancy—repeated explanations of what each sub-agent does, restating that outputs are reused across steps, and verbose prompt examples that could be templated. Some sections like the scope boundaries list items that are already evident from the workflow.	2 / 3
Actionability	The skill provides concrete, copy-paste-ready sub-agent invocations with specific subagent_type strings, description fields, and detailed prompt templates. Each step has explicit tool call parameters and clear instructions on what data to pass between steps.	3 / 3
Workflow Clarity	The workflow is clearly sequenced with an ASCII diagram, numbered steps, explicit [STOP] markers as validation/approval checkpoints at critical gates, parallel execution instructions, and a completion checklist. Feedback loops are present via document-reviewer and design-sync quality gates.	3 / 3
Progressive Disclosure	The skill references several external skills and sub-agents (subagents-orchestration-guide, external-resource-context, etc.) which is good progressive disclosure, but no bundle files are provided to verify these references exist. The SKILL.md itself is fairly long and some content (like detailed prompt examples for each sub-agent) could potentially be split into reference files.	2 / 3
	Total	10 / 12 Passed

Validation

90%

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 — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

Repository: shinpr/claude-code-workflows
Commit: 68ecb4a

Reviewed: about 11 hours 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.