// Bridge Figma MCP output to Stellar Lab code conventions. Invoke after calling get_design_context to translate Figma's reference code into project-appropriate components, classes, and patterns.
| name | figma-to-code |
| description | Bridge Figma MCP output to Stellar Lab code conventions. Invoke after calling get_design_context to translate Figma's reference code into project-appropriate components, classes, and patterns. |
| read_files | [".claude/skills/figma-to-code/reference/*.md"] |
The Figma MCP's get_design_context returns generic reference code (often plain
HTML/CSS). This skill bridges the gap between that output and the project's
actual conventions: @stellar/design-system components, SCSS with BEM-ish
naming, and specific layout patterns.
For the full SDS component catalog, props, SCSS conventions, and usage examples, invoke
/component-guide.
For element mapping tables, spacing/layout patterns, and Figma variable mappings, see
reference/figma-mapping.md(loaded automatically).
mcp__figma-desktop__get_design_context({
nodeId: "1234:5678",
artifactType: "COMPONENT_WITHIN_A_WEB_PAGE_OR_APP_SCREEN",
clientFrameworks: "react",
clientLanguages: "typescript,scss"
})
Also get a screenshot for visual reference:
mcp__figma-desktop__get_screenshot({ nodeId: "1234:5678" })
Do NOT copy the Figma reference code directly. Instead, map each element to the
project's conventions using the mapping rules in reference/figma-mapping.md.
After implementing, visually compare the rendered component against the Figma screenshot. Focus on: layout, spacing, typography hierarchy, and interactive states.
Don't copy Figma's HTML structure literally — Figma groups elements for design purposes, not component architecture. Think about what makes sense as React components.
Don't use arbitrary colors — Figma may show raw hex values. Map them to
SDS color tokens (--sds-clr-*).
Don't ignore interactive states — Figma may show one state. Consider hover, focus, disabled, loading, and error states using design system props.
Commit a logical unit of work with a descriptive message. Invoke after completing a meaningful chunk (component created, store wired, tests passing) to maintain small, reviewable commits.
Guide for building React components using @stellar/design-system and project SCSS conventions. Invoke when creating new components or reviewing component code.
Correct mental models for React re-renders and memoization. Use this skill when writing, reviewing, or optimizing React components to avoid common misconceptions about performance. Debunks the myth that "props cause re-renders" and teaches when memoization actually helps.
Reference for the two Zustand store patterns in Stellar Lab — main store (querystring) and transaction flow store (sessionStorage). Invoke when creating store slices, debugging hydration, or deciding where state belongs.
Run e2e and unit tests related to files changed on the current branch. Use after making code changes to verify nothing is broken.