Browse the docs

Skills — Craft and build

/handoff

From approved design to build spec.

The core loopuser-invoked

The bridge from approved design to build. /handoff converts a reviewed design into a complete developer specification: component inventory, every state of every element, design tokens and spacing, interactions with exact durations and easings, edge cases, an accessibility checklist, and every string of copy — exact, never TBD.

The premise is simple: any state the spec does not document, a developer will invent. That is a design decision abdicated. The spec exists to eliminate interpretation before a line of code is written.

Reach for it once a design has passed review:

  • A design has cleared /crisp-audit or /crisp-review and is moving to implementation
  • Work is being handed to another developer, a contractor, or an agent in a separate session
  • A component keeps coming back from build with invented empty states and missing error handling
  • Component state inventory
  • Token + spacing references
  • Edge cases + error states
  • Accessibility checklist
Claude Code — /handoff
EmptyState
spacing: space-8color: text-mutedicon: size-12
ApprovalCard
variant: inlinez-index: overlay
States: default · loading · success · error · disabled
A11y: role="dialog", aria-live="polite"

Illustrative example output — not a real audit.

For each interactive element the spec covers the full state set — and the states most often missing from designs are exactly the ones users hit at the worst moments:

  • Default, hover / focus, active, and disabled
  • Loading — skeleton, spinner, or optimistic, and why
  • Empty — never "No data available"
  • Error — the specific message and its recovery action
  • Success — what confirms the action, and what it specifically did
When should I run it?

After a design has passed /crisp-audit or /crisp-review. Handoff assumes design decisions are made; its job is to make them precise enough to implement without follow-up questions.

Does it cover accessibility?

It includes a keyboard, screen-reader, and visual checklist — enough for a well-built component. For criterion-level WCAG 2.2 AA evaluation with code fixes, run /crisp-a11y; the two are designed to complement each other.

Why does it insist on exact copy?

Because TBD strings ship. Every heading, CTA, empty state, and error message is documented word for word, so the built product matches the reviewed design down to the language.

What level of precision should I expect?

The skill's own standard: "fade in" is not enough, "opacity 0 to 1, 200ms, ease-out" is. Tokens are referenced from your design system via .crisp.md wherever they exist.

zsh
$ npx skills add @laith-wallace/crisp

Installs all fourteen CRISP skills and auto-detects your AI harness. Run /crisp-teach once per project first.

The CRISP Letter

Design evaluation, in writing.

Occasional letters on making AI agents produce work worth shipping. New skills announced here first. No noise.