Nextjs Nextra Starter Distill
pdsuwwz/nextjs-nextra-starter
Distill and apply this repository's Next.js Nextra starter architecture, implemented features, extension points, and migration patterns.
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
Install Coss
$ npx skills add crafter-station/petdex --skill coss -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install crafter-station/petdex coss --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/crafter-station/petdex.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/coss .claude/skills/coss && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "coss" agent skill from https://github.com/crafter-station/petdex/tree/main/.agents/skills/coss into .claude/skills/coss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coss", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/crafter-station/petdex/tree/main/.agents/skills/cossType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add crafter-station/petdex --skill coss -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install crafter-station/petdex coss --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/crafter-station/petdex.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/coss .agents/skills/coss && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "coss" agent skill from https://github.com/crafter-station/petdex/tree/main/.agents/skills/coss into .agents/skills/coss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coss", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add crafter-station/petdex --skill coss -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install crafter-station/petdex coss --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/crafter-station/petdex.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/coss .cursor/skills/coss && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "coss" agent skill from https://github.com/crafter-station/petdex/tree/main/.agents/skills/coss into .cursor/skills/coss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coss", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/crafter-station/petdex.git --path .agents/skills/coss--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add crafter-station/petdex --skill coss -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install crafter-station/petdex coss --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/crafter-station/petdex.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/coss .gemini/skills/coss && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "coss" agent skill from https://github.com/crafter-station/petdex/tree/main/.agents/skills/coss into .gemini/skills/coss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coss", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install crafter-station/petdex cossInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add crafter-station/petdex --skill coss -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/crafter-station/petdex.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/coss .github/skills/coss && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "coss" agent skill from https://github.com/crafter-station/petdex/tree/main/.agents/skills/coss into .github/skills/coss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coss", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add crafter-station/petdex --skill coss -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install crafter-station/petdex coss --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/crafter-station/petdex.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/coss .opencode/skills/coss && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "coss" agent skill from https://github.com/crafter-station/petdex/tree/main/.agents/skills/coss into .opencode/skills/coss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coss", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
coss- GitHub stars
- 4.2k
- Token cost
- ~1.4k tokens
- SKILL.md length
- 540 words
- Files
- 62 (incl. references)
- Skills in repo
- 3
- Repo updated
- First seen
- Licence
- MIT
At a glance
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
- Works in 6 steps: Use existing primitives and particles… → Prefer composition over custom behavior… → Follow coss naming and APIs from docs… → …
- Building UIs with coss primitives (buttons
- SKILL.md covers What this skill is for, Source of truth, Out of scope and Principles for agent output, plus 6 more sections
- Calls npx; reaches github.com and coss.com
What it does
Coss is an agent skill from crafter-station/petdex. 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.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 63 other files, including reference files (for example `references/cli.md`, `references/component-registry.md` and `references/portal-props.md`). Compatibility notes: Requires Tailwind CSS v4 and @base-ui/react. Designed for React projects using the coss component registry.
It sits in Frontend & Design, covering Design systems and CSS and styling. It works with Tailwind CSS, shadcn/ui, Vercel and PostgreSQL. The repository describes itself as: A public gallery of animated pets for Codex, Claude Code, DeepSeek Harness, Hermes, OpenCode, Gemini CLI, and more. The licence is MIT.
When your agent uses it
- Building UIs with coss primitives (buttons
- Migrating from shadcn/Radix to coss/Base UI
- Composing trigger-based overlays
- Troubleshooting coss component behavior
Example prompts
- “Use the coss skill to help implement coss UI components correctly. An agent skill from crafter-station/petdex”
- “/coss”
Requirements
- Node.js
- Compatibility (from SKILL.md): Requires Tailwind CSS v4 and @base-ui/react. Designed for React projects using the coss component registry.
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Use existing primitives and particles first before inventing custom markup.
- Prefer composition over custom behavior reimplementation.
- Follow coss naming and APIs from docs exactly.
- Keep examples accessible and production-realistic.
- Prefer concise code that mirrors coss docs/particles conventions.
- Assume Tailwind CSS v4 conventions in coss examples and setup guidance.
What it can do on your machine
Read from SKILL.md and the folder at commit 7e32703. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
github.comcoss.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Compatibility
Requires Tailwind CSS v4 and @base-ui/react. Designed for React projects using the coss component registry.
From compatibility in the SKILL.md frontmatter.
Context cost
Coss loads about 1.4k tokens when it runs, and up to ~37k if it reads all its reference files. Until then it costs about 89 tokens; SKILL.md has 540 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from crafter-station/petdex at commit 7e32703, republished under its MIT licence (© crafter-station). 540 words, ~1,390 tokens.
Download SKILL.mdSave it as
.claude/skills/coss/SKILL.md (or your agent's skills folder). This skill also uses 61 other files; get the full folder from GitHub.- name
- coss
- 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.
- compatibility
- Requires Tailwind CSS v4 and @base-ui/react. Designed for React projects using the coss component registry.
- license
- MIT
- metadata.author
- cosscom
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/*.mdxhttps://github.com/cosscom/coss/tree/main/apps/ui/content/docs/components
- coss particle examples:
apps/ui/registry/default/particles/p-*.tsxhttps://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
- Use existing primitives and particles first before inventing custom markup.
- Prefer composition over custom behavior reimplementation.
- Follow coss naming and APIs from docs exactly.
- Keep examples accessible and production-realistic.
- Prefer concise code that mirrors coss docs/particles conventions.
- Assume Tailwind CSS v4 conventions in coss examples and setup guidance.
Critical usage rules
Always apply before returning coss code:
- Do not invent coss APIs. Verify against component docs first.
- For trigger-based primitives (Dialog, Menu, Select, Popover, Tooltip), follow each primitive's documented trigger/content hierarchy and composition API; do not mix patterns across components.
- Preserve accessibility labels and error semantics.
- Consult primitive-specific guides for component invariants and edge cases.
- For manual install guidance, include all required dependencies and local component files referenced by imports.
- Prefer styled coss exports first; use
*Primitiveexports only when custom composition/styling requires it.
Rule references (read on demand when the task touches these areas):
./references/rules/styling.md— Tailwind tokens, icon conventions, data-slot selectors./references/rules/forms.md— Field composition, validation, input patterns./references/rules/composition.md— Trigger/popup hierarchies, grouped controls./references/rules/migration.md— shadcn/Radix to coss/Base UI migration patterns./references/portal-props.md— optionalportalPropson composed popups and toast providers (keepMounted,container, which surfaces support it)
Component discovery
All 53 primitives have dedicated reference guides at ./references/primitives/<name>.md. To find the right one for a task, consult the component registry index:
./references/component-registry.md
Show full SKILL.md (221 more words)Show less
Usage workflow
- Identify user intent (single primitive, composed flow, form flow, overlay flow, feedback flow).
- Consult
references/component-registry.mdto identify candidate primitives. - Select primitives from coss docs first; avoid custom fallback unless needed.
- Check at least one particle example for practical composition patterns. Particle files live at
apps/ui/registry/default/particles/p-<name>-<N>.tsx(e.g.p-dialog-1.tsx). - Write minimal code using documented imports/props.
- Self-check accessibility and composition invariants.
Installation reference
See ./references/cli.md for full install/discovery workflow.
Quick CLI pattern:
npx shadcn@latest add @coss/<component>Quick manual pattern:
- install dependencies listed in the component docs page
- copy required component file(s)
- update imports to match the target app alias setup
Primitive Guidance
Every primitive has a reference guide at ./references/primitives/<name>.md with imports, minimal patterns, inline code examples, pitfalls, and particle references. Use the component registry to find the right file.
High-risk primitives (read these guides first -- they have the most composition gotchas):
./references/primitives/dialog.md— modal overlays, form-in-dialog, responsive dialog/drawer./references/primitives/menu.md— dropdown actions, checkbox/radio items, submenus./references/primitives/select.md— items-first pattern, multiple, object values, groups./references/primitives/form.md— Field composition, validation, submission./references/primitives/input-group.md— addons, DOM order invariant, textarea layouts./references/primitives/toast.md— toastManager (not Sonner), anchored toasts, providers
Output Checklist
Before returning code:
- imports and props match coss docs
- composition structure is valid for selected primitive(s)
- accessibility and explicit control types (
button,input, etc.) are present - migration-sensitive flows are verified (type/lint, keyboard/a11y behavior, and SSR-sensitive primitives like Select/Command)
© crafter-station, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 61 other files (references) in .agents/skills/coss of crafter-station/petdex.
- SKILL.md
- references/cli.md
- references/component-registry.md
- references/portal-props.md
- references/primitives/accordion.md
- references/primitives/alert-dialog.md
- references/primitives/alert.md
- references/primitives/autocomplete.md
- references/primitives/avatar.md
- references/primitives/badge.md
- references/primitives/breadcrumb.md
- references/primitives/button.md
- references/primitives/calendar.md
- references/primitives/card.md
- references/primitives/checkbox-group.md
- references/primitives/checkbox.md
- references/primitives/collapsible.md
- references/primitives/combobox.md
- references/primitives/command.md
- … and 43 more
Open the folder on GitHubat commit 7e32703
Compare with similar skills
Coss next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Coss this skillcrafter-station/petdex | 4.2k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Nextjs Nextra Starter Distillpdsuwwz/nextjs-nextra-starter | 318 | — | ~596 | Automated safety check: Pass | MIT | |
| Nextjs Nextra Starter Distill Zhpdsuwwz/nextjs-nextra-starter | 318 | — | ~313 | Automated safety check: Pass | MIT | |
| Shadcn Tailwind UILiarMTTT/TavernWeave | 153 | — | ~1.7k | Automated safety check: Pass | Custom licence | |
| Oma Frontendfirst-fluke/oh-my-agent | 1.3k | — | ~2.5k | Automated safety check: Pass | MIT | |
| Audit Frontend Designhashgraph-online/awesome-codex-plugins | 1.3k | — | ~560 | Automated safety check: Pass | Apache-2.0 |
Similar skills
Nextjs Nextra Starter Distill Zh
pdsuwwz/nextjs-nextra-starter
蒸馏并应用当前仓库的 Next.js Nextra 启动模板架构、已实现功能、二次开发扩展点与迁移模式。适用于理解本项目、继续二次开发、修改 docs/landing/i18n/theme/auth/UI 行为，或把这些 Next.js 16 + Nextra 4 + Tailwind CSS 4 模式复用到其他项目。
Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
Oma Frontend
first-fluke/oh-my-agent
Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment.
Audit Frontend Design
hashgraph-online/awesome-codex-plugins
A skill your agent uses when reviewing or changing a React, Next.js, Tailwind, or shadcn interface and you need evidence-backed findings for accessibility, hierarchy, tokens, states, and responsive…
Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
More from crafter-station/petdex
Petdex
crafter-station/petdex
Browse, install, submit, and edit pixel-art pets with the Petdex CLI.
Coss Particles
crafter-station/petdex
Index of all COSS UI particle examples. An agent skill from crafter-station/petdex.
Related
Categories
Questions about Coss
What does Coss do?
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex. Coss is an agent skill from crafter-station/petdex. Helps implement coss UI components correctly.
When should I use Coss?
Coss fits situations like: building UIs with coss primitives (buttons; migrating from shadcn/Radix to coss/Base UI; composing trigger-based overlays; troubleshooting coss component behavior.
How do I install Coss in Claude Code?
Run `npx skills add crafter-station/petdex --skill coss -a claude-code`. Or copy the skill folder (.agents/skills/coss in crafter-station/petdex) into .claude/skills/coss in your project. Claude Code loads it when a task matches its description.
How do I install Coss in Codex?
Run `npx skills add crafter-station/petdex --skill coss -a codex`. Or copy the skill folder (.agents/skills/coss in crafter-station/petdex) into .agents/skills/coss in your project. Codex loads it when a task matches its description.
Can I use Coss in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add crafter-station/petdex --skill coss -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/coss, .gemini/skills/coss, .github/skills/coss and .opencode/skills/coss in your project.
What does Coss need to run?
Going by SKILL.md and its folder, Coss needs the command-line tools its instructions call (npx). Our summary lists: Node.js. Compatibility (from SKILL.md): Requires Tailwind CSS v4 and @base-ui/react. Designed for React projects using the coss component registry..
Does Coss access the network?
SKILL.md names 2 domains. In commands or code: github.com and coss.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.
Is Coss safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Coss use?
Coss is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Coss use?
About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 35k tokens, read only when the agent opens those files.
What are the alternatives to Coss?
Skills that share tags, products or a category with Coss: Nextjs Nextra Starter Distill (pdsuwwz/nextjs-nextra-starter, 318 stars), Nextjs Nextra Starter Distill Zh (pdsuwwz/nextjs-nextra-starter, 318 stars), Shadcn Tailwind UI (LiarMTTT/TavernWeave, 153 stars) and Oma Frontend (first-fluke/oh-my-agent, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Coss?
crafter-station (a GitHub organization) maintains it in crafter-station/petdex, which has 4,212 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on September 28, 2026.
Source: crafter-station/petdex on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.