coss
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.
Security Assessment
About coss
The coss skill helps developers implement coss UI components correctly in React applications. coss is a component library built on Base UI that provides a shadcn-like developer experience with an extensive particle catalog. This skill serves as a technical guide for selecting the right primitives, writing correct implementation code, and avoiding common pitfalls when building user interfaces with coss components like buttons, dialogs, selects, forms, menus, tabs, inputs, and toasts.
The skill covers essential capabilities including proper import statements, accessibility best practices, Tailwind CSS v4 styling conventions, and composition patterns for trigger-based overlays. It provides guidance on migrating from shadcn/Radix to coss/Base UI, composing complex UI flows, and troubleshooting component behavior. The skill emphasizes using existing primitives and particles first, following documented APIs exactly, and maintaining production-realistic code that mirrors official coss conventions.
This skill is designed for React developers building modern web applications who need to implement UI components using the coss library. It's particularly valuable for teams migrating from shadcn or Radix UI, developers working on accessible interfaces, and anyone needing reference examples from the coss particle catalog. The skill helps users navigate 54+ documented primitives, understand component composition hierarchies, and produce clean, maintainable UI code that follows coss best practices.
FAQ
What are the main requirements to use coss components?
coss requires Tailwind CSS v4 and @base-ui/react as dependencies. It's designed for React projects using the coss component registry and follows Tailwind CSS v4 conventions for styling.
How does coss differ from shadcn or Radix UI?
coss is built on Base UI (not Radix) and provides a shadcn-like developer experience. The skill includes migration guidance to help transition from shadcn/Radix patterns to coss/Base UI, covering differences in composition, trigger hierarchies, and API usage.
Where can I find examples of coss component implementations?
The skill references the coss particle catalog at https://coss.com/ui/particles with examples located in the repository at apps/ui/registry/default/particles/p-*.tsx. Component documentation is available in apps/ui/content/docs/components/*.mdx files.
What types of UI components does coss support?
coss provides 54+ primitives covering buttons, dialogs, selects, forms, menus, tabs, inputs, toasts, popovers, tooltips, and other common UI patterns. Each primitive has dedicated reference documentation.
Can I customize coss components or do I need to use them as-is?
coss components support composition and styling customization. The skill recommends using styled coss exports first, but you can use *Primitive exports when custom composition or styling is required. However, you should always follow documented APIs rather than inventing custom patterns.
All Files
62 filesInstall coss
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
cosscom/coss