- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Date Picker
- Desktop Window
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Frame
- Heading
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Live Waveform
- Marker
- Menubar
- Message
- Message Scroller
- Meter
- Meter Ring
- Native Select
- Navigation Menu
- NumberCount
- Pagination
- Popover
- Progress
- Progress Ring
- Questionnaire
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Spinner
- Stepper
- Switch
- Table
- Tabs
- Textarea
- Timeline
- Toast
- Toggle
- Toggle Group
- Tooltip
Give your AI assistant project-aware knowledge of Ondo UI components, Compositions, Base UI patterns, and registry workflows.
The Ondo UI Skill gives coding agents the same component, Composition, CLI, theme, and registry conventions documented on this site. It reads the current project before suggesting code, so framework settings, aliases, installed files, and the configured icon library shape the result.
Try prompts such as:
- Build a profile form with Ondo Field components and accessible validation.
- Create a metrics dashboard using Cards, NumberCount, and NumberBadge.
- Use the EmptyView Composition for a project list with no results.
- Build a streaming chat with Ondo message and attachment components.
Install#
Install the Skill directly from the Ondo UI GitHub repository:
bunx --bun skills add douinc/ondo-ui
Select ondo-ui when the installer asks which Skill to add. The Skill is
versioned with the repository and is separate from the @dou.so/ondo-ui npm
CLI package.
What's included#
- Project context — framework, RSC mode, aliases, Tailwind version, global CSS path, icon library, installed component files, and registry mappings.
- CLI workflows — framework-aware initialization, registry search, installation previews, diffs, documentation links, and item inspection.
- Components and Compositions — guidance for selecting reusable primitives and higher-level patterns such as EmptyView and NumberBadge.
- Base UI patterns —
rendercomposition, value shapes, overlay accessibility, forms, and group structure. - Theming — Ondo semantic tokens, Tailwind conventions, Pretendard, and Monaspace Neon.
- Registry authoring — source and built payloads, item types, file targets,
and namespaced
@ondo-uidependencies. - MCP — shadcn MCP setup and prompts that target the
@ondo-uiregistry.
How it works#
- The agent detects an Ondo UI task and loads the repository-hosted Skill.
- It runs
bunx --bun @dou.so/ondo-ui@latest info --jsonto inspect the target project instead of assuming its setup. - It applies the Base UI, styling, form, icon, composition, and chat patterns relevant to the request.
- It searches and views
@ondo-uiitems before creating equivalent custom UI. - It previews installations with
add --dry-runoradd --diff, then reviews the generated source after installation.
The Skill provides instructions and project awareness. Registry discovery and installation still use the Ondo CLI and the shadcn registry tooling.