Loading...
Loading...
Found 150 Skills
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.
Figma's UI design system. Use when building interfaces inspired by Figma's aesthetic - light mode, Inter font, 4px grid.
CLI for downloading complete Figma design context and metadata to local files. Always use this CLI instead of calling Figma MCP tools (`get_design_context`, `get_metadata`) directly. Direct MCP tool calls risk incomplete data due to context limits. This CLI guarantees 100% complete output.
Convert Figma designs to React code using Spirit Web components. Use when working with Figma designs, implementing UI from Figma files, converting Figma autolayouts to code, or when the user mentions Figma, Spirit components, or design-to-code conversion.
Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.
Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.
Access Figma designs, extract design systems, and retrieve component specifications. Use when implementing UI from Figma mockups, extracting design tokens, or analyzing design files.
Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.
Provides comprehensive guidance for Figma design tool including design creation, components, prototyping, collaboration, and design systems. Use when the user asks about Figma, needs to create designs, work with Figma components, or collaborate on design projects.
Figma 디자인을 고성능 Next.js와 Tailwind CSS 코드로 변환하는 스킬. 픽셀 퍼펙트한 반응형 컴포넌트 구현을 지원합니다.
Orchestrates Jira ticket creation from Figma designs using Atomic Design principles. Use this when initializing a project or syncing design specs to Jira for development.
Initialize the design-to-code workflow. Scans your codebase for styling patterns, extracts design tokens, discovers reusable components, and generates a design-tokens.json file. Run this once per project before using /figma-to-design-build.