> ## 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.

# Introduction to Qredence Skills

> Qredence Skills is a curated catalogue of Figma design and product skills for AI agents, installed with skills.sh and invoked by name or task description.

Qredence Skills is a curated catalogue of practical Figma design and product skills for AI agents. Each skill is a single `SKILL.md` with a clear trigger description and an evidence-backed workflow the agent can follow inside Figma.

The catalogue installs with [`skills.sh`](https://www.skills.sh/docs) and is scoped for Figma design work: selection-first by default, evidence tied to layers, frames, and variables, and clear limits when code or admin context is unavailable.

## Install

```bash theme={null}
npx skills@latest add qredence/skills
```

1. Choose skills from the Figma catalogue.
2. Choose the agents where you want them installed.
3. Invoke a skill by name or by describing the task it covers.

List discoverable skills from a clean directory:

```bash theme={null}
npx skills@latest add qredence/skills --list
```

Only packages under `skills/figma-agent/` are discoverable.

## How skills work

| Piece                                    | Role                                      |
| ---------------------------------------- | ----------------------------------------- |
| `skills/figma-agent/<name>/SKILL.md`     | Canonical, installable skill document.    |
| YAML frontmatter (`name`, `description`) | Discovery and routing for agents.         |
| Workflow sections                        | Concrete steps, limits, and output shape. |

There is no duplicate upload document — `SKILL.md` is the only skill file.

## Catalogue

The catalogue currently ships **62 skills** under `skills/figma-agent/`, grouped by job.

### Accessibility and usability

`accessibility-audit`, `heuristic-evaluation`, `improve-ui`, `localization-readiness`, `states-completeness-check`, `visual-consistency-check`.

### Design system and tokens

`apply-color-variables`, `component-audit`, `design-tokens-sync`, `follow-ds-guidelines`, `legacy-styles-to-variables`, `library-health-report`, `naming-convention-enforcer`, `rename-layers-batch`, `semantic-color-audit`, `shadcn-theme-variables`, `spacing-scale-enforcer`.

### Components and code mapping

`base-ui-primitive-composition`, `build-primitive`, `code-connect-mapper`, `component-naming-sync`, `cva-variant-generator`, `figma-to-code-component`, `screenshot-to-component`, `shadcn-component-structure`, `tailwind-class-order-check`, `token-tailwind-theme-sync`.

### Layout and responsive

`container-layout-normalizer`, `layout`, `responsive-breakpoint-check`, `site-launch-checklist`.

### Prototyping and motion

`animation-consistency-check`, `motion-spec-generator`, `prototype-from-flow`, `prototype-qa`, `variable-driven-prototype`, `wire-up-interactions`.

### Research, workshops, and strategy

`affinity-mapping`, `competitive-teardown`, `design-brief-generator`, `journey-map-builder`, `persona-builder`, `sticky-synthesis`, `workshop-facilitator`.

### Content

`content-inventory`, `content-tone-review`, `microcopy-generator`.

### Delivery and collaboration

`figma-skill-router`, `branch-review-summary`, `build-from-prd`, `comment-triage`, `deck-from-outline`, `design-change-diff`, `design-crit`, `design-first-ui-prompting`, `dev-handoff-prep`, `file-cleanup`, `handoff-summary`, `polish`, `brand-kit-asset-generator`, `plugin-widget-recommender`, `color-token-format-normalizer`.

Browse the full list in the [`skills/figma-agent/`](https://github.com/Qredence/skills/tree/main/skills/figma-agent) directory.

## Suggested starting set

For a first install, these six cover the most common loops:

| Skill                     | Why                                  |
| ------------------------- | ------------------------------------ |
| `accessibility-audit`     | Catch checkable a11y issues early.   |
| `component-audit`         | Keep shared components healthy.      |
| `design-tokens-sync`      | Keep design and code tokens aligned. |
| `figma-to-code-component` | Bridge a selected design into code.  |
| `prototype-from-flow`     | Make flows testable quickly.         |
| `dev-handoff-prep`        | Close the loop before engineering.   |

## Repository layout

```text theme={null}
skills/figma-agent/<skill-name>/SKILL.md   # installable catalogue (source of truth)
skills/figma-agent/CHANGELOG.md            # catalogue release notes
archive/                                   # historical material (not installable)
scripts/                                   # init and validate helpers
tests/                                     # catalogue integrity checks
media/                                     # binary assets referenced by docs
AGENTS.md                                  # maintainer workflow
```

## Learn more

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/skills/quickstart">
    Install the catalogue with `skills.sh` and invoke your first skill.
  </Card>

  <Card title="Catalogue" icon="toolbox" href="/skills/catalogue">
    All 62 shipped Figma agent skills grouped by job.
  </Card>

  <Card title="Authoring" icon="pen-nib" href="/skills/authoring">
    `SKILL.md` anatomy, `init_skill.py`, and the validation workflow.
  </Card>
</CardGroup>

## Contributing

New skills belong under `skills/figma-agent/` as a kebab-case directory with a matching frontmatter `name`.

```bash theme={null}
uv run python scripts/init_skill.py my-new-skill
# edit skills/figma-agent/my-new-skill/SKILL.md
uv run python scripts/validate_skills.py
```

Full workflow: [`AGENTS.md`](https://github.com/Qredence/skills/blob/main/AGENTS.md).

Source: [github.com/Qredence/skills](https://github.com/Qredence/skills). Licensed under MIT.