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.
79
75%
Does it follow best practices?
Impact
Pending
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 communicates what the skill does (generates developer handoff specs) and when to use it (when a design is ready for engineering). It lists specific deliverables that serve as both capability indicators and natural trigger terms, and it occupies a distinct niche that minimizes conflict with other skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions/outputs: 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 from a design') and when ('Use when a design is ready for engineering and needs a spec sheet covering...') with explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Includes strong natural trigger terms that users would say: 'developer handoff', 'spec', 'design tokens', 'component props', 'responsive breakpoints', 'interaction states', 'animation details'. These cover the vocabulary designers and developers naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Occupies a clear niche — developer handoff specs from designs — with distinct triggers like 'handoff', 'spec sheet', 'design tokens', 'component props'. Unlikely to conflict with general design or general coding skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides a solid output template for developer handoff specs with good coverage of design dimensions (layout, interactions, accessibility, edge cases). However, it lacks a concrete worked example showing real values, has redundancy between the checklist and output template, and would benefit from a clearer step-by-step workflow for how to systematically produce the spec rather than just listing what should be in it.
Suggestions
Add a brief concrete example showing a completed section of the handoff spec with real values (e.g., a login button with actual tokens, states, and measurements) to improve actionability.
Define an explicit step-by-step workflow: e.g., 1) Extract/identify layout structure, 2) Map design tokens, 3) Document all component states, 4) Verify all states covered, 5) Generate final spec — to improve workflow clarity.
Consolidate the 'What to Include' checklist and the output template into a single structure to eliminate redundancy and improve conciseness.
Move the full output template to a separate TEMPLATE.md file and reference it from the main skill to improve progressive disclosure.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is reasonably structured but includes some unnecessary elaboration. 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 much for Claude's execution. Some sections like the full checklist under 'What to Include' could be more compact. | 2 / 3 |
Actionability | The output template is concrete and copy-paste ready with clear markdown table structures, which is good. However, the skill lacks executable code or specific commands — it's mostly a checklist of what to include plus an output template with placeholder brackets. There's no concrete example of a completed handoff spec showing real values, which would make it significantly more actionable. | 2 / 3 |
Workflow Clarity | The workflow is implicit rather than explicit: get design input → analyze → produce spec. There's no clear sequencing of steps (e.g., 'First pull measurements, then identify tokens, then document states'). For a multi-faceted output like this, a clearer step-by-step process with validation checkpoints (e.g., 'verify all states are covered before finalizing') would improve reliability. | 2 / 3 |
Progressive Disclosure | The skill references CONNECTORS.md appropriately and organizes content into logical sections. However, the output template is quite long and inline — it could be split into a separate TEMPLATE.md file. The 'What to Include' checklist and the output template overlap significantly, creating redundancy that better progressive disclosure would resolve. | 2 / 3 |
Total | 8 / 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 | |
f55b539
Table of Contents
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.