← ClaudeAtlas

figma-to-uilisted

Implement an exact Figma frame, screen, or component in an existing frontend repository and refine it through browser comparison. Use when user provides a Figma selection link, says "turn this Figma into code", "implement this Figma design", "match this Figma frame", or asks to reproduce Figma UI in React, Next.js, Vue, Svelte, or HTML/CSS.
ek0212/agent-ready-repo-kit · ★ 0 · Web & Frontend · score 71
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