coss-uilisted

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, installed through the shadcn CLI via the namespaced `@coss/*` registry (copy-paste-and-own source). Two modes: Init (scaffold a new/empty project with `shadcn init @coss/style` — components, neutral tokens, sidebar vars, Inter/Geist fonts) and Add (pull primitives `@coss/ui`, single components `@coss/<name>`, or particles into an already-scaffolded project). Because Coss tokens are the SAME CSS variables as shadcn/ui, DESIGN.md tokens override them directly in globals.css. Integrates with the dev-flow contract: sets `meta.json#stack.ui = "coss"` (+ `ui_base = "base"`). 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"`. Not for: writing the DESIGN.md (use figma-to-design-md / image-to-design-md), the generic Next.js scaffold internals (design-md-to-app owns
lukedj78/dev-flow · ★ 4 · Web & Frontend · score 77

Install: claude install-skill lukedj78/dev-flow

# coss-ui — Coss/UI (Cal.com design system) for a dev-flow project This skill owns the **Coss/UI side** of a web project: installing and extending Coss components (the Cal.com design system on **Base UI** + **Tailwind v4**) through the **shadcn CLI** `@coss/*` registry, and keeping Coss's tokens reconciled with the project's `DESIGN.md`. It **composes with** `design-md-to-app` (which owns the generic Next.js scaffold) — it does not re-implement it. ## The one rule that matters most **Never invent the Coss commands or registry.** The source of truth is the live docs at <https://coss.com/ui/docs> (get-started + each component page shows its exact `pnpm dlx shadcn@latest add @coss/<name>` command) and the repo `cosscom/coss`. Confirm the exact command, the `components.json#registries` config for the `@coss` namespace, and the current registry URL **before** running anything. Coss is young; treat this skill as the workflow + conventions, not a frozen copy of the API. Anything marked `[VERIFY]` must be checked against the live docs first. ## Why Coss fits dev-flow (and when to pick it) Coss/UI rides the **same machinery** dev-flow already uses: shadcn CLI v4 + `components.json` + **CSS-variable tokens with the same names as shadcn/ui**. So the DESIGN.md → tokens pipeline works unchanged; Coss just supplies the default token set (`@coss/colors-neutral`) plus a curated Base-UI component/particle registry. It is a UI-library choice **inside the shadcn / Base-UI family**, recorde