Design system handoff

Skill jukrap/ai-agent-playbook/skills/frontend/design-system-handoff

Reusable AI agent skills, project templates, and guardrails for safer software maintenance and delivery.

Install

npx -y skills add jukrap/ai-agent-playbook --skill design-system-handoff

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when turning Figma, brand, design-token, component-library, theme, variant, or visual-spec guidance into maintainable frontend implementation.

SKILL.md

1.2 KB, as published. Nobody here has run it

Design System Handoff

Use this as the primary frontend skill for converting design guidance into repository-native UI primitives, tokens, variants, and verification evidence.

Workflow

Identify the source design artifact, existing component system, token model, theme boundary, accessibility requirements, and screens/states to implement.
Map design intent to existing primitives, variants, slots, tokens, and CSS conventions before adding one-off styling.
Separate durable design-system changes from screen-local composition, experiment-only styling, and copied reference visuals.
Verify rendered states across supported themes, breakpoints, density/content variation, interaction states, and accessibility constraints.

Reference

Read references/design-token-handoff.md for token, theme, naming, ownership, and fallback rules.