figma-console-mcp-skills

In the author's own words, from each skill's SKILL.md.

• figjam-create-content

  Author FigJam boards with granular control — sticky notes (single + batch), connectors between nodes, shapes-with-text, sections, tables, code blocks, and auto-arrange — plus read back board contents and the connection graph. Use when the user wants to build or edit a FigJam board element-by-element. Triggers: 'add stickies to FigJam', 'create a flowchart/diagram in FigJam', 'connect these nodes'…

  skills/figjam-create-content/SKILL.md on GitHub (opens in a new tab)

• figma-analyze-component-set

  Analyze a Figma COMPONENT_SET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating an interactive component from a Figma variant set — triggers: 'analyze this com…

  skills/figma-analyze-component-set/SKILL.md on GitHub (opens in a new tab)

• figma-annotations

  Read and write designer annotations on Figma nodes — node-level design specs that pin properties (fills, width, fontSize, etc.) and carry plain or markdown notes. Use when the user wants to document or inspect interaction specs, animation timings, easing, accessibility requirements, or implementation notes attached directly to a node. Triggers: 'add an annotation', 'annotate this node/component',…

  skills/figma-annotations/SKILL.md on GitHub (opens in a new tab)

• figma-arrange-component-set

  Organize a Figma COMPONENT_SET's variants into a clean, labeled grid — rows and columns derived from the variant properties, with row labels on the left, column headers on top, and a titled white container. Use when a variant set is a messy pile and you want a presentable, documentation-ready layout — triggers: 'arrange my variants in a grid', 'organize this component set', 'lay out the variants…

  skills/figma-arrange-component-set/SKILL.md on GitHub (opens in a new tab)

• figma-audit-accessibility

  Deep accessibility scorecard for a single Figma component or component set — state coverage (default/hover/focus/disabled/error/active/loading), focus-indicator quality and contrast, non-color state differentiation, target size, annotation completeness, and color-blind simulation (protanopia/deuteranopia/tritanopia), all rolled into per-category 0–100 scores and prioritized recommendations. Use w…

  skills/figma-audit-accessibility/SKILL.md on GitHub (opens in a new tab)

• figma-blame-node

  Find which Figma version introduced a specific change — a component property or a child node — via a binary search over version history (~log2(N) API calls instead of N). Answers 'who added this and when'. Use when the user wants git-blame-style attribution for a Figma design — triggers: 'when was this component property added', 'which version introduced this variant', 'who added this node', 'bla…

  skills/figma-blame-node/SKILL.md on GitHub (opens in a new tab)

• figma-check-design-parity

  Compare a Figma node's actual specs against a code spec (the values your component renders) and get a 0–100 parity score, a list of discrepancies, and fix suggestions. Use to detect design-to-code DRIFT: triggers 'check design parity', 'does my code match the Figma', 'compare this component to the design', 'is my implementation faithful', 'find differences between design and code', 'verify the bu…

  skills/figma-check-design-parity/SKILL.md on GitHub (opens in a new tab)

• figma-comments

  Read, post, reply to, and delete comments on a Figma file via the REST API — including pinning a comment to a specific node and threading replies. Use when the user wants to work with Figma comments programmatically — triggers: 'get Figma comments', 'read comments on this file', 'post a comment in Figma', 'leave a comment on this node', 'reply to a Figma comment', 'pin a comment to this element',…

  skills/figma-comments/SKILL.md on GitHub (opens in a new tab)

• figma-component-properties

  Add, edit, and delete Figma component properties (TEXT, BOOLEAN, INSTANCE_SWAP, VARIANT) on a COMPONENT or COMPONENT_SET, and instantiate a component then set its instance properties. Use when authoring or wiring up a component's API in Figma — triggers: 'add a component property', 'add a boolean prop to this component', 'make this text a component property', 'add an instance-swap slot', 'create…

  skills/figma-component-properties/SKILL.md on GitHub (opens in a new tab)

• figma-deep-component

  Extract a single Figma component (or any node) as a full recursive tree to N levels deep — every child's layout, fills/strokes/effects, typography, resolved bound variables (token names + code syntax), INSTANCE mainComponent references, prototype reactions, and annotations. Use when you need maximum-fidelity data to generate production code for ONE component — triggers: 'get the full component tr…

  skills/figma-deep-component/SKILL.md on GitHub (opens in a new tab)

• figma-design-system-inventory

  One call to inventory an entire Figma design system — variables/tokens (grouped by collection + mode), components and component sets (with property definitions and per-variant visual specs), and styles (color/text/effect with resolved values). Use when you need the whole design-system picture before generating code or auditing coverage — triggers: 'inventory my design system', 'extract all tokens…

  skills/figma-design-system-inventory/SKILL.md on GitHub (opens in a new tab)

• figma-export-tokens

  Export Figma variables to design token files in DTCG, CSS custom properties, Tailwind v4/v3, SCSS, TypeScript, JSON, Style Dictionary, or Tokens Studio. Use when the user wants to pull design tokens OUT of Figma into code — triggers: 'export tokens', 'export Figma variables', 'generate CSS variables from Figma', 'turn my Figma variables into a tokens.json / Tailwind config / SCSS', 'sync design t…

  skills/figma-export-tokens/SKILL.md on GitHub (opens in a new tab)

• figma-extract-design-system

  Extract a design system from vibe-coded production apps that never had one: inventory components, mine de-facto styling into DTCG tokens, scaffold a Storybook package, port components, and optionally round-trip tokens/components into Figma. Use when the user wants to 'extract a design system', 'create a design system from this app/codebase', 'reverse-engineer our components into Storybook', 'turn…

  skills/figma-extract-design-system/SKILL.md on GitHub (opens in a new tab)

