Helps implement coss UI components correctly. Use when building UIs with coss primitives (buttons, dialogs, selects, forms, menus, tabs, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Covers imports, accessibility, Tailwind styling, and common pitfalls.
coss ui is a component library built on Base UI with a shadcn-like developer experience plus a large particle catalog.
Use this skill to:
apps/ui/content/docs/components/*.mdx
https://github.com/cosscom/coss/tree/main/apps/ui/content/docs/componentsapps/ui/registry/default/particles/p-*.tsx
https://github.com/cosscom/coss/tree/main/apps/ui/registry/default/particleshttps://coss.com/ui/particleshttps://coss.com/ui/llms.txtAlways apply before returning coss code:
*Primitive exports only when custom composition/styling requires it.Rule references (read on demand when the task touches these areas):
./references/rules/styling.md — Tailwind tokens, icon conventions, data-slot selectors./references/rules/forms.md — Field composition, validation, input patterns./references/rules/composition.md — Trigger/popup hierarchies, grouped controls./references/rules/migration.md — shadcn/Radix to coss/Base UI migration patterns./references/portal-props.md — optional portalProps on composed popups (keepMounted, container, which wrappers support it)All 53 primitives have dedicated reference guides at ./references/primitives/<name>.md. To find the right one for a task, consult the component registry index:
./references/component-registry.mdreferences/component-registry.md to identify candidate primitives.apps/ui/registry/default/particles/p-<name>-<N>.tsx (e.g. p-dialog-1.tsx).See ./references/cli.md for full install/discovery workflow.
Quick CLI pattern:
npx shadcn@latest add @coss/<component>
Quick manual pattern:
Every primitive has a reference guide at ./references/primitives/<name>.md with imports, minimal patterns, inline code examples, pitfalls, and particle references. Use the component registry to find the right file.
High-risk primitives (read these guides first -- they have the most composition gotchas):
./references/primitives/dialog.md — modal overlays, form-in-dialog, responsive dialog/drawer./references/primitives/menu.md — dropdown actions, checkbox/radio items, submenus./references/primitives/select.md — items-first pattern, multiple, object values, groups./references/primitives/form.md — Field composition, validation, submission./references/primitives/input-group.md — addons, DOM order invariant, textarea layouts./references/primitives/toast.md — toastManager (not Sonner), anchored toasts, providersBefore returning code:
button, input, etc.) are present