Skills
.Work. You
Rest

css-rules

Community

Consistent Tailwind theming for React UIs

Software Engineering#theming#react#css#tailwind#mui#dark-mode#design-tokens
Authormauriciodelrio
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Provides a coherent set of styling rules and implementation patterns to avoid inconsistent CSS, specificity conflicts, and theme drift in React and Next.js projects that use Tailwind, CSS Modules, and Material UI.

Core Features & Use Cases

  • Class composition: Use a cn() utility for deterministic Tailwind class merging and predictable responsive variants.
  • Responsive & theming patterns: Mobile-first layouts, container queries, and dark mode via a class-based approach with persistence to prevent flash of wrong theme.
  • Tokens & interoperability: Design tokens implemented as CSS custom properties and optional synchronization with MUI theme overrides; reserve CSS Modules for complex animations only.

Quick Start

Use the css-rules skill to refactor a React component to Tailwind using a cn() class composition helper, add mobile-first responsive classes and container queries, implement dark-mode with a class-based theme and persistent storage, and replace magic values with CSS custom properties.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: css-rules
Download link: https://github.com/mauriciodelrio/delriodev-skills/archive/main.zip#css-rules

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.