Skills

Skills provide AI coding assistants with structured knowledge about coss ui — component APIs, composition patterns, styling conventions, migration rules, and common pitfalls. When installed, your assistant knows how to use coss primitives correctly without guessing.

For example, you can ask your assistant to:

• "Add a settings dialog with a form and save/cancel buttons."
• "Add a select with grouped options and a search filter."
• "Migrate this shadcn dropdown menu to coss."
• "Build a toast notification for form submission errors."

Install

bunnpmpnpmyarn
pnpm dlx skills add cosscom/coss
Copy

This installs the coss skill into your project. Once installed, your AI assistant automatically loads it when working with coss ui components.

Learn more about the skills ecosystem at skills.sh.

What's Included

The skill covers the full coss ui surface:

Component Knowledge

Reference guides for all primitives — imports, minimal patterns, inline code examples, composition rules, and common pitfalls. The assistant knows when to use Dialog vs Sheet vs Drawer, how to compose trigger-based overlays, and how to structure forms with Field.

Styling Conventions

Tailwind v4 token usage, semantic color system, icon sizing rules, data-slot selectors, --alpha() syntax, and the font variable contract (--font-sans, --font-mono, --font-heading).

Migration Patterns

Rules for migrating from shadcn/Radix to coss/Base UI — asChild to render, onSelect to onClick, Select items-first pattern, ToggleGroup type to multiple, and Slider scalar values.

CLI and Registry

Full reference for installing components via the shadcn CLI, discovery fallbacks, and manual install paths.

Particle Examples

The skill references the particle catalog — real-world composition examples for every primitive — so the assistant can produce production-realistic code, not just minimal stubs.

How It Works

1. Skill activation — Your AI agent detects the installed skill files in your project.
2. Progressive loading — The root SKILL.md provides core rules and a component registry index. Detailed per-component guides and rule references are loaded on demand when the task requires them.
3. Pattern enforcement — The assistant follows coss composition rules: render prop for trigger composition, DialogHeader/DialogPanel/DialogFooter section structure, variant="ghost" for cancel buttons, and correct Base UI APIs.
4. Example-driven output — Before generating code, the assistant consults particle examples to match real coss patterns.

Supported Agents

Skills work with any agent that supports the Agent Skills specification, including Claude Code, Cursor, Codex, Cline, Windsurf, GitHub Copilot, and many more.