daub-ui
Enables AI agents to build and manage user interfaces using the DAUB CSS component library, providing access to its components, themes, and UI generation capabilities.
About this skill
The DAUB UI skill empowers AI coding agents to efficiently construct user interfaces leveraging the DAUB CSS component library. It provides programmatic access to DAUB's extensive collection of 73 components and 20 theme families, along with utilities to generate, validate, and render UI specifications directly. This enables agents to build visually consistent and high-quality front-end experiences. This skill is designed for scenarios where an AI needs to quickly scaffold, modify, or analyze UI components within a web project. It allows the agent to handle tasks such as incorporating specific DAUB components, applying one of the many available themes (e.g., 'dark', 'solarized', 'ink'), and managing accent colors. By integrating with DAUB's machine-readable component catalog and TypeScript declarations, the AI can ensure accurate and efficient UI construction. Users would benefit from this skill by enabling their AI assistant to rapidly prototype UIs, ensure design consistency using DAUB's "considered" components, and reduce the manual effort involved in front-end development. It transforms high-level UI descriptions into concrete, DAUB-based implementations, making it ideal for accelerating web project development and maintaining a cohesive visual style.
Best use case
The primary use case is to enable AI agents to build, modify, and manage user interfaces using the DAUB CSS component library. Web developers and AI-powered development tools benefit most by leveraging this skill for rapid UI prototyping, consistent design implementation, and automated front-end component integration.
Enables AI agents to build and manage user interfaces using the DAUB CSS component library, providing access to its components, themes, and UI generation capabilities.
The user should expect well-structured HTML and CSS leveraging DAUB components, or a clear output from DAUB-specific queries (e.g., component catalog, validated spec).
Practical example
Example input
Create a responsive header for a website using DAUB, including a logo, navigation links, and a dark theme toggle.
Example output
<header class="db-header db-container" data-theme="dark">
<a href="#" class="db-logo">My Site</a>
<nav class="db-nav">
<a href="#" class="db-nav-link">Home</a>
<a href="#" class="db-nav-link">About</a>
<a href="#" class="db-nav-link">Contact</a>
</nav>
<button class="db-button" onclick="DAUB.cycleTheme()">Toggle Theme</button>
</header>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.css">
<script src="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.js"></script>When to use this skill
- When instructed to build a UI using DAUB or "db- components."
- When aiming for a "considered" or "tactile" UI design with pre-built components.
- When needing to generate, validate, or render DAUB UI specifications.
- When integrating a comprehensive CSS + JS component library into a web project.
When not to use this skill
- When the project does not involve front-end UI development.
- When another specific UI framework (e.g., Bootstrap, Tailwind CSS) is already in use.
- When highly custom, unique CSS styling is preferred over a component library.
- When the project is not web-based (e.g., backend-only, desktop apps).
How daub-ui Compares
| Feature / Agent | daub-ui | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
Enables AI agents to build and manage user interfaces using the DAUB CSS component library, providing access to its components, themes, and UI generation capabilities.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Cursor vs Codex for AI Workflows
Compare Cursor and Codex for AI coding workflows, repository assistance, debugging, refactoring, and reusable developer skills.
AI Agents for Startups
Explore AI agent skills for startup validation, product research, growth experiments, documentation, and fast execution with small teams.
SKILL.md Source
# DAUB UI — Component Library
DAUB is a drop-in CSS + JS library with 73 considered components and 20 theme families (40 variants). Thoughtfully composed, no ceremony required.
npm: `daub-ui` | CDN: `cdn.jsdelivr.net/npm/daub-ui@latest/daub.css`
Machine-readable component reference: `https://daub.dev/components.json`
TypeScript declarations: `https://daub.dev/daub.d.ts`
## Include (CDN)
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.css">
<script src="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.js"></script>
```
Alternative CDN:
```html
<link rel="stylesheet" href="https://unpkg.com/daub-ui@latest/daub.css">
<script src="https://unpkg.com/daub-ui@latest/daub.js"></script>
```
npm install:
```bash
npm install daub-ui
```
Optional fonts (falls back gracefully):
```html
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@300..900&family=Source+Serif+4:wght@300..900&family=Cabin:wght@400;500;600;700&display=swap" rel="stylesheet">
```
## Class Convention
All classes: `db-` prefix. All CSS variables: `--db-` prefix.
## Themes
Set: `<html data-theme="dark">`
Family API: `DAUB.setFamily('ink')` / `DAUB.setScheme('dark')` / `DAUB.getFamily()`
Direct API: `DAUB.setTheme('dark')` / `DAUB.cycleTheme()` / `DAUB.getTheme()`
Accent: `DAUB.setAccent('#6B7C3E')` / `DAUB.resetAccent()`
Families (20): default, grunge, solarized, ink, ember, bone, dracula, nord, one-dark, monokai, gruvbox, night-owl, github, catppuccin, tokyo-night, material, synthwave, shades-of-purple, ayu, horizon (each with light + dark)
Categories: originals, classics, modern, trending
Category API: `DAUB.THEME_CATEGORIES`, `DAUB.getCategory('dracula')`
## Components Quick Reference
### Foundations
- **Surface**: `db-surface--raised` / `--inset` / `--pressed`
- **Typography**: `db-h1`–`db-h4`, `db-body`, `db-label`, `db-caption`
- **Prose**: `db-prose` / `--sm` / `--lg` / `--xl` / `--2xl`
- **Elevation**: `db-elevation-1` / `-2` / `-3`
- **Separator**: `db-separator` / `--vertical` / `--dashed` / `__label`
- **Stack**: flexbox layout — `direction`, `gap`, `justify`, `align`, `wrap`, `container`
- **Grid**: CSS grid layout — `columns` (2-6), `gap`, `align`, `container`; classes: `db-grid--2` through `--6`, `db-gap-3`
- **Responsive**: `db-hide-mobile`, `db-show-mobile`, `db-hide-tablet`, `db-show-tablet`, `db-hide-desktop`, `db-show-desktop`
- **Utilities**: `db-sr-only`, `db-text-muted`, `db-rounded-*`
### Controls
- **Button**: `db-btn db-btn--primary` / `--secondary` / `--ghost` / `--sm` / `--lg` / `--icon` / `--loading`
- **Icon Button Colors**: `db-btn--icon-danger` / `--icon-success` / `--icon-accent`
- **Button Group**: `db-btn-group` — groups buttons with connected borders
- **Field**: `db-field` > `db-field__label` + `db-field__input` + `db-field__helper`
- **Input**: `db-input` / `--sm` / `--lg` / `--error` (standalone)
- **Input Group**: `db-input-group` > `__addon` + `db-input` + `db-btn`
- **Input Icon**: `db-input-icon` > `db-input-icon__icon` + `db-input` / `--right`
- **Search**: `db-search` > `db-search__icon` + `db-input` + `db-search__clear`
- **Textarea**: `db-textarea` / `--error` (standalone)
- **Checkbox**: `db-checkbox` > `db-checkbox__input` + `db-checkbox__box`
- **Radio**: `db-radio-group` > `db-radio` > `db-radio__input` + `db-radio__circle`
- **Switch**: `db-switch` (role="switch", JS-managed)
- **Slider**: `db-slider` > `db-slider__input` + `db-slider__value`
- **Toggle**: `db-toggle` / `--sm` (aria-pressed)
- **Toggle Group**: `db-toggle-group` — single/multi select
- **Native Select**: `db-select` > `db-select__input`
- **Custom Select**: `db-custom-select` — search, selection, combobox
- **Kbd**: `db-kbd` / `--sm`
- **Label**: `db-label` / `--required` / `--optional`
- **Spinner**: `db-spinner` / `--sm` / `--lg` / `--xl`
- **Input OTP**: `db-otp` > `db-otp__input` + `db-otp__separator`
### Navigation
- **Tabs**: `db-tabs` > `db-tabs__list` > `db-tabs__tab` + `db-tabs__panel`
- **Breadcrumbs**: `db-breadcrumbs` > ol > li > a
- **Pagination**: `db-pagination` > `db-pagination__btn`
- **Stepper**: `db-stepper` > `db-stepper__step--completed/--active/--pending`
- **Nav Menu**: `db-nav-menu` > `db-nav-menu__item` / `--active`
- **Navbar**: `db-navbar` > `__brand` + `__nav` + `__spacer` + `__actions` + `__toggle` (sticky, mobile hamburger)
- **Menubar**: `db-menubar` > `db-menubar__item` + `db-menubar__dropdown`
- **Sidebar**: `db-sidebar` > `db-sidebar__section` > `db-sidebar__item` / `--active` / `--collapsed` / `__toggle`
- **Bottom Nav**: `db-bottom-nav` > `db-bottom-nav__item` / `--active` / `__badge` / `--always`
### Data Display
- **Card**: `db-card` > `db-card__header` + `db-card__title` + `db-card__footer` / `--media` (edge-to-edge images)
- **Table**: `db-table` (sortable with `data-db-sort` on th)
- **Data Table**: `db-data-table` — sortable, selectable rows
- **List**: `db-list` > `db-list__item` > `db-list__title` + `db-list__secondary`
- **Badge**: `db-badge` / `--new` / `--updated` / `--warning` / `--error`
- **Chip**: `db-chip` / `--red` / `--green` / `--blue` / `--purple` / `--amber` / `--pink` / `--active` / `__close` / `data-db-chip-toggle`
- **Avatar**: `db-avatar db-avatar--md` (sm=32px, md=40px, lg=56px)
- **Avatar Group**: `db-avatar-group` > `db-avatar` + `db-avatar-group__overflow` (overlapping stack)
- **Calendar**: `db-calendar` — day selection, today highlight
- **Chart**: `db-chart` — CSS-only bar chart
- **Carousel**: `db-carousel` > `__track` + `__slide` + `__dots`
- **Aspect Ratio**: `db-aspect` / `--16-9` / `--4-3` / `--1-1` / `--21-9`
- **Scroll Area**: `db-scroll-area` / `--horizontal` / `--vertical`
### Feedback
- **Toast**: `DAUB.toast('Quick message')` or `DAUB.toast({ type: 'success', title: 'Done', message: '...' })`
- **Alert**: `db-alert db-alert--warning` > `db-alert__icon` + `db-alert__content`
- **Progress**: `db-progress` > `db-progress__bar` style="--db-progress: 65%"
- **Skeleton**: `db-skeleton--text` / `--heading` / `--avatar` / `--btn`
- **Empty State**: `db-empty` > `db-empty__icon` + `db-empty__title` + `db-empty__message`
- **Tooltip**: `db-tooltip` / `--top` / `--bottom` / `--left` / `--right`
### Overlays (always use JS API — handles backdrop, focus trap, scroll lock)
- **Modal**: `db-modal-overlay#id[aria-hidden] > db-modal > __header + __body + __footer`
JS: `DAUB.openModal('id')` / `DAUB.closeModal('id')` / `data-db-modal-trigger="id"`
- **Alert Dialog**: `db-alert-dialog#id > __overlay + __panel > __title + __desc + __actions`
JS: `DAUB.openAlertDialog('id')` / `data-action="cancel"` auto-closes
- **Sheet**: `db-sheet.db-sheet--right#id > __overlay + __panel > __header + __body`
JS: `DAUB.openSheet('id')` — modifiers: `--right` / `--left` / `--top` / `--bottom`
- **Drawer**: `db-drawer#id > __overlay + __panel > __handle + __body`
JS: `DAUB.openDrawer('id')` — mobile-friendly bottom panel
- **Command Palette**: `db-command#id > __overlay + __panel > __input-wrap + __list`
JS: `DAUB.openCommand('id')` — Ctrl+K / Cmd+K shortcut
- **Dropdown Menu**: `db-dropdown > __trigger + __content > __item + __separator + __label`
JS auto-initializes click toggle. `__content--right` for right-aligned. `__menu` is an alias for `__content`.
- **Context Menu**: `db-context-menu` — right-click, `data-context-menu`
- **Popover**: `db-popover` / `--top` / `--bottom` / `--left` / `--right`
- **Hover Card**: `db-hover-card` — CSS hover trigger
### Layout & Utility
- **Accordion**: `db-accordion` — single/multi mode via `data-multi`
- **Collapsible**: `db-collapsible` — progressive disclosure
- **Resizable**: `db-resizable` > `__handle--right` / `--bottom` / `--corner`
- **Date Picker**: `db-date-picker` — wraps Calendar in popover
- **Theme Switcher**: `db-theme-switcher` — toggle button + categorized popover with 20 families + scheme row
### Dashboard Primitives
- **Stat Card**: `db-stat` > `db-stat__label` + `db-stat__value` + `db-stat__trend` / `--up` / `--down`
- **Chart Card**: `db-chart-card` > `db-chart-card__header` + `db-chart-card__body`
- **Table Utilities**: `db-table--compact`, `db-table--hover`, `db-td--number`, `db-td--actions`
### JS Helpers
- **getColor**: `DAUB.getColor('primary')` — returns current theme's CSS variable value as hex
- **Theme Events**: `document.addEventListener('daub:theme-change', e => e.detail.theme)`
## Notes
- **Field inputs**: `db-field__input` goes on the wrapper element (not just `<input>`) — applies to input, textarea, select wrappers, or custom control elements.
- **Icons**: DAUB pairs well with [Lucide](https://lucide.dev) icons (`<script src="https://unpkg.com/lucide@latest"></script>`). All demos use Lucide.
- **Overlay BEM**: Overlay components use hyphenated block names (e.g. `db-modal-overlay`, `db-alert-dialog`) with `__` children (e.g. `__panel`, `__body`). The outer wrapper gets the `id` and `aria-hidden` attributes that JS targets.
## MCP Server
DAUB has a remote MCP server — if it's connected, use the tools instead of manually building HTML.
**Setup** (one-time):
```bash
claude mcp add daub --transport http https://daub.dev/api/mcp
```
**Tools available:**
| Tool | When to use |
|------|-------------|
| `generate_ui` | Generate a full DAUB spec from a natural language prompt. Returns a JSON spec with components, props, layout, and theme. |
| `get_component_catalog` | Look up available components, their props, valid themes, and the spec format. Use before hand-building specs. |
| `validate_spec` | Check a spec for broken references, unknown types, missing children. Run after editing specs manually. |
| `render_spec` | Get a playground preview URL for any spec. |
**Workflow with MCP:**
1. Call `generate_ui` with a prompt like "Admin dashboard with sidebar, stat cards, and data table. Dracula theme."
2. The tool returns a flat JSON spec — iterate by calling `generate_ui` again with `existing_spec` + modification instructions
3. Call `validate_spec` to verify the spec is clean
4. Call `render_spec` to get a preview URL
**Without MCP** (fallback): Build HTML manually using the component classes documented above, or point the LLM at `https://daub.dev/llms.txt`.
## Full Docs
For complete HTML examples: `https://daub.dev/llms.txt`
For json-render (Vercel Generative UI) integration: see the catalog+registry recipe in `llms.txt`.Related Skills
laravel-expert
Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and modern standards (Laravel 10/11+).
debug-nw
Debug a Nativewind v5 setup issue. Walks through common configuration problems with metro, babel, postcss, and dependencies.
Go Production Engineering
You are a Go production engineering expert. Follow this system for every Go project — from architecture decisions through production deployment. Apply phases sequentially for new projects; use individual phases as needed for existing codebases.
Database Engineering Mastery
> Complete database design, optimization, migration, and operations system. From schema design to production monitoring — covers PostgreSQL, MySQL, SQLite, and general SQL patterns.
afrexai-code-reviewer
Enterprise-grade code review agent. Reviews PRs, diffs, or code files for security vulnerabilities, performance issues, error handling gaps, architecture smells, and test coverage. Works with any language, any repo, no dependencies required.
API Documentation Generator
Generate production-ready API documentation from endpoint descriptions. Outputs OpenAPI 3.0, markdown reference docs, and SDK quickstart guides.
bili-rs
Development skill for bili-rs, a Rust CLI tool for Bilibili (B站). Use when implementing features, fixing bugs, or extending the bilibili-cli-rust codebase. Provides architecture conventions, API endpoints, coding patterns, and project-specific constraints. Triggers on tasks involving adding CLI commands, calling Bilibili APIs, handling authentication, implementing output formatting, or working with the layered cli/commands/client/payloads architecture.
Puppeteer
Automate Chrome and Chromium with Puppeteer for scraping, testing, screenshots, and browser workflows.
pharaoh
Codebase knowledge graph with 23 development workflow skills. Query architecture, dependencies, blast radius, dead code, and test coverage via MCP. Requires GitHub App installation (read-only repo access) and OAuth authentication. Connects to external MCP server at mcp.pharaoh.so.
git-commit-helper
Generate standardized git commit messages following Conventional Commits format. Use this skill when the user asks to commit code, write a commit message, or create a git commit. Enforces team conventions for type prefixes, scope naming, message length, and breaking change documentation.
ask-claude
Delegate a task to Claude Code CLI and immediately report the result back in chat. Supports persistent sessions with full context memory. Safe execution: no data exfiltration, no external calls, file operations confined to workspace. Use when the user asks to run Claude, delegate a coding task, continue a previous Claude session, or any task benefiting from Claude Code's tools (file editing, code analysis, bash, etc.).
bnbchain-mcp
Interact with the BNB Chain Model Context Protocol (MCP) server. Blocks, contracts, tokens, NFTs, wallet, Greenfield, and ERC-8004 agent tools. Use npx @bnb-chain/mcp@latest or read the official skill page.