# Skill for AI Agents

> Teach Claude and other coding agents to build with Cherry correctly using the official Agent Skill.

Source: https://cherry.al/code/skill-for-ai-agents

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# Skill for AI Agents

Cherry ships an official AI-assistant skill that teaches Claude and other coding agents to build with the library correctly: reach for a Cherry component for every button and form control, read design values from the theme instead of hardcoding them, and wire up the provider. Drop it into your project and your assistant stops guessing.

It is a [Claude Agent Skill](https://docs.claude.com/en/docs/claude-code/skills) - a `SKILL.md` plus on-demand `references/` covering setup, theme tokens, the full component API, and recipes - and it lives in the [`skills/cherry-design-system`](https://github.com/cherry-design-system/styled-components/tree/main/skills/cherry-design-system) folder of the library repo.

<FileTree>

- cherry-design-system/
  - SKILL.md
  - AGENTS.md
  - README.md
  - references/
    - setup.md
    - theme.md
    - components.md
    - recipes.md

</FileTree>

## Install

<Tabs>
  <TabContent title="skills CLI">

The [`skills` CLI](https://github.com/vercel-labs/skills) is the recommended, cross-agent path. It installs into the right directory for Claude Code, Cursor, Codex, and many other agents, detecting yours automatically.

<CodeTabs tabs={[{ label: "npm", code: "npx -y skills add cherry-design-system/styled-components" }, { label: "pnpm", code: "pnpm dlx skills add cherry-design-system/styled-components" }, { label: "yarn", code: "yarn dlx skills add cherry-design-system/styled-components" }]} />

Preview what would be installed with `--list`, update later with `npx skills update cherry-design-system`, and remove it with `npx skills remove cherry-design-system`.

  </TabContent>
  <TabContent title="Claude Code (manual)">

An Agent Skill is just a folder. Copy it into your skills directory - project-level to share it with your team, or personal for all your projects. Keep the `references/` folder alongside `SKILL.md`.

```bash
# project-level (committed, shared with your team)
cp -r cherry-design-system .claude/skills/

# or personal (all your projects)
cp -r cherry-design-system ~/.claude/skills/
```

  </TabContent>
  <TabContent title="Other agents">

For Cursor, Codex, Zed, and other tools that read a single guide file, copy the skill's self-contained `AGENTS.md` to your repository root (or append it to an existing `AGENTS.md`). It condenses the same rules into one file; the `references/` load on demand.

  </TabContent>
</Tabs>

## What the skill enforces

Once installed, the assistant follows Cherry's rules instead of improvising:

- **Every button is a Cherry `<Button>` or `<IconButton>`** - never a raw `<button>` or another library's button.
- **Every form control is a Cherry component** - `Input`, `Select`, `Textarea`, `Toggle`, `Range`, `Password`, `Dropzone`, `AvatarDropzone` (checkbox and radio are `<Input type="checkbox">` / `<Input type="radio">`).
- **No hardcoded design values** - colors, spacing, radii, shadows, and font sizes come from the theme, with typography mixins for text and `mq()` for breakpoints.
- **Styling props are `$`-prefixed** (`$variant`, `$size`, `$fullWidth`) and stay within their literal unions.
- **The app is wrapped in a Cherry provider**, uses the layout primitives (`Container`, `Grid`, `Col`, `Flex`, `Box`, `MaxWidth`, `Space`), and renders icons with `<Icon name="..." />`.

## Always-current docs

The bundled references are an offline snapshot. This site is the live source of truth, and every page is available as machine-readable markdown so an assistant can fetch the current API on demand:

- **Index of every page:** [`cherry.al/llms.txt`](https://cherry.al/llms.txt)
- **All docs in one file:** [`cherry.al/llms-full.txt`](https://cherry.al/llms-full.txt)
- **Any page as markdown:** append `.md` to its URL, e.g. [`cherry.al/code/button.md`](https://cherry.al/code/button.md)

No skill installed? Paste this prompt into your assistant to get the same behavior on demand:

<Prompt description="Build with Cherry using the live docs." icon="sparkles">

You are building with cherry-styled-components, the Cherry Design System.

- Use a Cherry component for every button and form control, never a raw HTML element or another library.
- Read colors, spacing, radii, shadows, and font sizes from the theme instead of hardcoding values.
- Wrap the app in a Cherry theme provider and keep styling props `$`-prefixed.
- Fetch https://cherry.al/llms.txt for an index of the docs, and append `.md` to any page URL for its markdown.

</Prompt>

<Callout type="info">
  The skill is documentation only. It contains no runtime code and is not part of the published npm package.
</Callout>

<Button href="https://github.com/cherry-design-system/styled-components/tree/main/skills/cherry-design-system" icon="code" iconPosition="left">
  View Skill on GitHub
</Button>