{'>'}_
English 繁體中文 日本語 한국어 Deutsch Español Français
Login

|

36 stars
2 forks
HTML
18 views
View on GitHub Add to Favorites

SKILL.md

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

<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:[email protected]&family=Source+Serif+4:[email protected]&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 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:

  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.