agentsclimarketplace
Sign in

From figma

Skill TarasTsavolyk/claude-code-frontend/.claude/skills/from-figma

Turn a Figma design into project components — pull the design via the Figma MCP, map it onto design tokens and shared/ primitives, build per scaffold conventions, then verify against the design. Use when implementing a screen or component from a Figma link.From its SKILL.md

Install
npx -y skills add TarasTsavolyk/claude-code-frontend --skill from-figma

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.7 KB, as published. Nobody here has run it

From Figma to component

Requires the Figma MCP server (connect via /mcp). Without it, ask for exported specs/screenshots and continue from step 2.

  1. Pull the design. Fetch the linked node — design context plus a screenshot. Read layout, spacing, type, color variables, variants, and any interaction notes; don't eyeball a thumbnail.
  2. Map, don't transplant. Translate raw values onto the project's design tokens (styling.md): nearest token wins; a Figma hex that matches no token is a finding to raise, not a value to hardcode. Match design components against shared/ and the UI kit before building anything new — reuse beats rebuild (architecture.md).
  3. Plan the split from the design's structure. Repeated regions → leaf components; overlays compose the shared overlay primitive; Figma variants → a variant/mode prop or separate components per the Component API rules (architecture.md).
  4. Build per /scaffold-component. The mock shows the happy path — implement loading/error/empty too (data-fetching.md), and the a11y baseline a mock can't show (accessibility.md).
  5. Verify against the design. Render the result (dev server / browser tooling) side by side with the Figma screenshot: spacing rhythm, type scale, states, responsive behavior at the design's breakpoints. Report deliberate deviations (token rounding, added states) explicitly.

Keep looking

Skills are one crate of 627,801. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.