• figma-generate-changelog

  Generate a human-readable markdown changelog between two Figma file versions — pages added/removed/renamed plus per-component changes, enriched with author handles and timestamps, ready to paste into release notes, PRs, or Storybook MDX. Use when the user wants prose history — triggers: 'generate a Figma changelog', 'write release notes from Figma', 'what changed between these versions in markdow…

  skills/figma-generate-changelog/SKILL.md on GitHub (opens in a new tab)

• figma-generate-component-doc

  Generate complete Markdown documentation for a Figma component — anatomy/layer tree, design tokens (colors, spacing, typography), states/variants matrix, accessibility notes, content guidelines, and optional code-parity + YAML frontmatter. Use when the user wants a docs page or handoff spec for a component or component set. Triggers: 'document this component', 'generate component docs/spec', 'cre…

  skills/figma-generate-component-doc/SKILL.md on GitHub (opens in a new tab)

• figma-import-tokens

  Push design tokens from code INTO Figma as variables — DTCG / tokens.json / a token object → Figma variable collections, modes, and values. Use when the user wants to sync tokens code→Figma: triggers 'import tokens into Figma', 'create Figma variables from my tokens.json / DTCG / Tailwind config', 'sync design tokens to Figma', 'push tokens to Figma'. Non-destructively matches existing variables…

  skills/figma-import-tokens/SKILL.md on GitHub (opens in a new tab)

• figma-library-variables

  Discover and import design tokens from SUBSCRIBED Figma team libraries into the current file. Use when the user wants to reuse tokens that live in a shared library: triggers 'list library variables', 'what tokens are in our shared library', 'import a variable from our design system library', 'pull in the brand color token from the library'. Works on ANY plan via the Plugin API teamLibrary methods…

  skills/figma-library-variables/SKILL.md on GitHub (opens in a new tab)

• figma-lint-design

  Lint a Figma node tree for WCAG 2.2 accessibility AND design-system quality — contrast, target size, focus indicators, color-only signaling, hardcoded colors, missing text styles, detached components, and more. Use when the user wants a design-side audit BEFORE handoff: triggers 'lint this frame', 'check accessibility', 'WCAG audit', 'is my design accessible', 'find contrast issues', 'check color…

  skills/figma-lint-design/SKILL.md on GitHub (opens in a new tab)

• figma-manage-variables

  Create, update, rename, delete, and organize Figma variables, collections, and modes — including fast batch create/update, setting scopes, code syntax, and adding theme modes. Use for incremental variable work: triggers 'create a variable', 'batch update variables', 'add a dark mode to my collection', 'rename this variable', 'set variable scopes', 'delete a variable/collection', 'add a mode'. Wor…

  skills/figma-manage-variables/SKILL.md on GitHub (opens in a new tab)

• figma-scan-code-accessibility

  Scan generated/authored HTML for accessibility violations with axe-core (Deque) running over JSDOM — structural and semantic rules: ARIA attributes and roles, accessible names, alt text, form labels, heading order, landmarks, semantic HTML, tabindex, duplicate IDs, lang attribute, and ~50 more. Use on the CODE side of a Figma-to-code workflow: triggers 'scan this HTML for accessibility', 'run axe…

  skills/figma-scan-code-accessibility/SKILL.md on GitHub (opens in a new tab)

• figma-setup-design-tokens

  Bootstrap a complete design-token system in Figma in one atomic step — create a variable collection, its modes (e.g. Light/Dark), and every variable with per-mode values together. Use when starting a token system from scratch: triggers 'set up design tokens in Figma', 'create a token collection with light and dark modes', 'scaffold variables', 'bootstrap a Figma theme'. Works on ANY Figma plan. F…

  skills/figma-setup-design-tokens/SKILL.md on GitHub (opens in a new tab)

• figma-slides

  Author Figma Slides presentations — list/create/duplicate/reorder/delete slides, read the slide grid, add text and shapes to a slide, set slide background color, set or read slide transitions (dissolve, slide-from, push-from, smart-animate), focus a slide, and toggle skip. Use when the user wants to build or edit a Figma Slides deck. Triggers: 'create a slide', 'add a slide to the deck', 'reorder…

  skills/figma-slides/SKILL.md on GitHub (opens in a new tab)

• figma-version-history

  List a Figma file's version history, snapshot the file at any past version, and diff two versions (added/removed/renamed pages plus deep per-component changes). Use when the user wants to inspect Figma history — triggers: 'list Figma versions', 'what versions does this file have', 'show version history', 'snapshot this file at version X', 'get the file as it was last week', 'diff two Figma versio…

  skills/figma-version-history/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• Auto-claude-code-research-in-sleepby wanshuiyin ARIS ⚔️ (Auto-Research-In-Sleep) — Lightweight Markdown-only skills for autonomous ML research: cross-model review loops, idea discovery, a… 17.5k stars · 30 skills
• ECCby affaan-m The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Cod… 280k stars · 30 skills
• ponytailby DietrichGebert Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote. 164k stars · 6 skills
• ui-ux-pro-max-skillby nextlevelbuilder An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. 136k stars · 7 skills
• cavemanby JuliusBrussee 🪨 why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman. 113k stars · 20 skills
• awesome-claude-skillsby ComposioHQ A curated list of awesome Claude Skills, resources, and tools for customizing Claude AI workflows 77.2k stars