css-styling-architecture

Helps choose and implement a CSS architecture for a web project. Compares Tailwind, CSS Modules, CSS-in-JS, and plain CSS, then guides setup of Tailwind configuration, design token systems, dark mode, mobile-first and container-query responsive layouts, component variant systems built on class-variance-authority, and animation patterns, finishing with a validation checklist for bundle size, contrast, and visual regressions. Use when asked to set up project styling, configure Tailwind, create a theme or design-token system, add dark mode, make components responsive, or build variant-driven UI components. Not for choosing brand colors or visual identity, image editing, or debugging layout breakage caused by data or content rather than styles.

Version

v1.0.0

Size

16 KB

Updated

2026-10-10

Your client verifies the signature before reading. This explicit manual read is available on every plan. Free automatically loads five chosen skills; paid plans automatically load relevant skills across the library.