coss

Featured

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.

Web & Frontend 3,944 stars 185 forks Updated today MIT

Install

View on GitHub

Quality Score: 99/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# coss ui coss ui is a component library built on Base UI with a shadcn-like developer experience plus a large particle catalog. ## What this skill is for Use this skill to: - pick the right coss primitive(s) for a UI task - write correct coss usage code (imports, composition, props) - avoid common migration mistakes from shadcn/Radix assumptions - reference particle examples to produce practical, production-like patterns ## Source of truth - coss components docs: `apps/ui/content/docs/components/*.mdx` - `https://github.com/cosscom/coss/tree/main/apps/ui/content/docs/components` - coss particle examples: `apps/ui/registry/default/particles/p-*.tsx` - `https://github.com/cosscom/coss/tree/main/apps/ui/registry/default/particles` - coss particles catalog: `https://coss.com/ui/particles` - docs map for agents: `https://coss.com/ui/llms.txt` ## Out of scope - Maintaining coss monorepo internals/build pipelines. - Editing registry internals unless explicitly requested. ## Principles for agent output 1. Use existing primitives and particles first before inventing custom markup. 2. Prefer composition over custom behavior reimplementation. 3. Follow coss naming and APIs from docs exactly. 4. Keep examples accessible and production-realistic. 5. Prefer concise code that mirrors coss docs/particles conventions. 6. Assume Tailwind CSS v4 conventions in coss examples and setup guidance. ## Critical usage rules Always apply before returning coss code: - Do not invent cos...

Details

Author
crafter-station
Repository
crafter-station/petdex
Created
3 months ago
Last Updated
today
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

coss-ui

Set up or extend a Next.js web app with Coss/UI — the official Cal.com design system, built on Base UI + Tailwind CSS v4 and installed through the shadcn CLI via the namespaced `@coss/*` registry. Two modes: Init (`shadcn init @coss/style` on a new project) and Add (pull `@coss/ui` primitives, single `@coss/<name>` components, or particles into an existing one). Sets `meta.json#stack.ui = "coss"`. Triggers: "usa Coss/UI", "coss.com/ui", "Cal.com design system", "aggiungi un componente Coss", "init @coss/style", "scaffold con Coss UI", or dev-flow routing when `stack.ui = "coss"`. Requires Tailwind CSS v4 and carries a mixed MIT/AGPLv3 license. Not for: writing the DESIGN.md (use figma-to-design-md / image-to-design-md), the generic Next.js scaffold (design-md-to-app owns it), backend modules (module-add), or React Native (RN uses NativeWind, not Coss).

4 Updated 4 days ago
lukedj78
Web & Frontend Featured

coss-particles

Index of all COSS UI particle examples. Use when implementing UI features to find copy-paste-ready component patterns built on coss primitives. Each particle has a description and a JSON URL for easy installation.

3,944 Updated today
crafter-station
Web & Frontend Listed

swe-developing-frontend-ui

UI development skill covering design token usage, shadcn/ui + Radix composition patterns, accessibility requirements, anti-patterns catalog, and brand context for `crud-fe-ts-nextjs` and `crud-fs-ts-nextjs`. Auto-loads when working on TSX components, CSS, or UI design tasks.

3 Updated 1 weeks ago
wahidyankf