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 - 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 folder of the library repo.
- cherry-design-system
- SKILL.md
- AGENTS.md
- README.md
- references
- setup.md
- theme.md
- components.md
- recipes.md
Install
The skills CLI is the recommended, cross-agent path. It installs into the right directory for Claude Code, Cursor, Codex, and many other agents, detecting yours automatically.
npx -y skills add cherry-design-system/styled-componentsPreview 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.
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.
# 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/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.
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 - All docs in one file:
cherry.al/llms-full.txt - Any page as markdown: append
.mdto its URL, e.g.cherry.al/code/button.md
No skill installed? Paste this prompt into your assistant to get the same behavior on demand:
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
.mdto any page URL for its markdown.
The skill is documentation only. It contains no runtime code and is not part of the published npm package.