recipe-front-design
Execute from codebase analysis to frontend design document creation
44
46%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Advisory
Suggest reviewing before use
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/recipe-front-design/SKILL.mdQuality
Discovery
14%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 abstract to effectively guide skill selection. It lacks concrete actions, explicit trigger conditions, and sufficient specificity to distinguish it from other code analysis or documentation skills. The phrasing 'Execute from X to Y' is awkward and does not clearly communicate what the skill does or when it should be used.
Suggestions
Add a 'Use when...' clause with explicit trigger terms, e.g., 'Use when the user asks for a frontend design document, UI specification, or component architecture based on an existing codebase.'
List specific concrete actions the skill performs, e.g., 'Analyzes codebase structure, identifies frontend components, maps data flows, and generates a structured design document with component hierarchy, state management patterns, and UI specifications.'
Include natural keywords and file/artifact types users would mention, such as 'design spec', 'UI architecture', 'component diagram', 'frontend spec', or 'design doc'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description is vague — 'codebase analysis' and 'frontend design document creation' are broad and abstract. It does not list concrete actions like 'generate component diagrams', 'extract API endpoints', or 'produce wireframes'. | 1 / 3 |
Completeness | The description loosely addresses 'what' (codebase analysis to design document creation) but provides no 'when' clause or explicit trigger guidance. The lack of a 'Use when...' clause caps this at 2, and the 'what' is itself weak, so it scores 1. | 1 / 3 |
Trigger Term Quality | It includes some relevant keywords like 'codebase analysis', 'frontend', and 'design document', which a user might mention. However, it misses common variations and natural phrases users would say (e.g., 'UI spec', 'design spec', 'architecture doc', 'component breakdown'). | 2 / 3 |
Distinctiveness Conflict Risk | 'Codebase analysis' and 'design document creation' are extremely broad terms that could overlap with many other skills related to code review, documentation generation, architecture analysis, or frontend development. | 1 / 3 |
Total | 5 / 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 recipe with strong actionability and workflow clarity. Each step provides specific subagent invocation details, clear stop points, and conditional branching logic. The main weaknesses are moderate verbosity from repeated data-passing descriptions across steps and the monolithic nature of the content that could benefit from splitting detailed subagent prompt templates into separate reference files.
Suggestions
Reduce repetition by defining the common data references (codebase-analyzer JSON, ui-analyzer JSON, confirmed scope) once at the top and using shorthand labels in each step instead of restating full descriptions.
Consider extracting the detailed subagent prompt examples into a separate reference file to reduce the main skill's length and improve progressive disclosure.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is fairly long but most content is necessary for orchestrating a complex multi-step workflow. However, there is some redundancy — the same data-passing patterns are repeated across steps (e.g., 'codebase-analyzer JSON from Step 2' and 'ui-analyzer JSON from Step 5' are restated many times), and some explanations could be tightened. The completion criteria largely duplicate the workflow steps. | 2 / 3 |
Actionability | Each step provides concrete, executable guidance: specific subagent_type values, exact prompt structures with field names, JSON schema fields to populate, tool invocations, and example prompts. The skill gives copy-paste-ready agent invocation patterns with all required parameters specified. | 3 / 3 |
Workflow Clarity | The workflow is clearly sequenced with an ASCII diagram, numbered steps, explicit [STOP] markers for user approval gates, conditional branching (ADR vs Design Doc), and feedback loops (e.g., 'Correct the scope and re-run' returning to Step 1). Validation checkpoints are present at multiple stages (code-verifier, document-reviewer, design-sync). | 3 / 3 |
Progressive Disclosure | The skill references external skills and subagents (subagents-orchestration-guide, external-resource-context, codebase-analyzer, ui-analyzer, etc.) but no bundle files are provided to verify these references. The content is quite long (~200+ lines) and some sections like the detailed prompt examples for each subagent invocation could potentially be split into separate reference files. The structure within the file is well-organized with clear sections, but the monolithic nature of the content works against progressive disclosure. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
90%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
adf2e4d
- 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.