# Coss

Helps implement coss UI components correctly.

- Repository: https://github.com/crafter-station/petdex (4312 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-10
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add crafter-station/petdex --skill coss -g -a claude-code -y`
Codex: `npx skills add crafter-station/petdex --skill coss -g -a codex -y`
Cursor: `npx skills add crafter-station/petdex --skill coss -g -a cursor -y`
Gemini CLI: `npx skills add crafter-station/petdex --skill coss -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

The rest: https://github.com/crafter-station/petdex/blob/HEAD/.agents/skills/coss/SKILL.md