Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsHandoff to Dev - Design skill
Convert UX designs into build-ready technical specs, component maps, and testable acceptance criteria.
$5.99
Handoff to Dev - Design skill
Example session with this skill installed
Hand off the new 'Address Autocomplete' checkout component to engineering. It uses the Design System v2 tokens and needs to work on mobile web and desktop.
- Read your context and instructions
- Compiled the handoff to dev
- Generated the UI component
I have prepared the implementation contract for the Address Autocomplete component. This specification maps the approved UX to the Design System v2 tokens and defines all behavioral states, accessibility requirements, and acceptance criteria.
Handoff: Address Autocomplete Component
System Mapping
| Design Object | Code Component | Variant | Tokens | Owner |
|---|---|---|---|---|
| Input Field | TextInput | Default | form-field-border, text-primary | Checkout Team |
| Results List | Dropdown | Overlay | surface-elevated, shadow-md | Design System |
| Selection Item | ListEntry | Interactive | action-hover, text-secondary | Checkout Team |
Component Behavior
- Intent: Accelerate address entry while allowing manual override for unmapped locations.
- Trigger: Queries begin after 3 alphanumeric characters.
- Loading State: Show
Spinnerwithin the input suffix; retain user query during fetch. - Error Handling: On API failure, preserve current input and expose "Enter address manually" link.
- Invariants: Selecting a suggestion populates fields but never triggers form submission.
Accessibility (WCAG 2.2)
- Role:
comboboxwitharia-autocomplete="list". - Keyboard:
ArrowDownto navigate suggestions,Enterto select,Escto dismiss. - Live Region: Announce suggestion count via
aria-live="polite"when list updates.
Acceptance Criteria
- AC 1: Given a partial address, when 3 characters are entered, then the suggestion list must appear within 300ms.
- AC 2: Given an empty state, when the field is focused, then no dropdown should be visible.
- AC 3: Given a mobile viewport, when the keyboard is active, then the dropdown must remain visible above the fold.
Next steps
- Review the Open Decisions list regarding the timeout policy for the third-party API.
- Approve the Design QA Plan for cross-browser testing on Safari iOS.
- Point the engineering team to the
AddressAutocompleteimplementation contract in the shared wiki.
handoff-to-dev-design-skill.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
Bridge the gap between design and engineering with build-ready implementation contracts. This skill stops the "guesswork" phase of development by converting static UI mockups and prototypes into rigorous technical specifications. It moves beyond simple pixel-matching to define the deep logic of your application.
What it does
- Map system components by linking design objects to existing code components, variants, and semantic tokens.
- Define behavioral logic for components, covering intent, invariants, loading states, and error handling.
- Specify accessibility including ARIA roles, keyboard focus paths, and WCAG 2.2 criteria.
- Document state matrices across network, session, and data layers to ensure resilience.
- Generate acceptance criteria using Given/When/Then statements that are actually testable.
How it works
- Gather context by providing approved designs, platform constraints, and system links.
- Define the flow by mapping entry points, branches, recovery paths, and state retention.
- Draft the contracts for components, responsiveness, and telemetry.
- Finalize the package including a Design QA plan and a list of open decisions with owners.
Frameworks & tools
Works with any design system or frontend stack including React, Vue, Tailwind CSS, and Figma tokens. It follows WCAG 2.2 accessibility standards and Gherkin-style testing formats.
Why this beats prompting it yourself
Generic prompts often miss "consequential states" like network latency or expired sessions. This skill enforces a strict implementation contract that identifies hidden product decisions and technical gaps before a single line of code is written.
Use cases
- Design to code handoff for complex features requiring precise component mapping.
- Legacy system migration where new UI must map to existing backend data structures.
- Accessibility audits to ensure new features meet legal and usability standards.
Known limitations
Requires approved designs and defined system tokens to be effective. It will not invent backend API contracts or redesign a product model that is still in flux.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 2 days ago
- Passed all security checks, Safe to install
Needs access to
W3
Apple
Android
Js
Designtokens
Gov
Digital
Material