> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qredence.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Skills catalogue

> The 62 Figma agent skills in Qredence Skills, grouped by job: accessibility, design system, components and code, layout, prototyping, research, content, and delivery.

The Qredence Skills catalogue currently ships **62 Figma agent skills** under `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.              |

Open a skill's directory in [`skills/figma-agent/`](https://github.com/Qredence/skills/tree/main/skills/figma-agent) to read the full `SKILL.md`.