sliday/daub-ui
/SKILL.md
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"
$ install --global
skillsauthnpx skillsauth add sliday/daub daub-uiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 12, 2026, 5:04 AM214.3s330 files scanned
SKILL.md
- name:
- daub-ui
- description:
- |
- Trigger phrases:
- daub", "daub.dev", "considered components", "db- components", "tactile UI kit
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:[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 (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--2through--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 withdata-db-sorton 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')orDAUB.toast({ type: 'success', title: 'Done', message: '...' }) - Alert:
db-alert db-alert--warning>db-alert__icon+db-alert__content - Progress:
db-progress>db-progress__barstyle="--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 + __footerJS:DAUB.openModal('id')/DAUB.closeModal('id')/data-db-modal-trigger="id" - Alert Dialog:
db-alert-dialog#id > __overlay + __panel > __title + __desc + __actionsJS:DAUB.openAlertDialog('id')/data-action="cancel"auto-closes - Sheet:
db-sheet.db-sheet--right#id > __overlay + __panel > __header + __bodyJS:DAUB.openSheet('id')— modifiers:--right/--left/--top/--bottom - Drawer:
db-drawer#id > __overlay + __panel > __handle + __bodyJS:DAUB.openDrawer('id')— mobile-friendly bottom panel - Command Palette:
db-command#id > __overlay + __panel > __input-wrap + __listJS:DAUB.openCommand('id')— Ctrl+K / Cmd+K shortcut - Dropdown Menu:
db-dropdown > __trigger + __content > __item + __separator + __labelJS auto-initializes click toggle.__content--rightfor right-aligned.__menuis 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 viadata-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
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__inputgoes 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 theidandaria-hiddenattributes 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_uiwith 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_uiagain withexisting_spec+ modification instructions - Call
validate_specto verify the spec is clean - Call
render_specto 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
sliday/lp-editor
tools
VerifiedTrustedCommunity
Opinionated UI/UX editor for landing pages and marketing sites. Reviews, plans, and builds high-converting pages using proven conversion patterns. Use when the user asks to review a landing page, plan a landing page, build a landing page, critique a hero section, fix CTAs, improve copy, audit conversion elements, wireframe a page, or asks anything about landing page structure, headlines, social proof, pricing tables, FAQs, or page layout. Also use when the user shares a URL or screenshot of a marketing page and wants feedback, or when building any page meant to convert visitors. Trigger on mentions of "landing page", "hero section", "above the fold", "conversion", "CTA", "call to action", "headline copy", "social proof", "pricing page", "lead gen", "signup page", "sales page", "marketing site", or "LP". Do NOT use for dashboards, admin panels, or internal tools with no conversion goal.
36SKILL.mdUpdated May 12, 2026
openclaw/openclaw-secret-scanning-maintainer
development
VerifiedTrustedCommunity
Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.
357,764SKILL.mdUpdated Apr 15, 2026
openclaw/openclaw-release-maintainer
development
VerifiedTrustedCommunity
Maintainer workflow for OpenClaw releases, prereleases, changelog release notes, and publish validation. Use when Codex needs to prepare or verify stable or beta release steps, align version naming, assemble release notes, check release auth requirements, or validate publish-time commands and artifacts.
357,764SKILL.mdUpdated Apr 10, 2026
openclaw/openclaw-qa-testing
development
VerifiedTrustedCommunity
Run, watch, debug, and extend OpenClaw QA testing with qa-lab and qa-channel. Use when Codex needs to execute the repo-backed QA suite, inspect live QA artifacts, debug failing scenarios, add new QA scenarios, or explain the OpenClaw QA workflow. Prefer the live OpenAI lane with regular openai/gpt-5.4 in fast mode; do not use gpt-5.4-pro or gpt-5.4-mini unless the user explicitly overrides that policy.
357,764SKILL.mdUpdated Apr 10, 2026