CtrlK
BlogDocsLog inGet started
Tessl Logo

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

Quality

68%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Advisory

Suggest reviewing before use

Optimize this skill with Tessl

npx tessl skill review --optimize ./design/skills/design-handoff/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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 actionable. The skill reads more like a reference document than an executable instruction set.

Suggestions

Add a clear numbered workflow: 1. Analyze input (Figma URL vs description vs screenshot), 2. Extract/identify measurements and tokens, 3. Catalog components and states, 4. Document responsive behavior, 5. Validate completeness against checklist — this would significantly improve workflow clarity.

Remove the 'What to Include' section since it duplicates the output template, or consolidate them into a single section that serves as both checklist and template.

Make connector usage actionable by specifying tool names or MCP operations (e.g., 'Use the Figma MCP tool to fetch node properties') rather than vague 'pull exact measurements from Figma'.

Remove the 'Tips' section which is user-facing advice rather than instructions for Claude, or reframe it as conditional behavior (e.g., 'If user provides Figma link, prioritize extracting exact values over estimates').

DimensionReasoningScore

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 better organized. No bundle files are provided, so there's no deeper reference structure, but the skill is long enough that separating the output template into a referenced file could improve organization.

2 / 3

Total

7

/

12

Passed

Description

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, well-crafted description that clearly communicates both what the skill does and when to use it. It uses specific, domain-appropriate terminology that designers and developers would naturally use, and its niche is distinct enough to avoid conflicts with other skills. The explicit 'Use when' clause with detailed trigger conditions makes it easy for Claude to select appropriately.

DimensionReasoningScore

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 an explicit 'Use when' clause and detailed trigger conditions.

3 / 3

Trigger Term Quality

Includes strong natural trigger terms users would say: 'developer handoff', 'spec', 'design tokens', 'component props', 'responsive breakpoints', 'interaction states', 'ready for engineering'. These cover the vocabulary designers and developers naturally use.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche at the intersection of design and engineering handoff. The specific focus on spec sheets with design tokens, component props, and breakpoints makes it highly distinct from general design or coding skills.

3 / 3

Total

12

/

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.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
anthropics/knowledge-work-plugins
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.