# Agent skills

> Agent skills teach Claude Code, Cursor and other coding agents to add awesome-reveal animations and migrate from v4. Link them with pnpm, or copy them by hand.

The packages include [agent skills](https://agentskills.io): instructions that teach a coding agent, such as Claude Code, to use the package. The skills are in the `skills` folder of the package, and they match the installed version.

## Skills

### @awesome-reveal/react

* `adding-reveal-animations`: add reveal animations with `Reveal` and `useReveal`.
* `migrating-from-v4`: migrate code from `react-awesome-reveal` v4.

### @awesome-reveal/vue

* `adding-reveal-animations`: add reveal animations with `v-reveal` and `Reveal`.

### @awesome-reveal/astro

* `adding-reveal-animations`: add reveal animations with the `Reveal` component.

### @awesome-reveal/core

* `adding-reveal-animations`: add reveal animations to plain DOM code with `reveal()`.

### react-awesome-reveal

* `migrating-from-v4`: the same skill as in `@awesome-reveal/react`, for projects that upgrade `react-awesome-reveal` to version 5.

## pnpm

pnpm 12.11 and later link the [skills of your dependencies](https://pnpm.io/agent-skills) into your project. pnpm links nothing until you approve the package:

1. Install the package. pnpm lists the direct dependencies with skills that wait for approval.
2. Run `pnpm approve`, and choose the package. pnpm writes the approval to `pnpm-workspace.yaml`.

The approval covers all the skills of the package, also in later versions. pnpm links each skill as `pnpm-<package>-<skill>`, for example `pnpm-@awesome-reveal+react-adding-reveal-animations`:

* pnpm links into the agent skill folders that exist in the workspace root, such as `.claude/skills` or `.cursor/skills`.
* When pnpm detects an agent, such as Claude Code or Cursor, it creates the skill folder of that agent.
* To choose the folders yourself, set `skills.dirs`. An empty list turns off the links.

If you approved a skill, but no skill folder exists and pnpm detects no agent, for example in CI, the install fails. Create `.claude/skills`, or set `skills.dirs`.

pnpm adds a `.gitignore` to each skill folder, so the links stay out of Git. Global installs, `pnpm dlx` and `pnpm deploy` do not link skills.

## Other package managers

Copy or link the skill folders from `node_modules/<package>/skills/` into the skills folder of your agent. For Claude Code, this folder is `.claude/skills/`.

`@awesome-reveal/core` and each adapter have an `adding-reveal-animations` skill, so their folders have the same name. Copy only the skill of the package that your code imports. A project gets `@awesome-reveal/core` as a dependency of the adapter, but it needs only the skill of the adapter.