How do I install the Daub UI skill?

Run npx skillmds@latest add sliday/daub-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Daub UI skill do?

Use when building UI with DAUB, the considered CSS component library from daub.dev. Trigger phrases: "daub", "daub.dev", "considered components", "db- components", "tactile UI kit" It is listed under Design & Media on SkillMD.

Is Daub UI safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Daub UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Daub UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Daub UI?

sliday (@sliday) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Daub UI by sliday — Agent Skill

Name: Daub UI
Author: sliday

DAUB UI — Component Library

DAUB is a drop-in CSS + JS library with 84 considered components and 21 theme families (42 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)

<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:

<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:

npm install daub-ui

Optional fonts (falls back gracefully):

<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 (21): default, grunge, solarized, ink, ember, bone, dracula, nord, one-dark, monokai, gruvbox, night-owl, github, catppuccin, tokyo-night, material, monospace, 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
Flex: db-flex — flexbox utility; combine with db-gap-*
Container: db-container (960px) / --wide (1200px) / --narrow (640px)
Divider: db-divider — horizontal rule
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 — segmented control (inset track, raised active segment); 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
Checkbox Group: db-checkbox-group > __label + db-checkbox items + __helper
Number Field: db-number-field > db-number-field__btn steppers + db-input[type=number]
Fieldset: db-fieldset > db-fieldset__legend + db-fieldset__content
Accent Picker: db-accent-picker > db-accent-picker__dot[data-accent] — JS sets accent color

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 — static table styling (use Data Table for sorting)
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%"
Meter: db-meter role="meter" > db-meter__bar — set --db-meter: 72%
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 21 families + scheme row
Frame: db-frame > __header + __body — embedded previews and panels
Group: db-group / --attached — generic control grouping
Toolbar: db-toolbar > __group + __separator
Preview Card: db-preview-card > __trigger + __content > __title + __desc

Dashboard Primitives

Stat Card: db-stat > db-stat__label + db-stat__value + db-stat__change / --up / --down
Chart Card: db-chart-card > db-chart-card__header + db-chart-card__body
Numeric Tables: db-table--numeric / db-data-table--numeric — tabular-nums alignment

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 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):

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:

Call generate_ui with a prompt like "Admin dashboard with sidebar, stat cards, and data table. Dracula theme."
The tool returns a flat JSON spec — iterate by calling generate_ui again with existing_spec + modification instructions
Call validate_spec to verify the spec is clean
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.

Daub UI

File contents

DAUB UI — Component Library

Include (CDN)

Class Convention

Themes

Components Quick Reference

Foundations

Controls

Navigation

Data Display

Feedback

Overlays (always use JS API — handles backdrop, focus trap, scroll lock)

Layout & Utility

Dashboard Primitives

JS Helpers

Notes

MCP Server

Full Docs

Frequently asked questions

Daub UI

File contents

DAUB UI — Component Library

Include (CDN)

Class Convention

Themes

Components Quick Reference

Foundations

Controls

Navigation

Data Display

Feedback

Overlays (always use JS API — handles backdrop, focus trap, scroll lock)

Layout & Utility

Dashboard Primitives

JS Helpers

Notes

MCP Server

Full Docs

Related skills

Frequently asked questions

How do I install the Daub UI skill?

What does the Daub UI skill do?

Is Daub UI safe to use?

Which AI agents work with Daub UI?

Is Daub UI free to use?

Who published Daub UI?