skills/figma-agent/. Each skill is a single SKILL.md with a clear trigger description and an evidence-backed workflow.
Every skill is selection-first: it starts from the current Figma selection unless the user names a different scope.
Accessibility and usability
| Skill | Use when |
|---|---|
accessibility-audit | Checking WCAG-oriented issues visible in Figma before handoff. |
heuristic-evaluation | Running a Nielsen-heuristics usability pass on a flow. |
improve-ui | Getting up to three evidence-backed improvements for one surface. |
localization-readiness | Catching clipping, RTL, and translation risks before localization. |
states-completeness-check | Verifying empty, loading, error, and interaction states exist. |
visual-consistency-check | Unifying spacing, alignment, and style across a multi-screen flow. |
Design system and tokens
| Skill | Use when |
|---|---|
apply-color-variables | Binding hard-coded colors to existing Color variables. |
component-audit | Health-checking a component set before publish. |
design-tokens-sync | Reconciling Figma variables with code tokens. |
follow-ds-guidelines | Auditing a frame against the published design system. |
legacy-styles-to-variables | Migrating hard-coded styles onto shared variables. |
library-health-report | Cleaning unused, duplicate, or undocumented library assets. |
naming-convention-enforcer | Renaming layers and components to a stated convention. |
rename-layers-batch | Bulk renaming with a simple rule or find and replace. |
semantic-color-audit | Catching raw palette usage where semantic tokens belong. |
shadcn-theme-variables | Creating or repairing semantic shadcn theme variables in Figma. |
spacing-scale-enforcer | Mapping arbitrary spacing onto the project scale. |
Components and code mapping
| Skill | Use when |
|---|---|
base-ui-primitive-composition | Composing overlays from Base UI / Radix-style primitives. |
build-primitive | Specifying or building one reusable component primitive. |
code-connect-mapper | Planning Figma ↔ code mappings for Code Connect. |
component-naming-sync | Aligning Figma and code component and prop naming. |
cva-variant-generator | Generating cva configs from Figma variants. |
figma-to-code-component | Translating a selected frame into a first-pass implementation. |
screenshot-to-component | Recreating a UI screenshot as a structured Figma component. |
shadcn-component-structure | Matching shadcn/ui component conventions in generated code. |
tailwind-class-order-check | Cleaning Tailwind class order and conflicts. |
token-tailwind-theme-sync | Syncing Figma variables into a Tailwind/shadcn theme. |
Layout and responsive
| Skill | Use when |
|---|---|
container-layout-normalizer | Normalizing container widths, max-width, and padding. |
layout | Fixing reading order, grouping, spacing, and density. |
responsive-breakpoint-check | Verifying auto layout and constraints across breakpoints. |
site-launch-checklist | Pre-publish review for a Figma Sites project. |
Prototyping and motion
| Skill | Use when |
|---|---|
animation-consistency-check | Auditing easing, duration, and motion character across a file. |
motion-spec-generator | Documenting duration and easing specs for engineering. |
prototype-from-flow | Wiring screens into an end-to-end clickable prototype. |
prototype-qa | Walking every prototype link for dead ends and broken paths. |
variable-driven-prototype | Building stateful prototypes with variables and conditions. |
wire-up-interactions | Adding or fixing specific prototype interactions. |
Research, workshops, and strategy
| Skill | Use when |
|---|---|
affinity-mapping | Clustering open-ended qualitative data into themes. |
competitive-teardown | Extracting actionable insights from a competitor flow. |
design-brief-generator | Turning a vague ask into a confirmed design brief. |
journey-map-builder | Building a journey map from research or a described experience. |
persona-builder | Creating an evidence-grounded persona from research. |
sticky-synthesis | Clustering FigJam stickies into themes and takeaways. |
workshop-facilitator | Structuring a FigJam board for a workshop format. |
Content
| Skill | Use when |
|---|---|
content-inventory | Exporting every user-facing string for review or translation. |
content-tone-review | Checking copy against voice-and-tone guidelines. |
microcopy-generator | Drafting buttons, empty states, errors, and tooltips. |
Delivery and collaboration
| Skill | Use when |
|---|---|
figma-skill-router | Choosing the right installed Figma skill for a request. |
branch-review-summary | Summarizing a design branch for reviewers. |
build-from-prd | Turning a PRD into screens, states, and flows. |
comment-triage | Sorting open comments into actionable buckets. |
deck-from-outline | Building a Figma Slides deck from an outline. |
design-change-diff | Explaining what changed between two design versions. |
design-crit | Getting an evidence-based critique with severity-ranked findings. |
design-first-ui-prompting | Turning a vague UI request into a Figma-ready prompt. |
dev-handoff-prep | Final Dev Mode readiness pass before engineering. |
file-cleanup | Reorganizing pages and archiving stale exploration. |
handoff-summary | Writing a concise context handoff for a teammate. |
polish | Final launch-ready refinement pass without redesign. |
brand-kit-asset-generator | Generating on-brand marketing and social asset variants. |
plugin-widget-recommender | Recommending plugins or widgets for a workflow need. |
color-token-format-normalizer | Aligning colors to shadcn CSS-variable / HSL format. |
skills/figma-agent/ to read the full SKILL.md.