Skip to content
Development
Skill

/design-system

DaisyUI + Tailwind CDN design system spec. Preloaded into design-related agents and referenced by design skills.

From plugin
solopreneur
1616 skills6 agents1 hook2 MCP

Claude Code

$ npx -y skills add pcatattacks/solopreneur-plugin --skill design-system --agent claude-code

SKILL.md

design-system.SKILL.md
name: design-system
user-invocable: false
description: DaisyUI + Tailwind CDN design system spec. Preloaded into design-related agents and referenced by design skills.

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
@pcatattacks
Ships withsolopreneur

You're a solopreneur. You have ideas, ambition, and not enough hours in the day.

1616 skills6 agents2 MCP
Get the whole plugin

Stars on GitHub

Momentum

stars in total
16
Star history of pcatattacks/solopreneur-plugin on GitHub, a chart by star-history.com

Other skills on solopreneur.

backlog

backlog

Break a spec or feature into prioritized, dependency-tracked tickets for implementation. Use when a spec is too large to build at…

build

build

Plan and execute code implementation for a feature or product. Can generate a plan file for Cursor or build directly with Claude.…

design

design

Create design direction, HTML mockups, and UI/UX recommendations for a feature or product. Use when the user needs visual…

discover

discover

Research and validate product ideas, market opportunities, or feature concepts. Use when the user wants to explore whether an…

help

help

Get oriented with the solopreneur plugin — see your AI team, check project status, and get suggestions for what to do next. Use…

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills2w309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react5d252k
@facebook@facebookInstall Skill

Questions about design-system.

Which coding agents can use design-system?
design-system installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.