dx-figma-all

---
name: dx-figma-all-b4f9bdd0cb46
description: "Full Figma design-to-code flow in one command — extract, prototype, verify. Use when a story has a Figma URL: 'figma all', 'turn this figma into code'."
argument-hint: "[ADO Work Item ID] [Figma URL] — both optional, any order"
compatibility: "Requires Figma desktop app with Dev Mode MCP enabled (port 3845). Chrome for verification step."
metadata:
  version: 2.30.0
  mcp-server: figma
  category: design-to-code
allowed-tools: ["read", "edit", "search", "write", "agent", "figma/*", "playwright/*"]
---

You are a coordinator. You do NOT implement anything yourself. You delegate each workflow step via the Skill tool, then report progress.

## 0. Input Validation

1. **Figma URL required** — if no Figma URL is provided in the arguments or spec files, STOP immediately: "A Figma URL is required. Usage: `/dx-figma <figma-url> [component-name]`"
2. **Figma MCP health** — run `bash .ai/lib/mcp-health-check.sh figma`. If Figma Desktop is not responding on port 3845, STOP: "Figma Desktop not detected. Open Figma and enable Dev Mode MCP."
3. **AEM MCP health** — run `bash .ai/lib/mcp-health-check.sh aem`. If AEM is not responding, WARN: "AEM author not responding — verification step may be skipped."

## Argument

Parse `$ARGUMENTS` into two optional parts (any order):
- **Figma URL:** any token containing `figma.com/` — forward to extract step
- **ADO ID:** any purely numeric token — forward to extract step
- If neither provided, the extract skill uses the most recent story and its Figma URL

Build a combined argument string from whatever was provided (e.g., `2416553 https://figma.com/...`, or just `2416553`, or just the URL, or empty).

## Progress Tracking

Follow `.ai/rules/task-progress.md` (plugin default: `rules/task-progress.md`). The progress **file** is the source of truth — write it at every item transition:

```bash
DX_PROGRESS_FILE="figma-progress.md" DX_PROGRESS_TITLE="/dx-figma-all Progress" \
  bash "$CLAUDE_PLUGIN_ROOT/shared/update-progress.sh" "$SPEC_DIR" "<item>" "<status>"
```

Status values: `pending` · `in_progress` · `done` · `failed` · `skipped` · `blocked`. One row per item, updated in place.

If `TaskCreate` is in this session's tool list, also mirror the same items into tasks so the user gets a live checklist — `TaskList` first to cancel stale tasks from an interrupted run. If it is absent (the default on Opus 4.8 / Sonnet 5 / Fable 5 / Mythos 5 and newer), skip that silently and rely on the file. Never block an item transition on a task tool being present.

1. Extract design from Figma
2. Generate prototype
3. Verify against design

## Execution Order

```
Step 1: extract   → figma-extract.md + prototype/figma-reference.png
Step 2: prototype → figma-conventions.md + prototype/index.html + prototype/styles.css
Step 3: verify    → figma-gaps.md + prototype/prototype-screenshot.png
```

**Idempotent by default:** Each skill checks if its output file already exists and is still valid before regenerating. Steps report one of: **created**, **updated**, or **skipped**.

## Instructions

### 1. Dispatch steps 1–3 sequentially

For each step, use the Skill tool to invoke the skill. Wait for each to return before starting the next.

**Step 1 — Extract:**
```
Invoke /dx-figma-extract <combined-arguments>
```
Print: `Step 1/3 done —` followed by the summary.

**Step 2 — Prototype:**
```
Invoke /dx-figma-prototype <ADO ID if provided>
```
Print: `Step 2/3 done —` followed by the summary.

**Step 3 — Verify:**
```
Invoke /dx-figma-verify <ADO ID if provided>
```
Print: `Step 3/3 done —` followed by the summary.

### 2. Final summary

After all steps complete, find the spec directory and present:

```markdown
## Figma Design-to-Code Complete

**Component:** <name from figma-extract.md>
**Directory:** `.ai/specs/<id>-<slug>/prototype/`

| Step | Status | Output |
|------|--------|--------|
| Extract | <created/updated/skipped> | figma-extract.md |
| Prototype | <created/updated/skipped> | prototype/index.html + styles.css |
| Verify | <PASS/PASS WITH MINOR GAPS/NEEDS ATTENTION> | figma-gaps.md |

### To preview: open `prototype/index.html` in a browser

### Next Steps
1. Review the prototype visually
2. `/dx-plan` — generate implementation plan using the prototype as reference
3. `/dx-step-all` — execute the plan
```

## Error Handling

- **Step 1 (extract) fails:** STOP. Cannot proceed without design data. Print error and suggest: `Run /dx-figma-extract manually to debug.`
- **Step 2 (prototype) fails:** STOP. Cannot verify without a prototype. Print error and suggest: `Run /dx-figma-prototype manually to debug.`
- **Step 3 (verify) fails:** Report gaps but do NOT block — the prototype is still usable. Print warning: `Verification had issues — review figma-gaps.md. The prototype is still usable for planning.`

For any failure, retry the failed step **once** before stopping.

## Validation Gates

| After Step | Gate | Fail Action |
|-----------|------|-------------|
| 1 (extract) | `figma-extract.md` exists in spec directory | STOP — "Extract failed. Check Figma MCP connection." |
| 2 (prototype) | `prototype/index.html` exists | STOP — "Prototype generation failed." |
| 3 (verify) | `figma-gaps.md` exists | WARN — continue, report that verification didn't complete |

## Rules

- **You are coordinator only** — all implementation happens inside the agent's isolated context
- **Never implement steps yourself** — always delegate via Agent tool
- **Sequential dependencies are strict** — never dispatch step N+1 until step N returns OK
- **Keep main context lean** — you only see compact summaries, not file contents
- **Progress reporting** — print status after each step so the user can see progress
- **Same quality as individual skills** — running `/dx-figma-all` produces identical output to running each skill separately

## Platform Compatibility

This skill uses subagent orchestration (Agent tool dispatch) which is available in **Claude Code only**.

**Copilot CLI / VS Code Chat:** Run the individual skills manually in sequence:
1. `/dx-figma-extract <figma-url> [component-name]` — extract design from Figma
2. `/dx-figma-prototype [id]` — generate HTML/CSS prototype
3. `/dx-figma-verify [id]` — verify prototype against design