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.

Install

npx -y skills add cherry-design-system/styled-components

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 .md to its URL, e.g. cherry.al/code/button.md