skills.rest
mauriciodelrio
mauriciodelrioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

css-rules

Standardize React and Next.js styling with Tailwind, CSS Modules, and Material UI.

3|Updated Apr 12, 2026
Search Tags:#theming#react#css#tailwind#mui#dark-mode#design-tokens
One-click install
npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill css-rules
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-rules
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend/css-rules
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill css-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about css-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize Tailwind theming rules in a React application?▼

Standardize Tailwind theming in React by enforcing a cn() utility for deterministic class merging, mobile-first responsive strategies, and CSS custom properties for design tokens to prevent specificity conflicts and theme drift.

What is the best way to implement dark mode with persistence in Next.js?▼

The best way to implement dark mode in Next.js is using a class-based approach with persistence to prevent flashing, applying CSS custom properties to manage theme tokens consistently across the application.

How do I prevent Tailwind class conflicts when composing React components?▼

Prevent Tailwind class conflicts by using a cn() utility for class composition, which ensures deterministic merging of conditional classes and predictable responsive variants without specificity issues.

Can I use CSS Modules alongside Tailwind and Material UI in React?▼

You can use CSS Modules alongside Tailwind and Material UI in React, but you should reserve CSS Modules strictly for complex animations while relying on Tailwind and CSS custom properties for general styling.

How do I integrate design tokens with Material UI theme overrides in React?▼

Integrate design tokens with Material UI by defining them as CSS custom properties and optionally synchronizing them with MUI theme overrides to maintain visual consistency across your React components.

Related Skills

Explore More Software Engineering Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
moughamirmoughamir

tailwindcss-responsive-darkmode

Standardize responsive Tailwind CSS breakpoints and dark mode strategies.

Community
Intermediate
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic