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
More from ghou533/agent-skills
feature-implementation-planner
Plan new product or engineering features into implementation-ready work for coding agents. Use when the user asks to scope a new feature, break work into phases or tickets, evaluate tradeoffs, define acceptance criteria, sequence delivery, or prepare an execution plan that agents can implement safely.
17worktree-parallel
Create and manage a git worktree for parallel feature development, then open the new worktree in the editor (code/Cursor) for a second Codex session. Use when the user asks to work on another feature simultaneously, run multiple features in parallel, spin up a parallel workspace, or open a new worktree even if they do not mention worktree explicitly.
15vite
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
14chrome-devtools
Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests.
13