メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/stellar/laboratory --skill figma-to-codeコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
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.
SOC 職業分類に基づく
SKILL.md を表示中
| 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.