# Generate Shadcn Theme

> Convert a DESIGN.md or tokens.json into shadcn/ui-compatible CSS variables — emits a theme.css with :root and .dark blocks for all shadcn role variables (primary, secondary, accent, background, foreground, card, muted, border, destructive, ring) plus the tailwind.config.ts wrapper. Use when a team is on shadcn and wants to swap the default slate theme for their brand in one file.

- **Type:** Skill
- **Install:** `agentstack add skill-realmpastai-web-claude-design-suite-generate-shadcn-theme`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [realmpastai-web](https://agentstack.voostack.com/s/realmpastai-web)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [realmpastai-web](https://github.com/realmpastai-web)
- **Source:** https://github.com/realmpastai-web/claude-design-suite/tree/main/plugins/brand-intelligence/skills/generate-shadcn-theme

## Install

```sh
agentstack add skill-realmpastai-web-claude-design-suite-generate-shadcn-theme
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Generate shadcn Theme

## Context

You are generating a shadcn/ui theme from $ARGUMENTS. shadcn uses CSS custom properties in HSL space referenced by `tailwind.config.ts` via `hsl(var(--primary))`.

## Domain Context

- Shadcn's theme is in HSL, not RGB — hues are expressed as `H S% L%` (no commas). This is intentional: it lets you tweak saturation/lightness with CSS math.
- The variable set: `--background`, `--foreground`, `--card`, `--card-foreground`, `--popover`, `--popover-foreground`, `--primary`, `--primary-foreground`, `--secondary`, `--secondary-foreground`, `--muted`, `--muted-foreground`, `--accent`, `--accent-foreground`, `--destructive`, `--destructive-foreground`, `--border`, `--input`, `--ring`, `--radius`.
- Dark mode goes under `.dark { ... }`.

## Instructions

1. Read source DESIGN.md / tokens.json.
2. Run:
   ```bash
   python scripts/generate_tokens.py  --out app/globals.css --format shadcn
   ```
3. The script:
   - Converts hex palette to HSL
   - Emits `:root { --primary: 221 83% 53%; ... }` (light)
   - Emits `.dark { --primary: 221 83% 63%; ... }` (adjusted for dark)
   - Appends the `@layer base` block shadcn expects
   - Also writes a companion `tailwind.config.ts` that wires CSS vars into Tailwind's `colors` + a `borderRadius` that uses `var(--radius)`
4. Ensure WCAG: for each `foreground` / `background` pair, contrast ≥ 4.5:1 for normal text, 3:1 for large text. Flag any pair that falls short.
5. Print a test checklist:
   - Buttons render correctly in both modes
   - Inputs, cards, popovers all consume the vars
   - A `dark:` variant works via `html.dark` toggle

## Further Reading

- [shadcn theming](https://ui.shadcn.com/docs/theming)
- [shadcn dark mode](https://ui.shadcn.com/docs/dark-mode)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [realmpastai-web](https://github.com/realmpastai-web)
- **Source:** [realmpastai-web/claude-design-suite](https://github.com/realmpastai-web/claude-design-suite)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-realmpastai-web-claude-design-suite-generate-shadcn-theme
- Seller: https://agentstack.voostack.com/s/realmpastai-web
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.