CtrlK
BlogDocsLog inGet started
Tessl Logo

handoff-to-dev

Specify, map, document, validate, and package an approved UX/UI design or prototype into build-ready behavior, component, responsive, state, accessibility, analytics, QA, and acceptance contracts. Trigger on "prepare developer handoff", "hand off to engineering", "create implementation specs", "spec this design", "document component behavior", or "write acceptance criteria". Do not use while the product model is still being redesigned or invent backend contracts.

77

Quality

96%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

92%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, lean instruction skill: a sequenced 9-step workflow with a feedback-loop checkpoint and quality-bar checklist, concrete fill-in templates plus synthetic examples, and four real one-level-deep reference files appropriately split from the overview. The only minor weakness is partial recap redundancy between section 9 and earlier sections.

Suggestions

Tighten section 9 "Produce the handoff package": its Flow contract / Screen and component specs / State matrix / Acceptance criteria sub-items overlap sections 2, 4, 5, and 8 — consolidate to a packaging checklist that cross-references those sections rather than restating them.

Consider adding one short inline "happy path vs. edge state" mini-example next to the state matrix template so the most common execution pattern is visible without opening references/state-and-responsive-matrix.md.

DimensionReasoningScore

Conciseness

Lean, action-oriented body using compact pipe-delimited templates with no concept-explanation padding; however section 9 ("Produce the handoff package") recapitulates flow/screen/state/acceptance structures already detailed in sections 2-8, a minor trim opportunity that keeps it just below fully earned. Not a 3 because it is mostly efficient with no verbosity, not a 5 because the recap is mild redundancy.

4 / 5

Actionability

Concrete fill-in templates (e.g. "Design object | Code component | Variant | Tokens | Content/data | Event | Owner | Gap") and synthetic worked examples (AddressAutocomplete contract) cover the common cases, giving actionable guidance appropriate to an instruction-only skill. Not a 4 because the synthetic examples plus the referenced worked-example.md cover common cases concretely without notable gaps.

5 / 5

Workflow Clarity

A clearly sequenced 9-step process with an explicit feedback-loop checkpoint ("Revise gaps, then repeat until each Quality-bar item passes...") and a closing Quality bar checklist; this is a documentation skill so the destructive/batch cap does not apply. Matches the explicit-validation-and-feedback-loops anchor.

5 / 5

Progressive Disclosure

SKILL.md is an overview that well-signals four one-level-deep references ("Read [references/implementation-contract.md]" etc.), all of which exist as real bundle files, with detail appropriately split out. Matches the clear-overview-with-one-level-deep-references anchor; not a 4 because navigation is clean and references are clearly signaled.

5 / 5

Total

19

/

20

Passed

Description

100%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 high-quality description: concrete multi-verb action list, comprehensive output coverage, six natural trigger phrases, explicit when-guidance, and a clear scope boundary that reduces conflict risk. It answers both what and when without padding or buzzwords.

DimensionReasoningScore

Specificity

Lists multiple concrete actions ("Specify, map, document, validate, and package") and comprehensive output coverage (behavior, component, responsive, state, accessibility, analytics, QA, and acceptance contracts), matching the comprehensive-coverage anchor; not a 4 because coverage is broad rather than having only minor gaps.

5 / 5

Completeness

Explicitly answers what ("Specify, map, document, validate, and package ... into build-ready ... contracts") and when ("Trigger on ...") with concrete trigger phrases, plus a negative boundary; matches the both-what-and-when-with-trigger-phrases anchor exactly.

5 / 5

Trigger Term Quality

Six natural phrases a user would say ("prepare developer handoff", "hand off to engineering", "spec this design", "write acceptance criteria") with synonyms (handoff/hand off, spec/specs), giving comprehensive natural-term coverage; not a 4 because common variations are well represented.

5 / 5

Distinctiveness Conflict Risk

Clear niche (approved UX/UI-to-developer handoff) with distinct triggers and an explicit anti-trigger ("Do not use while the product model is still being redesigned or invent backend contracts"), minimizing conflict risk; not a 4 because the niche and boundary are unambiguous.

5 / 5

Total

20

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
aditya-ariosity/ux-ui-skills
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.