Skip to content
cccskills
FreePublished on GitHub

design-handoff

Design handoff: Figma design to tech spec + ClickUp/Jira ticket + component code stub. Full cross-tool handoff workflow.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3 stars(GitHub 3 + cccskills 0)
Works withJiraFigma

Run score Not tested

See how to install

Files included (1)

  • SKILL.md2.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Design Handoff Workflow

Figma → spec doc → ticket (ClickUp/Jira) → component code stub → links bidireccionales.

/design-handoff <figma_url> [--target clickup|jira] [--stack react|vue|flutter]

Paso a Paso

1. Inspeccionar Figma

Usar figma skill: GET node data → extraer dimensions, layout, states, interactions, tokens usados, assets a exportar.

2. Generar Spec

Documento estructurado con: purpose (1-2 oraciones), anatomy (pseudo-component tree), variants table (variant/description/props), states table (state/description/trigger — default/hover/active/loading/error/empty), design tokens (colors/typography/spacing/radius/shadow), measurements table (element/dimension), interactions (click/hover/keyboard), responsive breakpoints (desktop ≥1024, tablet 768-1023, mobile <768), accessibility (focus visible, ARIA, keyboard nav, contrast 4.5:1, text alternatives), assets to export (file + output dir).

3. Crear Ticket

ClickUp: createTask con list_id, name [Component] Implementar X, spec embebido en description, tags: frontend/component/design-ready.

Jira: POST issue con project key, summary, ADF description, Task type, labels.

4. Generar Code Stub

React+TS stub: component file (interface con props de variants/states, JSX con semantic HTML, CSS module imports) + CSS module file (tokens como CSS vars). Stub compilable — no pseudo-code.

Assets: export desde Figma al directorio del repo.

5. Linkear Todo

En ticket: link a spec doc + Figma + PR reference cuando exista.

Config

.claude/config/design-handoff.yml: default_target, default_list_id, stack, components_dir, assets_dir, designers mapping (figma_email → clickup_id/jira_email).

Reglas

  • Spec embebido en ticket — el dev no abre 3 tabs
  • Assets exportados al repo inmediatamente
  • Code stub compilable (npm run build funciona)
  • Link bidireccional: spec ↔ Figma ↔ ticket ↔ code

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Plan, design, and implement A/B tests and experiments with statistical rigor. Covers hypothesis frameworks, sample sizing, metrics, and result analysis.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

Web/mobile accessibility decision guide: WCAG 2.2 AA, ARIA, keyboard nav, focus management, contrast, testing. Use for: a11y, accessibility, wcag, aria, screen reader, keyboard, contrast.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

Generate, iterate, and scale ad creative for paid advertising across Google, Meta, LinkedIn, and X. Covers platform specs, creative frameworks, and quality validation.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

Musica interactiva para juegos: layering vertical, re-secuenciacion horizontal, stingers, reglas de transicion con sync points, y mapeo de estados de gameplay a musica. Usar para: musica adaptativa, sistema de musica dinamica, transiciones musicales, combat music.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

Design multi-agent systems, create agent architectures, define communication patterns, and build autonomous agent workflows with structured evaluation frameworks.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

Inter-agent communication protocol for C-suite agent teams. Defines invocation syntax, loop prevention, isolation rules, response formats, and quality loops.

The English summary is being prepared. Showing the original description.

SebastianLuser/claude-code-arcane3Updated Oct 27, 2026

See all skills by SebastianLuser

Report a problem with this skill