cherry-design-system

Cherry Design System - the `cherry-styled-components` npm package (React + TypeScript + styled-components v6). Use this skill when building, editing, or reviewing any UI in a project that lists `cherry-styled-components` in its package.json dependencies or devDependencies, or that imports from 'cherry-styled-components'. Covers component selection (Button, IconButton, Input, Select, Textarea, Toggle, Modal, Tabs, Toast, layout primitives), `$`-prefixed styling prop names and their allowed values, theme provider wiring, dark mode, responsive breakpoints via mq(), and reading colors, spacing, radii, shadows, and typography from theme tokens instead of hardcoding them. Also use it to keep every button, input, and other control coming from Cherry rather than raw HTML elements or another component library.