036bc6a52e
Group G — markdown tech-debt cleanup (post-audit 2026-05-02).
- 36 SKILL.md files: added "## When to use" section. Was missing across the
catalog; orchestrator routing by keyword could not auto-dispatch.
- 20 code-implementer agent .md files: added Output Footer block prescribing
RULE 0.16 STATUS-TRUTH MARKER schema in agent's final report. Previously only
code-implementer-rust.md had it; other 27 language/role variants were silent
about the marker, breaking RULE 0.16 §3 status-truth aggregation for non-Rust
batches.
- skills/site-create/: added phase-5-preview.md and phase-6-deploy.md skeleton
files. SKILL.md table-of-contents referenced 7 phases; only 5 existed on disk.
- skills/{ai-animation,rag-pipeline}/skill.md: added migration banner comment
noting they should be SKILL.md (canonical filename). Case-rename via git is a
separate orchestrator task (macOS APFS is case-insensitive; Linux deploy needs
explicit rename).
- 3 deprecated skills (site-builder, competitor-analysis, design-inspiration):
added concrete removed-after dates (was vague "before v2").
- docs/CONVERGENCE-PLAN.md:129: TBD on _blocks/evidence-grading.md duplicate
resolved (file exists, not duplicated).
- docs/DNA-INDEX.md: count edits made then overwritten by auto-encyclopedia-refresh
hook during agent run. The .kei-registry-ignore files in test fixtures (Group F)
are the structural fix; kei-registry walker implementation is the follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
61 lines
2.2 KiB
Markdown
61 lines
2.2 KiB
Markdown
---
|
|
name: figma-to-code
|
|
description: Use when converting Figma designs to code — screenshot, context, tokens, responsive implementation
|
|
arguments:
|
|
- name: url
|
|
description: Figma URL (figma.com/design/... or figma.com/make/...)
|
|
required: true
|
|
---
|
|
|
|
# Figma to Code Workflow
|
|
|
|
## When to use
|
|
|
|
- Converting a Figma design to code: extract design context → analyse layout/typography/tokens → implement responsive component.
|
|
- Translating a specific Figma frame or node into a project's existing component library and design token system.
|
|
- Any task starting with a Figma URL that needs accurate pixel-level implementation.
|
|
|
|
## Step 1: Extract from Figma
|
|
- Parse URL to get fileKey and nodeId
|
|
- Call `get_design_context` with fileKey and nodeId (Figma MCP / REST)
|
|
- Call `get_screenshot` for visual reference
|
|
- Review returned code, tokens, and component mappings
|
|
|
|
## Step 2: Analyze Design
|
|
From the Figma output, identify:
|
|
- **Layout:** flex/grid structure, spacing, alignment
|
|
- **Typography:** font family, size, weight, line-height, color
|
|
- **Colors:** map to project's design tokens or CSS variables
|
|
- **Components:** map to existing project components
|
|
- **Responsive hints:** auto-layout direction, min/max widths
|
|
- **Interactions:** hover states, transitions, animations
|
|
|
|
## Step 3: Map to Project
|
|
- Match Figma colors → project design tokens
|
|
- Match Figma fonts → project typography scale
|
|
- Match Figma components → existing project components
|
|
- Identify gaps: new components or tokens needed
|
|
- If Code Connect mappings exist, use them directly
|
|
|
|
## Step 4: Implement
|
|
- Use project's stack (React, Next.js, Astro, SvelteKit, etc.)
|
|
- Mobile-first responsive implementation
|
|
- Match pixel-perfect on design breakpoint
|
|
- Adapt gracefully to other breakpoints
|
|
- Use design system components where they match
|
|
|
|
### Responsive Breakpoints
|
|
- Mobile: 375px (default)
|
|
- Tablet: 768px
|
|
- Desktop: 1024px
|
|
- Wide: 1280px
|
|
|
|
## Step 5: Verify
|
|
- Compare screenshot with implementation side-by-side
|
|
- Check all breakpoints
|
|
- Verify interactive states (hover, focus, active)
|
|
- Accessibility check (contrast, keyboard nav, ARIA)
|
|
- Cross-browser check (Chrome, Safari, Firefox)
|
|
|
|
## Step 6: Commit
|
|
- `feat: implement <component/page> from Figma design`
|