figma-to-uilisted
Install: claude install-skill ek0212/agent-ready-repo-kit
Turn one exact Figma selection into repository-native responsive UI. Figma evidence and running page define acceptance.
## Scope
Use for fidelity implementation from exact Figma node. Use `frontend-design` for open-ended visual direction without Figma source.
Requires authenticated Figma access, target repository, and browser or screenshot tool. User owns product behavior and design intent. Do not infer hidden nodes, assets, or interactions as facts.
## Inputs
- Exact Figma selection URL.
- Target route, page, or component when known.
- Required states and interactions.
- Existing repository and run command.
Infer route, breakpoints, and component reuse only from repository and Figma evidence. State inference.
## Workflow
### Step 1: Pin Selection
Confirm URL resolves to intended node, not file root. Record node name, type, reference dimensions, variants, target entry point, and required states.
### Step 2: Pull Evidence
Use authenticated Figma connector. Retrieve exact-node:
- Screenshot and child hierarchy.
- Auto-layout, constraints, grid, and dimensions.
- Components, variants, variables, styles, type, spacing, radius, shadows, and effects.
- Exportable images, SVGs, icons, and prototype links.
Screenshot is visual source. Structured values guide code. Inspect child nodes when parent omits required detail.
### Step 3: Inspect Repository
Identify framework, package manager, routing, run/test commands, components, tokens, type, spacing, breakpoints, icon syst