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.Uses the Figma MCP server to fetch screenshots, variables, assets, and design context. Supports implementation from Figma URLs or node IDs, along with MCP setup and troubleshooting.
Uses Rube MCP from Composio to automate Figma operations involving files, components, design tokens, comments, and exports. Includes tool discovery to obtain current schemas.
Builds and updates Code Connect template files that map Figma components to implementation snippets. Covers design-to-code translation through .figma.ts and .figma.js files.
Connects Figma design components to their code counterparts using Code Connect. Supports automatically carrying design-system updates into the codebase.
Establishes links between Figma components and corresponding code components with Code Connect mapping tools. Canvas editing is handled through a separate skill.
Creates project-specific rules for Figma-to-code workflows. Consolidates design tokens, naming conventions, and lint rules into one source.
Creates custom design guidelines and conventions tailored to a codebase. Supports standardizing Figma-to-code workflows and requires a Figma MCP server connection.
Provides the workflow for creating new Figma Design, FigJam, or Slides files through the create_new_file tool.
Creates a new blank Figma Design or FigJam file. Serves as an initial step in scripted design-system or workshop workflows.
Creates a new Figma or FigJam file with a specified editor type and name. Resolves the account plan when needed and can prepare a file for subsequent Figma operations.
Guides converting Figma screens and designs into code. Provides implementation steps and instructions for obtaining design context through the get_design_context MCP tool.
Discovers design-system components, variables, and styles from Code Connect, existing screens, and libraries. Assembles pages, modals, drawers, and other composed views incrementally using design tokens.
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