tailwind-design-system
Tailwind Design System (v4)
Build production-ready design systems with Tailwind CSS v4, including CSS-first configuration, design tokens, component variants, responsive patterns, and accessibility.
Note: This skill targets Tailwind CSS v4 (2024+). For v3 projects, refer to the upgrade guide.
When to Use This Skill
- Creating a component library with Tailwind v4
- Implementing design tokens and theming with CSS-first configuration
- Building responsive and accessible components
- Standardizing UI patterns across a codebase
- Migrating from Tailwind v3 to v4
- Setting up dark mode with native CSS features
Key v4 Changes
| v3 Pattern | v4 Pattern |
|---|
More from crunchdao/coordinator-webapp
solana
Query Solana blockchain data via RPC. Fetch account info, decode Anchor accounts, check balances, get transactions. Use CLI tools (curl, jq) instead of browser explorers.
1crunch-design
Use when building UI with @crunch-ui components, icons, or design tokens. Use when styling CrunchDAO apps, choosing colors, typography, or layout patterns. Use when importing from @crunch-ui/core, @crunch-ui/icons, @crunch-ui/utils, or @crunch-ui/tailwind-config.
1coordinator-webapp
Use when building features, adding pages, creating modules, or modifying UI in the coordinator webapp monorepo. Covers the starter app (single-node dashboard) and platform app (full coordinator management), shared packages, module patterns, API proxy, and report schema integration.
1