tailwind-react-ui
Purpose
Use this skill to turn a React project into a well-structured Tailwind-driven UI, or to refactor an existing Tailwind setup into cleaner, token-based styling and reusable patterns.
You are helping with:
- Installing and wiring Tailwind into React toolchains
- Planning and managing dependencies (Tailwind + plugins + component libraries)
- Designing a semantic token layer in
tailwind.config(colors, spacing, typography, radii, shadows) - Refactoring components from ad-hoc CSS to Tailwind utility classes
- Applying proven UI recipes (forms, data tables, navigation, modals, layout primitives)
Always assume the user wants practical, copy-pastable steps plus concrete component examples.
Detect the React + Build Setup
Before giving commands or code, detect how the app is built and tailor instructions:
More from babandeepsingh/skills
react-tailwind
Opinionated assistant for installing and configuring Tailwind CSS in React projects, then revamping components using Tailwind utility classes and semantic design tokens. Use when working on React (CRA, Vite, Next.js, Remix, plain SPA) and you need guidance on Tailwind setup, dependency selection and installation order, configuration, semantic theme design, and common UI recipes (forms, data tables, navigation, modals, layout).
17skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
1