227 tagged figma, measured the same way as everything else here.
Browse within: design-systems 158ai-coding 118design-engineering 109design-system 102design-tokens 99product-design 97claude-code-plugin 42design-to-code 41cursor 35figma-mcp 28figma-plugin 26apple 22ios-development 22design-tools 17
Skill Claude CodeCodex
Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a…
Skill Claude CodeCodex
Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMATOKEN env var, or .env file).
Skill Claude CodeCodex
Control Figma via CLI — create shapes, frames, text, components, set styles, layout, variables, export images. Use when asked to create/modify Figma designs or automate design tasks.
Skill Claude CodeCodex
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
Skill Claude CodeCodex
Generate a visual anatomy annotation in Figma showing numbered markers on a component instance with an attribute table. Use when the user mentions "anatomy", "anatomy annotation", "component anatomy", "create anatomy", or wants to annotate a component's structural elements.
Skill Claude CodeCodex
REQUIRED reading before using figmaexecute. Contains API syntax, parameter formats, and examples. READ rules/.md files for correct usage.
natdexterra/work-with-design-systems
Skill Claude CodeCodex
Inspect, build, or extend Figma design systems — and optionally sync them to code. Two modes in one skill: inspect mode (read-only audits with WCAG checks, component scoring, detached instance detection, handoff docs) and build mode (creating components with variable bindings, slot-based composition, structured…
Skill Claude CodeCodex
Use when a task spans interface understanding, design-system memory, UI audits, design CI, Figma, shadcn or Tailwind code generation, research, or agent design workflows and needs the correct Memi capability selected.
Skill Claude CodeCodex
Prepare and export favicon assets from Figma in common web sizes and formats.
scoobynko/claude-code-design-skills
Skill Claude CodeCodex
Generate production-ready React/Next.js code from Figma designs. Instructs proper Figma MCP tool usage, component reuse strategies, and variant mapping. CRITICAL: ALWAYS use this skill when user provides a Figma link or mentions implementing/redesigning from Figma design. Never attempt manual implementation without…
Skill Claude CodeCodex
Generate production-quality SVG character animations — state machines that morph between N SVG states (2–10) with per-state idle motion (breathing, blinking, swaying). Use whenever the user wants to animate a character or mascot between poses/emotions, morph icons/illustrations between forms, build interactive SVG…
Skill Claude CodeCodex
Use when building, editing, or iterating on a Figma design via the Mimic AI MCP server (mimicstatus, mimicdiscoverds, figmacreateframe, figmainsertcomponent, mimicbuildtable, mimicbuildchart, etc. are available), or when the user asks to turn HTML, a prompt, or a Claude Design/Figma Make prototype into real Figma…
Skill Claude CodeCodex
Analyze a poster or layout design image to detect its underlying grid system and export grid guide overlays. Use when the user wants to (1) identify the layout grid of a poster/design image (Swiss modular, N-column, asymmetric, baseline, golden ratio, rule of thirds, diagonal, radial, freeform, etc.), (2) get detected…
Skill Claude CodeCodex
Parse Figma design prompt, enrich via MCP, explore codebase, generate design spec, and invoke brainstorming.
Skill Claude CodeCodex
Build or modify FigJam boards via the Figma Plugin API. Use for creating, editing, extending, restructuring, or fixing the layout of a FigJam board. Triggers on "make a FigJam", "build a board", "update this FigJam", "fix the layout", "/figjam-builder", or a FigJam URL paired with a visual or content change.
Skill Claude Code needs its repo
Orchestrates end-to-end Figma-to-React conversion pipeline with enforced TDD, automated pixel-diff visual QA, E2E testing, and app-type awareness (web apps, Chrome extensions, PWAs). Keywords: Figma to React, design tokens, autonomous component generation, Figma conversion, Tailwind config, component library, TDD…
Skill Claude CodeCodex
Run this BEFORE every git push or opening a PR — whenever the user says "push this", "open a PR", "ready to ship", "let's get this reviewed", or you are about to push a branch. It self-reviews the diff against docs/standards/STANDARDS.md, runs the local gates including unit and integration tests, and makes the PR body…
Skill Claude CodeCodex
Product animation, UI motion, portfolio videos — Apple-grade reveals, motion tokens, full production pipelines.
yushiran/Academic-Figure-Figma-CC-Skills
Skill Claude CodeCodex
Use when the user wants a paper figure (framework, pipeline, architecture, method overview) drawn, rebuilt, or refined as an editable vector in Figma via Claude Code — including reproducing a candidate/reference image (e.g. studio-pro C01-C04) at exact print size. Also use when the user needs to set up or fix the…
Skill Codex needs its repo
Cook raw brandbooks into agent-ready skills. Use when a user wants to convert brand guidelines, a Figma library, PDF, presentation, website, asset archive, interview, or loose identity system into a reusable brand-specific Agent Skill, update or audit one, or prepare a brand skill for presentations, documents…
Skill Cursor
A design skill for planning how websites, dashboards, mobile screens, and agent interfaces look and move, including cinematic pages with layered motion.
alexconner-79/high-plains-drifter
Skill Claude CodeCodex
Align a design to your real Storybook components instead of reconstructing it. Use when turning a Figma frame into React built from an existing component library (Build mode), or when pulling scrappy exploratory code into line with the library once a direction feels right (Align mode). Triggers include "build this…
Skill Claude CodeCodex
Git conventions for parallel Claude Code workstreams in Conductor. Covers branching strategy, merge order, conflict prevention, shared file protection, and the checkpoint pattern. Use this skill throughout the build phase, especially when running multiple Conductor workspaces. Prevents the merge conflicts and…
Skill Claude CodeCodex
Local Codex-to-Figma workflow for inspecting, planning, creating, and refining the currently open Figma file. Use for natural-language requests about the current Figma canvas or when the user explicitly invokes $layntra.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: