Your agent can do more. Find the skill that makes it happen.
Find your next superpower If you are an agent, refer to our llms.txt for full access.Creates or updates screens in Figma from code or a description. Uses design-system components and design tokens to translate application pages into Figma.
Translates complete pages, views, and multi-section layouts into Figma alongside figma-use. Discovers and imports design system components, variables, and styles, then assembles screens incrementally using design tokens.
Covers flowcharts, architecture, sequence and entity-relationship diagrams, state machines, Gantt charts, and timelines. Supplies type-specific guidance and Mermaid constraints for visualizing systems, dependencies, schemas, and processes.
Creates tokens, variables, components, variant states, variable bindings, and light or dark themes. Guides the build order, documents foundations, and reconciles gaps between code and Figma.
Creates or updates a design-system library in Figma using a codebase. Helps keep Figma components aligned with shipped components.
Guides creation of design tokens, variables, component libraries, themes, and foundation documentation. Helps reconcile differences between code and Figma and defines the build sequence, complementing figma-use for Plugin API operations.
Translates Figma designs into production-ready code with the goal of matching their visual appearance exactly. Supports handing Figma frames to a frontend agent for implementation.
Implements production-ready interfaces and components from Figma files, URLs, and specifications. Focuses on matching the source design with 1:1 visual fidelity; canvas writes use a separate skill.
Use when implementing or updating a component from a Figma link — how to turn the Figma design variables into code tokens, on both platforms: Tailwind classnames for libs/ui-react and themeJS (t.) paths for libs/ui-rnative. For the full token catalogues and styling mechanics, see component-styling.
Sync processed CSS design tokens with JavaScript theme objects for React Native. Use when aligning tokens after Figma sync, checking token consistency, or updating JS theme files manually.
Guides creating, editing, and deleting nodes, configuring tokens and variables, and building components and variants. Covers auto-layout, fills, property bindings, and programmatic file inspection.
Executes Figma Plugin API scripts for canvas modifications, inspections, variable management, and design-system work. Provides a prerequisite for the other Figma skills in its catalogue.
Skills give your agent reusable instructions for a specific job. Pick one, read what it does, and bring it into your workflow.
A name only tells half the story. Search the full description and instructions to find the right fit.
Read the skill, visit its source, and see exactly what you’re adding to your agent.
Copy the install command from a skill page and run it in your project.
npx skillycli add owner/repo --skill name