菜单
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"
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
| name | daub-ui |
| description | 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" |
| allowed-tools | ["Read","Write","Edit","Bash","WebFetch","mcp__daub__generate_ui","mcp__daub__get_component_catalog","mcp__daub__validate_spec","mcp__daub__render_spec"] |
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
<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">
All classes: db- prefix. All CSS variables: --db- prefix.
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')
db-surface--raised / --inset / --presseddb-h1–db-h4, db-body, db-label, db-captiondb-prose / --sm / --lg / --xl / --2xldb-elevation-1 / -2 / -3db-separator / --vertical / --dashed / __labeldirection, gap, justify, align, wrap, containercolumns (2-6), gap, align, container; classes: db-grid--2 through --6, db-gap-3db-hide-mobile, db-show-mobile, db-hide-tablet, db-show-tablet, db-hide-desktop, db-show-desktopdb-sr-only, db-text-muted, db-rounded-*db-btn db-btn--primary / --secondary / --ghost / --sm / --lg / --icon / --loadingdb-btn--icon-danger / --icon-success / --icon-accentdb-btn-group — groups buttons with connected bordersdb-field > db-field__label + db-field__input + db-field__helperdb-input / --sm / --lg / --error (standalone)db-input-group > __addon + db-input + db-btndb-input-icon > db-input-icon__icon + db-input / --rightdb-search > db-search__icon + db-input + db-search__cleardb-textarea / --error (standalone)db-checkbox > db-checkbox__input + db-checkbox__boxdb-radio-group > db-radio > db-radio__input + db-radio__circledb-switch (role="switch", JS-managed)db-slider > db-slider__input + db-slider__valuedb-toggle / --sm (aria-pressed)db-toggle-group — single/multi selectdb-select > db-select__inputdb-custom-select — search, selection, comboboxdb-kbd / --smdb-label / --required / --optionaldb-spinner / --sm / --lg / --xldb-otp > db-otp__input + db-otp__separatordb-tabs > db-tabs__list > db-tabs__tab + db-tabs__paneldb-breadcrumbs > ol > li > adb-pagination > db-pagination__btndb-stepper > db-stepper__step--completed/--active/--pendingdb-nav-menu > db-nav-menu__item / --activedb-navbar > __brand + __nav + __spacer + __actions + __toggle (sticky, mobile hamburger)db-menubar > db-menubar__item + db-menubar__dropdowndb-sidebar > db-sidebar__section > db-sidebar__item / --active / --collapsed / __toggledb-bottom-nav > db-bottom-nav__item / --active / __badge / --alwaysdb-card > db-card__header + db-card__title + db-card__footer / --media (edge-to-edge images)db-table (sortable with data-db-sort on th)db-data-table — sortable, selectable rowsdb-list > db-list__item > db-list__title + db-list__secondarydb-badge / --new / --updated / --warning / --errordb-chip / --red / --green / --blue / --purple / --amber / --pink / --active / __close / data-db-chip-toggledb-avatar db-avatar--md (sm=32px, md=40px, lg=56px)db-avatar-group > db-avatar + db-avatar-group__overflow (overlapping stack)db-calendar — day selection, today highlightdb-chart — CSS-only bar chartdb-carousel > __track + __slide + __dotsdb-aspect / --16-9 / --4-3 / --1-1 / --21-9db-scroll-area / --horizontal / --verticalDAUB.toast('Quick message') or DAUB.toast({ type: 'success', title: 'Done', message: '...' })db-alert db-alert--warning > db-alert__icon + db-alert__contentdb-progress > db-progress__bar style="--db-progress: 65%"db-skeleton--text / --heading / --avatar / --btndb-empty > db-empty__icon + db-empty__title + db-empty__messagedb-tooltip / --top / --bottom / --left / --rightdb-modal-overlay#id[aria-hidden] > db-modal > __header + __body + __footer
JS: DAUB.openModal('id') / DAUB.closeModal('id') / data-db-modal-trigger="id"db-alert-dialog#id > __overlay + __panel > __title + __desc + __actions
JS: DAUB.openAlertDialog('id') / data-action="cancel" auto-closesdb-sheet.db-sheet--right#id > __overlay + __panel > __header + __body
JS: DAUB.openSheet('id') — modifiers: --right / --left / --top / --bottomdb-drawer#id > __overlay + __panel > __handle + __body
JS: DAUB.openDrawer('id') — mobile-friendly bottom paneldb-command#id > __overlay + __panel > __input-wrap + __list
JS: DAUB.openCommand('id') — Ctrl+K / Cmd+K shortcutdb-dropdown > __trigger + __content > __item + __separator + __label
JS auto-initializes click toggle. __content--right for right-aligned. __menu is an alias for __content.db-context-menu — right-click, data-context-menudb-popover / --top / --bottom / --left / --rightdb-hover-card — CSS hover triggerdb-accordion — single/multi mode via data-multidb-collapsible — progressive disclosuredb-resizable > __handle--right / --bottom / --cornerdb-date-picker — wraps Calendar in popoverdb-theme-switcher — toggle button + categorized popover with 21 families + scheme rowdb-stat > db-stat__label + db-stat__value + db-stat__trend / --up / --downdb-chart-card > db-chart-card__header + db-chart-card__bodydb-table--compact, db-table--hover, db-td--number, db-td--actionsDAUB.getColor('primary') — returns current theme's CSS variable value as hexdocument.addEventListener('daub:theme-change', e => e.detail.theme)db-field__input goes on the wrapper element (not just <input>) — applies to input, textarea, select wrappers, or custom control elements.<script src="https://unpkg.com/lucide@latest"></script>). All demos use Lucide.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.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:
generate_ui with a prompt like "Admin dashboard with sidebar, stat cards, and data table. Dracula theme."generate_ui again with existing_spec + modification instructionsvalidate_spec to verify the spec is cleanrender_spec to get a preview URLWithout MCP (fallback): Build HTML manually using the component classes documented above, or point the LLM at https://daub.dev/llms.txt.
For complete HTML examples: https://daub.dev/llms.txt
For json-render (Vercel Generative UI) integration: see the catalog+registry recipe in llms.txt.