Back to Details

coss

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

coss ui

coss ui

coss ui is a component library built on Base UI with a shadcn-like developer experience plus a large particle catalog.
coss ui 是基于Base UI构建的组件库，具备类shadcn的开发者体验，同时拥有丰富的粒子组件库。

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
使用本技能可以：
  • 为UI任务选择合适的coss基础组件
  • 编写正确的coss使用代码（导入、组合、属性配置）
  • 避免从shadcn/Radix迁移时的常见错误
  • 参考粒子组件示例，生成实用的、贴近生产环境的实现模式

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
  • coss组件文档：
    apps/ui/content/docs/components/*.mdx
    • 地址：
      https://github.com/cosscom/coss/tree/main/apps/ui/content/docs/components
  • coss粒子组件示例：
    apps/ui/registry/default/particles/p-*.tsx
    • 地址：
      https://github.com/cosscom/coss/tree/main/apps/ui/registry/default/particles
  • coss粒子组件库：
    https://coss.com/ui/particles
  • 面向Agent的文档映射：
    https://coss.com/ui/llms.txt

Out of scope

不适用范围

  • Maintaining coss monorepo internals/build pipelines.
  • Editing registry internals unless explicitly requested.
  • 维护coss单体仓库的内部逻辑/构建流水线。
  • 编辑注册表内部内容（除非明确要求）。

Principles for agent output

Agent输出原则

  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.
  1. 优先使用现有基础组件和粒子组件，而非自定义标记。
  2. 优先选择组件组合，而非重新实现自定义行为。
  3. 严格遵循文档中的coss命名规范和API。
  4. 示例需符合无障碍访问要求，且贴近生产实际。
  5. 优先使用简洁代码，与coss文档/粒子组件的规范保持一致。
  6. 在coss示例和设置指导中默认采用Tailwind CSS v4规范。

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 
    *Primitive
    exports 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
返回coss代码前必须遵守：
  • 不得自定义coss API，需先对照组件文档进行验证。
  • 对于基于触发器的基础组件（Dialog、Menu、Select、Popover、Tooltip），需遵循各组件文档中规定的触发器/内容层级和组合API；不得混用不同组件的实现模式。
  • 保留无障碍访问标签和错误语义。
  • 查阅基础组件的专属指南，了解组件的不变约束和边缘情况。
  • 手动安装指导需包含所有必需的依赖项以及导入语句中引用的本地组件文件。
  • 优先使用带样式的coss导出组件；仅在自定义组合/样式需求时使用
    *Primitive
    导出。
规则参考（当任务涉及以下领域时按需查阅）：
  • ./references/rules/styling.md
    —— Tailwind令牌、图标规范、data-slot选择器
  • ./references/rules/forms.md
    —— 字段组合、验证、输入模式
  • ./references/rules/composition.md
    —— 触发器/弹出层层级、分组控件
  • ./references/rules/migration.md
    —— 从shadcn/Radix到coss/Base UI的迁移模式

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
所有53个基础组件都有对应的参考指南，路径为
./references/primitives/<name>.md
。如需为任务选择合适的组件，请查阅组件注册表索引：
  • ./references/component-registry.md

Usage workflow

使用流程

  1. Identify user intent (single primitive, composed flow, form flow, overlay flow, feedback flow).
  2. Consult 
    references/component-registry.md
    to identify candidate primitives.
  3. Select primitives from coss docs first; avoid custom fallback unless needed.
  4. 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
    ).
  5. Write minimal code using documented imports/props.
  6. Self-check accessibility and composition invariants.
  1. 明确用户意图（单个基础组件、组合流程、表单流程、浮层流程、反馈流程）。
  2. 查阅
    references/component-registry.md
    确定候选基础组件。
  3. 优先从coss文档中选择组件；除非必要，避免使用自定义替代方案。
  4. 至少参考一个粒子组件示例，了解实用的组合模式。粒子组件文件路径为
    apps/ui/registry/default/particles/p-<name>-<N>.tsx
    （例如
    p-dialog-1.tsx
    ）。
  5. 使用文档中规定的导入方式和属性编写最简代码。
  6. 自行检查无障碍访问和组件组合的约束条件。

Installation reference

安装参考

See 
./references/cli.md
for full install/discovery workflow.
Quick CLI pattern:
bash
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
完整的安装/查找流程请查阅
./references/cli.md
。
快速CLI安装方式：
bash
npx shadcn@latest add @coss/<component>
快速手动安装方式：
  • 安装组件文档页面中列出的所有必需依赖项
  • 复制所需的组件文件
  • 更新导入语句以匹配目标应用的别名设置

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
每个基础组件都有对应的参考指南，路径为
./references/primitives/<name>.md
，内容包括导入方式、最简示例、内嵌代码示例、常见陷阱以及粒子组件参考。请通过组件注册表查找对应的文件。
高风险基础组件（建议先阅读这些指南——它们存在最多的组合陷阱）：
  • ./references/primitives/dialog.md
    —— 模态浮层、对话框内嵌表单、响应式对话框/侧边栏
  • ./references/primitives/menu.md
    —— 下拉操作、复选框/单选框选项、子菜单
  • ./references/primitives/select.md
    —— 选项优先模式、多选、对象值、分组
  • ./references/primitives/form.md
    —— 字段组合、验证、提交
  • ./references/primitives/input-group.md
    —— 附加组件、DOM顺序约束、文本域布局
  • ./references/primitives/toast.md
    —— toastManager（非Sonner）、锚定提示框、提供者

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)
返回代码前需确认：
  • 导入语句和属性与coss文档一致
  • 组件组合结构对所选基础组件有效
  • 包含无障碍访问支持和明确的控件类型（
    button
    、
    input
    等）
  • 对迁移敏感的流程已验证（类型/语法检查、键盘/无障碍行为，以及对SSR敏感的基础组件如Select/Command）