shadcn/ui, Radix Primitives & Dark-Mode Design Token Playbook

Build accessible, keyboard-navigable interfaces with shadcn/ui and Tailwind CSS: semantic CSS variables, WCAG AA contrast verification, focus-ring hygiene,

---
name: shadcn-design-system
description: Build accessible, keyboard-navigable interfaces with shadcn/ui and Tailwind CSS: semantic CSS variables, WCAG AA contrast verification, focus-ring hygiene, and zero-CLS dialogs. Use when working with shadcn/ui, Radix UI, Tailwind CSS, Design Tokens.
triggers:
  - shadcn design system
  - shadcn/ui
  - radix ui
---

# shadcn/ui, Radix Primitives & Dark-Mode Design Token Playbook

## 1. When to Use This Skill
Load `skill-shadcn-design-system` whenever an engineering or operations task involves **shadcn/ui, Radix UI, Tailwind CSS, Design Tokens**. Specifically:
- Build accessible, keyboard-navigable interfaces with shadcn/ui and Tailwind CSS: semantic CSS variables, WCAG AA contrast verification, focus-ring hygiene, and zero-CLS dialogs.
- Designing, reviewing, or debugging production configurations without guesswork or deprecated flags.
- Running deterministic pre-flight and post-execution verification checks before reporting completion.

## 2. Prerequisites & Required Environment
- **Target Stack:** shadcn/ui, Radix UI, Tailwind CSS, Design Tokens
- **Permissions:** Read-only inspection by default; ask for explicit confirmation before executing destructive mutations or production deployments.
- **Reference Repository:** `https://ui.shadcn.com/docs`

## 3. Step-by-Step Execution Playbook
1. **Context & Configuration Discovery:**
   Inspect existing project manifests (`package.json`, `wrangler.jsonc`, schema files, or environment declarations) before proposing changes. Never overwrite existing bindings or credentials blindly.
2. **Deterministic Implementation:**
   Apply the canonical patterns for **shadcn/ui**:
   - Enforce strict schema/type validation at every external boundary.
   - Include explicit error handling, structured logging, and idempotency keys on all mutating calls.
   - Keep secrets in environment variables or secret stores—never hardcode tokens in source files.
3. **Verification & Regression Gate:**
   Run the verification commands below and inspect both exit codes and output payloads before marking the task complete.

## 4. Reference Commands & CLI Workflow
```bash
npx shadcn@latest add button dialog table
npx shadcn@latest diff
```

## 5. Edge Cases & Anti-Hallucination Guardrails
- **Zero Unverified Claims:** Never claim a deployment, migration, or API call succeeded without inspecting the command output or HTTP status code.
- **Rollback Readiness:** Always record the previous state or migration version so changes can be reverted cleanly if downstream health checks fail.

Synthesized Engineering Blueprint & Setup Guide