diff --git a/apps/ui/content/docs/(root)/get-started.mdx b/apps/ui/content/docs/(root)/get-started.mdx index 74cc0342b..a50e2afd5 100644 --- a/apps/ui/content/docs/(root)/get-started.mdx +++ b/apps/ui/content/docs/(root)/get-started.mdx @@ -124,5 +124,6 @@ For developers migrating from **Radix UI**, many of our **UI primitives** includ We structure the documentation to make the components **AI-friendly**, so language models can understand, reason about, and modify them. To support this, we include: +- **[Agent Skills](/ui/docs/skills)** — Install coss knowledge directly into your AI assistant with `npx skills add cosscom/coss`. Covers all 53 primitives, styling conventions, migration patterns, and particle examples. - A [llms.txt](/ui/llms.txt) file that provides a map of the documentation and component structure for your AI agent. - A **Copy Markdown** button on every page, so you can easily share content or feed it to your AI workflows. diff --git a/apps/ui/content/docs/(root)/meta.json b/apps/ui/content/docs/(root)/meta.json index 87e7ba596..b0cbf2ea6 100644 --- a/apps/ui/content/docs/(root)/meta.json +++ b/apps/ui/content/docs/(root)/meta.json @@ -1,4 +1,11 @@ { - "pages": ["index", "get-started", "styling", "radix-migration", "roadmap"], + "pages": [ + "index", + "get-started", + "styling", + "radix-migration", + "skills", + "roadmap" + ], "title": "Overview" } diff --git a/apps/ui/content/docs/(root)/roadmap.mdx b/apps/ui/content/docs/(root)/roadmap.mdx index 656f3b26d..3bed6bbd6 100644 --- a/apps/ui/content/docs/(root)/roadmap.mdx +++ b/apps/ui/content/docs/(root)/roadmap.mdx @@ -16,7 +16,7 @@ Origin UI offered a large collection of 600+ ready-to-use UI components. With th ## Current Status -- **40+ UI primitives** already available, with more on the way. +- **50+ UI primitives** already available, with more on the way. - A **growing set of particles**, progressively expanding to match and surpass the current Origin UI collection. ## What’s Next diff --git a/apps/ui/content/docs/(root)/skills.mdx b/apps/ui/content/docs/(root)/skills.mdx new file mode 100644 index 000000000..c56ba2aca --- /dev/null +++ b/apps/ui/content/docs/(root)/skills.mdx @@ -0,0 +1,58 @@ +--- +title: Skills +description: Give your AI assistant deep knowledge of coss ui components, patterns, and best practices. +--- + +Skills provide AI coding assistants with structured knowledge about **coss ui** — component APIs, composition patterns, styling conventions, migration rules, and common pitfalls. When installed, your assistant knows how to use coss primitives correctly without guessing. + +For example, you can ask your assistant to: + +- _"Add a settings dialog with a form and save/cancel buttons."_ +- _"Add a select with grouped options and a search filter."_ +- _"Migrate this shadcn dropdown menu to coss."_ +- _"Build a toast notification for form submission errors."_ + +## Install + +```bash +npx skills add cosscom/coss +``` + +This installs the coss skill into your project. Once installed, your AI assistant automatically loads it when working with coss ui components. + +Learn more about the skills ecosystem at [skills.sh](https://skills.sh). + +## What's Included + +The skill covers the full coss ui surface: + +### Component Knowledge + +Reference guides for all primitives — imports, minimal patterns, inline code examples, composition rules, and common pitfalls. The assistant knows when to use Dialog vs Sheet vs Drawer, how to compose trigger-based overlays, and how to structure forms with Field. + +### Styling Conventions + +Tailwind v4 token usage, semantic color system, icon sizing rules, `data-slot` selectors, `--alpha()` syntax, and the font variable contract (`--font-sans`, `--font-mono`, `--font-heading`). + +### Migration Patterns + +Rules for migrating from shadcn/Radix to coss/Base UI — `asChild` to `render`, `onSelect` to `onClick`, Select items-first pattern, ToggleGroup `type` to `multiple`, and Slider scalar values. + +### CLI and Registry + +Full reference for installing components via the shadcn CLI, discovery fallbacks, and manual install paths. + +### Particle Examples + +The skill references the particle catalog — real-world composition examples for every primitive — so the assistant can produce production-realistic code, not just minimal stubs. + +## How It Works + +1. **Skill activation** — Your AI agent detects the installed skill files in your project. +2. **Progressive loading** — The root `SKILL.md` provides core rules and a component registry index. Detailed per-component guides and rule references are loaded on demand when the task requires them. +3. **Pattern enforcement** — The assistant follows coss composition rules: `render` prop for trigger composition, `DialogHeader`/`DialogPanel`/`DialogFooter` section structure, `variant="ghost"` for cancel buttons, and correct Base UI APIs. +4. **Example-driven output** — Before generating code, the assistant consults particle examples to match real coss patterns. + +## Supported Agents + +Skills work with any agent that supports the Agent Skills specification, including Claude Code, Cursor, Codex, Cline, Windsurf, GitHub Copilot, and many more. diff --git a/apps/ui/lib/docs.ts b/apps/ui/lib/docs.ts index 0da2ce5b6..0ee260c86 100644 --- a/apps/ui/lib/docs.ts +++ b/apps/ui/lib/docs.ts @@ -1,5 +1,6 @@ export const PAGES_NEW = [ // "/docs/components/{component-name}", + "/docs/skills", "/docs/components/drawer", "/docs/components/input-otp", ]; diff --git a/apps/ui/public/r/textarea.json b/apps/ui/public/r/textarea.json index b9668e010..8188d2334 100644 --- a/apps/ui/public/r/textarea.json +++ b/apps/ui/public/r/textarea.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/default/ui/textarea.tsx", - "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type TextareaProps = React.ComponentPropsWithoutRef<\"textarea\"> &\n React.RefAttributes & {\n size?: \"sm\" | \"default\" | \"lg\" | number;\n unstyled?: boolean;\n };\n\nexport function Textarea({\n className,\n size = \"default\",\n unstyled = false,\n ref,\n ...props\n}: TextareaProps): React.ReactElement {\n return (\n \n ) => (\n \n )}\n />\n \n );\n}\n\nexport { FieldPrimitive };\n", + "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type TextareaProps = React.ComponentPropsWithoutRef<\"textarea\"> &\n React.RefAttributes & {\n size?: \"sm\" | \"default\" | \"lg\" | number;\n unstyled?: boolean;\n };\n\nexport function Textarea({\n className,\n size = \"default\",\n unstyled = false,\n ref,\n ...props\n}: TextareaProps): React.ReactElement {\n return (\n \n ) => (\n \n )}\n />\n \n );\n}\n\nexport { FieldPrimitive };\n", "type": "registry:ui" } ], diff --git a/apps/ui/registry/default/ui/textarea.tsx b/apps/ui/registry/default/ui/textarea.tsx index 4608332a9..0d0a52221 100644 --- a/apps/ui/registry/default/ui/textarea.tsx +++ b/apps/ui/registry/default/ui/textarea.tsx @@ -6,7 +6,7 @@ import type * as React from "react"; import { cn } from "@/registry/default/lib/utils"; export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> & - React.RefAttributes & { + React.RefAttributes & { size?: "sm" | "default" | "lg" | number; unstyled?: boolean; }; diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx index cb65f873e..36c7e737a 100644 --- a/packages/ui/src/components/textarea.tsx +++ b/packages/ui/src/components/textarea.tsx @@ -6,7 +6,7 @@ import { cn } from "@coss/ui/lib/utils"; import type * as React from "react"; export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> & - React.RefAttributes & { + React.RefAttributes & { size?: "sm" | "default" | "lg" | number; unstyled?: boolean; };