# Skills

Source: https://www.pitchkitjs.com/docs/agents/skills

> The Agent Skill that ships inside @pitchkit/react — versioned with the package, not scraped from this site.

`@pitchkit/react` ships an [Agent Skill](https://code.claude.com/docs/en/skills) in its npm
tarball: the real API, the gotchas that break builds, and four worked recipes, installed from
`node_modules` rather than fetched from here.

## Install

```bash
npx @pitchkit/react skills install
```

That links `.claude/skills/pitchkit/` to the copy inside `node_modules`. For another agent,
point it elsewhere:

```bash
npx @pitchkit/react skills install --dir .cursor/skills
```

`npx @pitchkit/react skills path` prints where the skill lives if you'd rather wire it up
yourself.

## It stays current

Because it's a link, not a copy, the skill tracks whatever version you have installed:

```bash
npm update @pitchkit/react   # skill is already current — nothing else to run
```

That matters more than it sounds. A copied skill is correct the day you extract it and
silently wrong after the next breaking change — the same version ambiguity that makes
training data unreliable, one layer down. It's also the one thing
[llms.txt](/docs/agents/llms-txt) can't give you, since those files describe whatever is
deployed here rather than what you installed.

On filesystems that reject symlinks it copies instead and tells you, in which case re-run
with `--force` after upgrading.

## What's in it

| Part                | Covers                                                                                                          |
| ------------------- | --------------------------------------------------------------------------------------------------------------- |
| The model           | The core/react split, the three provider coordinate systems, accessors, responsive sizing, CSS-variable theming |
| Anti-hallucinations | The plausible things that *don't* exist — `<ShotMap>`, a `theme` prop, `type="tracab"`                          |
| Build-breakers      | The `"use client"` boundary, density layers needing a fixed-pixel `<Pitch>`, `linesOnTop`                       |
| Four recipes        | Shot map, pass map, heatmap, pass network — tested against the real exports                                     |
| API reference       | Every component's props, plus the `@pitchkit/core` helpers worth calling                                        |

## How it triggers

The agent reads the skill's one-line description at startup — costing nothing until it's
relevant — and loads the rest only when a request matches: a shot map, a pass network,
anything mentioning StatsBomb, Opta, or `<Pitch>`. Your prompts don't change.

## See also

* [llms.txt](/docs/agents/llms-txt) — the hosted alternative, for tools that can't read `node_modules`
* [Theming](/docs/styling/theming) — the CSS-variable system the skill documents
* [Gallery](/gallery) — the same examples, with live previews