coss UI component skill — Base UI primitives with a shadcn-like DX
Use coss UI primitives correctly (imports, composition, accessibility, Tailwind styling) — 54 primitives, particle examples, shadcn/Radix migration guides
- What
- Use coss UI primitives correctly (imports, composition, accessibility, Tailwind styling) — 54 primitives, particle examples, shadcn/Radix migration guides
- Cost
- Free
- Needs
- a React project using Tailwind CSS v4 and @base-ui/react; Node.js tooling; check the license terms yourself — the SKILL.md frontmatter says MIT but the repo root is AGPL-3.0 (repo-level license used here)
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @cosscom's skill for using coss UI components correctly: a component library built on Base UI with a shadcn-like developer experience plus a large particle catalog. The skill teaches picking the right primitive for a UI task, writing correct usage code (imports, composition, props), avoiding common shadcn/Radix migration mistakes, and referencing particle examples for practical production-like patterns. All 54 primitives have dedicated reference guides (dialog, menu, context-menu, select, form, input-group, toast and more) with a component-registry index; rule files cover styling (Tailwind tokens, icon conventions, data-slot selectors), forms, composition (trigger/popup hierarchies, grouped controls), migration, segmented-control choices and portal props. Critical usage rules: never invent coss APIs — verify against the docs first; preserve trigger/content hierarchies for Dialog/Menu/Select/Popover/Tooltip; keep accessibility labels and error semantics; prefer styled exports and use `*Primitive` exports only when custom composition requires it; consult the high-risk primitive guides before the trickiest ones. Install via `npx shadcn@latest add @coss/<component>` or manually (dependencies + copy component files + fix imports), with sources of truth at the repo's docs, particle registry, `coss.com/ui/particles` and the docs `llms.txt` for agents. Honest caveats: **requires Tailwind CSS v4 and @base-ui/react** — not drop-in for other setups; **license conflict to note: the SKILL.md frontmatter says MIT but the repository root license is AGPL-3.0 — AGPL-3.0 is used here (repo level), check the terms before reuse**; the skill is a coding guide, not the component code itself. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a React project using Tailwind CSS v4 and @base-ui/react; Node.js tooling; check the license terms yourself — the SKILL.md frontmatter says MIT but the repo root is AGPL-3.0 (repo-level license used here) Install "coss UI component skill — Base UI primitives with a shadcn-like DX" for me. It gives my agent @cosscom's guide to using coss UI components correctly: 54 primitives with per-primitive reference guides and a registry index, particle examples for production-like patterns, critical usage rules (verify APIs against the docs, preserve trigger/content hierarchies, keep accessibility labels), rule files for styling/forms/composition/migration, and install via npx shadcn@latest add @coss/<component> or manually — with the docs, particle registry and llms.txt as sources of truth. Repository: https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "coss". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. install the coss dependencies (Tailwind CSS v4, @base-ui/react) and add the components with the shadcn CLI; then point the agent at the UI task). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.