design-handoff
Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.
59
68%
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 ./design/skills/design-handoff/SKILL.mdQuality
Discovery
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.
This is a strong description that clearly defines its purpose, lists specific deliverables, and includes an explicit 'Use when' clause with natural trigger terms. It occupies a distinct niche (design-to-engineering handoff) that minimizes conflict risk with other skills. The description is concise yet comprehensive.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details. These are all concrete, well-defined deliverables. | 3 / 3 |
Completeness | Clearly answers both 'what' (generate developer handoff specs covering layout, design tokens, component props, etc.) and 'when' (when a design is ready for engineering and needs a spec sheet), with an explicit 'Use when' clause. | 3 / 3 |
Trigger Term Quality | Includes strong natural trigger terms like 'developer handoff', 'spec', 'design tokens', 'component props', 'responsive breakpoints', 'interaction states', and 'animation details' — terms a user would naturally use when requesting this kind of work. | 3 / 3 |
Distinctiveness Conflict Risk | The combination of 'developer handoff', 'spec sheet', 'design tokens', and 'component props' creates a very clear niche that is unlikely to conflict with other skills. This is a well-defined design-to-engineering workflow. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
37%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill provides a solid output template for developer handoff specs with good coverage of design dimensions (layout, tokens, states, accessibility, edge cases). However, it lacks a clear workflow sequence for how to generate the spec, has redundancy between the 'What to Include' section and the output template, and the connector integration guidance is too vague to be truly actionable.
Suggestions
Add a clear numbered workflow sequence (e.g., 1. Analyze input source, 2. Extract visual specs, 3. Document component states, 4. Verify completeness against checklist) to guide the generation process.
Consolidate the 'What to Include' checklist and the output template — they cover the same ground. Use the template as the single source of truth and remove the redundant checklist.
Make connector usage actionable by specifying tool calls or API patterns (e.g., 'Use the Figma API to fetch node properties' or 'Call ~~design_tool.get_measurements()') instead of vague 'pull exact measurements' language.
Remove the 'Tips' section which is user-facing advice rather than instructions for Claude, or reframe it as conditional behavior (e.g., 'If no Figma link provided, ask the user for one').
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is moderately efficient but includes some unnecessary verbosity. The 'Principles' section explains things Claude already understands (e.g., 'If it's not specified, the developer will guess'). The 'Tips' section at the end is user-facing advice that doesn't add actionable guidance for Claude. Some sections like 'What to Include' overlap significantly with the output template. | 2 / 3 |
Actionability | The output template is concrete and well-structured with specific markdown tables, but the skill lacks executable code or commands. The 'What to Include' section is more of a checklist than actionable instructions. The Figma integration guidance is vague ('pull the design from Figma') without specifying how (API calls, tool usage, etc.). | 2 / 3 |
Workflow Clarity | There is no clear sequenced workflow for generating the handoff spec. The skill lists what to include and provides an output template, but doesn't describe the process steps (e.g., 1. Analyze the design, 2. Extract measurements, 3. Identify components, 4. Document states, 5. Validate completeness). For a multi-section output like this, a clear generation sequence with validation checkpoints would be important. | 1 / 3 |
Progressive Disclosure | The skill references CONNECTORS.md appropriately, but the content itself is somewhat monolithic — the 'What to Include' checklist and the output template contain overlapping information that could be consolidated. No bundle files are provided, so there's no deeper reference structure, but the skill is long enough that some content (e.g., the full output template) could benefit from being in a separate reference file. | 2 / 3 |
Total | 7 / 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
- anthropics/knowledge-work-plugins
- Commit
3bf5929
- 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.