Do I need a build step or local tooling?

No—this skill is designed for self-contained HTML docs that load DaisyUI and Tailwind directly from CDN and work offline (file://) without a build step.

What dependencies are required?

Only DaisyUI CSS and Tailwind CDN; no other libraries.

How should files be structured?

Each file must be a complete HTML document ( , html, head, body) so it opens in any browser, including via file://.

design-system

npx machina-cli add skill pcatattacks/solopreneur-plugin/design-system --openclaw

Files (1)

SKILL.md

1.1 KB

Design System

Stack

Self-contained HTML mockups using DaisyUI + Tailwind via CDN (no build step, no setup):

<link href="https://cdn.jsdelivr.net/npm/daisyui@5/daisyui.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>

Rules

Use DaisyUI semantic classes for polished defaults: btn, card, navbar, modal, badge, alert, table, etc.
Layer Tailwind utility classes on top for customization (spacing, colors, responsive breakpoints)
Use realistic placeholder data (real names, prices, dates — not lorem ipsum)
Add basic interactivity where it helps communicate the design (tab switches, modal open/close, dropdown toggles via inline JS)
No external dependencies beyond DaisyUI + Tailwind CDN
Structure each file as a complete HTML document: <!DOCTYPE html>, <html>, <head>, <body>
Be openable via file:// in any browser

Source

git clone https://github.com/pcatattacks/solopreneur-plugin/blob/main/skills/design-system/SKILL.mdView on GitHub

Overview

DaisyUI + Tailwind CDN design system spec for self-contained HTML mockups with no build steps. It’s preloaded into design-related agents and referenced by design skills to ensure consistent, interactive UI demos.

How This Skill Works

Developers create standalone HTML files that include DaisyUI and Tailwind via CDN, then apply DaisyUI semantic classes (btn, card, navbar, modal, badge, table, etc.) and layer Tailwind utilities for customization. Each file is a complete HTML document and can include lightweight inline JavaScript to demonstrate interactions like tab switches or modal open/close.

When to Use It

Prototype UI rapidly with zero build steps
Demonstrate component consistency across mockups
Share design samples via file:// accessible docs
Preload design systems into design-related agents
Show basic interactivity (modals, tabs) in mocks

Quick Start

Step 1: Include the DaisyUI and Tailwind CDN links in the head of your HTML document, e.g. <link href="https://cdn.jsdelivr.net/npm/daisyui@5/daisyui.css" rel="stylesheet"> and <script src="https://cdn.tailwindcss.com"></script>
Step 2: Apply DaisyUI classes like btn, card, navbar on elements and layer Tailwind utilities for customization
Step 3: Add lightweight inline JavaScript to demonstrate interactivity (tab switches, modal open/close)

Best Practices

Follow DaisyUI semantic classes for predictable visuals
Layer Tailwind utilities on top of DaisyUI defaults for customization
Use realistic placeholder data (names, prices, dates) rather than lorem ipsum
Add basic interactivity with inline JavaScript to communicate behavior
Ensure every file is a complete HTML document and accessible via file://

Example Use Cases

index.html with a responsive navbar, cards, and a CTA button
modal-demo.html showing open/close with inline JS
table-demo.html styled with DaisyUI badges and rows
product-grid.html using DaisyUI cards and responsive spacing
form-mock.html with input groups and validation hints

Frequently Asked Questions

Add this skill to your agents