tailwind-conventions
Tailwind CSS Conventions Skill
Consistent patterns for Tailwind CSS in React/Next.js applications.
Class Organization Order
Always organize classes in this order for readability:
className={cn(
// 1. Layout (position, display, flex/grid)
"relative flex flex-col",
// 2. Sizing (width, height, padding, margin)
"w-full max-w-md p-4 mx-auto",
// 3. Visual (background, border, shadow)
"bg-white border border-gray-200 rounded-lg shadow-sm",
// 4. Typography (font, text, color)
"text-sm font-medium text-gray-900",
// 5. States (hover, focus, active, disabled)
More from benshapyro/cadre-devkit-claude
frontend-design
Create distinctive, memorable user interfaces that avoid generic AI aesthetics. Use when designing UI/UX, planning visual direction, or building pages and layouts.
10error-handler
Provides battle-tested error handling patterns for TypeScript and Python. Use when implementing error handling, creating try/catch blocks, or handling exceptions.
5react-patterns
Modern React patterns for TypeScript applications including hooks, state management, and component composition. Use when building React components, managing state, or implementing React best practices.
4product-discovery
Methodology for discovering and specifying new software products. Use when starting greenfield projects, exploring new ideas, or defining MVP scope.
4test-generator
Generates Jest or Pytest tests following Ben's testing standards. Use when creating tests, adding test coverage, writing unit tests, mocking dependencies, or when user mentions testing, test cases, Jest, Pytest, fixtures, assertions, or coverage.
3devkit-knowledge
Knowledge base for the Cadre DevKit. Use when answering questions about the devkit structure, commands, skills, hooks, agents, or workflows.
3