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.

Quality

78%

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 ./design/skills/design-handoff/SKILL.md

Quality

Content

68%Weight 40%Scale 1-5

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

A well-structured, actionable handoff template that assumes Claude's competence and avoids padding. The main weakness is workflow clarity: the generation process is implied rather than sequenced with explicit steps, and a filled example would lift actionability.

Suggestions

Add a short numbered workflow (e.g., 1. Pull design from Figma or description; 2. Extract tokens/measurements; 3. Fill the spec template; 4. Review against the Edge Cases and Accessibility checklists) to make the sequence explicit.

Include one fully filled worked example alongside the placeholder template so the expected output quality is unambiguous.

Consider moving the large 'Output' markdown template into a separate reference file referenced from the body to tighten progressive disclosure.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean — bullet lists and a tight output template — and avoids explaining concepts Claude already knows. Minor redundancy between 'What to Include', the 'Output' template, 'Principles', and 'Tips' keeps it just short of fully efficient.	4 / 5
Actionability	The 'Output' section provides a copy-paste-ready markdown skeleton with concrete tables (tokens, components, states, breakpoints, animation), and 'What to Include' gives specific categories. It stays at 4 rather than 5 because every cell is a placeholder and no filled worked example demonstrates the expected result.	4 / 5
Workflow Clarity	A loose sequence is implied (pull design from Figma or description, then fill the spec template), but there is no explicit numbered step sequence or checkpoints. The skill is not destructive or batch, so the destructive cap does not apply, yet the workflow remains implicit rather than clearly sequenced.	3 / 5
Progressive Disclosure	The body is well-organized with clear section headers and a single one-level pointer to CONNECTORS.md, and no bundle files exist to reference. It is over 50 lines, so the simple-skill exception does not apply, and the bulky inline 'Output' template could plausibly live in its own reference file, leaving minor organization gaps.	4 / 5
	Total	15 / 20 Passed

Description

87%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-scoped description that clearly states what it does and when to use it with concrete deliverables. Minor gains are possible by adding common synonyms like 'redlines' or 'dev specs' and framing the deliverables as multiple distinct actions.

Dimension	Reasoning	Score
Specificity	The description states the concrete action 'Generate developer handoff specs from a design' and enumerates a comprehensive list of spec deliverables ('layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details'). It is essentially a single action verb expanded into specific outputs rather than multiple distinct actions, so it sits just below a 5.	4 / 5
Completeness	It explicitly answers both 'what' ('Generate developer handoff specs from a design ... covering ...') and 'when' ('Use when a design is ready for engineering and needs a spec sheet') with concrete trigger phrasing, matching the top anchor.	5 / 5
Trigger Term Quality	It includes natural phrases a user would say such as 'design', 'handoff specs', 'spec sheet', and 'design is ready for engineering'. Coverage is good but misses common synonyms like 'redlines', 'dev specs', or 'implementation spec', leaving a few natural terms out.	4 / 5
Distinctiveness Conflict Risk	The design-to-developer handoff niche is clearly scoped with distinct triggers ('design is ready for engineering', 'spec sheet'), making conflict with other skills minimal.	5 / 5
	Total	18 / 20 Passed

Validation

87%

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 — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning
relative_links	Relative link issues: 1 suspicious	Warning

	Total	14 / 16 Passed

Repository: anthropics/knowledge-work-plugins
Path: design/skills/design-handoff/SKILL.md
Commit: 6d223a7

Reviewed: 2 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.