dev-style-css

Define CSS strategy for component-based projects using CSS Modules and CVA.

Updated Jun 17, 2025

Search Tags:#frontend #css #cva #css-modules #component-styles #style-architecture

Ready to run

npx skills add https://github.com/nikbrunner/dots --skill dev-style-css

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dev-style-css
Source: https://github.com/nikbrunner/dots/tree/main/common/.agents/skills/dev-style-css
Command: npx skills add https://github.com/nikbrunner/dots --skill dev-style-css

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured approach to CSS architecture for component-based web projects, reducing style drift and ensuring consistent conventions across teams.

Core Features & Use Cases

CSS Modules, CVA, and co-located styles as canonical anchors
Co-located file conventions and references to patterns like OpenProps
Guidance for naming, scoping, and project wiring across platforms

Quick Start

Begin by placing a Button.css next to Button.tsx and adopt the default anchors for new components.

Frequently Asked Questions about dev-style-css

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

FAQPage Schema

How do I structure CSS architecture for component-based web projects?▼

Structure CSS architecture by adopting CSS Modules, CVA, and co-located styles as canonical anchors. Co-locate files by placing component stylesheets next to their components to reduce style drift and enforce consistent conventions.

What is the best way to organize CSS file layout for frontend components?▼

Organize CSS file layout using co-located conventions, placing stylesheets like Button.css directly next to Button.tsx. This strategy applies default anchors for new components and references pattern files to guide implementation decisions.

How does CVA work with CSS Modules for component styling?▼

CVA works with CSS Modules by serving as a canonical anchor for component styling strategy. Applying CVA alongside co-located styles helps manage naming, scoping, and style variants efficiently across component-based web projects.

Can I use co-located styles with existing frontend project setups?▼

Yes, you can use co-located styles with existing setups by applying the documented anchors and conventions. The strategy covers project wiring across platforms and references alternative patterns to integrate with your current structure.

What are the limitations of using CSS Modules for component styling?▼

Limitations of using CSS Modules involve potential style drift without a cohesive strategy. The skill addresses this by documenting decision points for naming, scoping, and file layout, and by referencing alternative patterns like OpenProps.

When do I need a cohesive CSS strategy for frontend component styles?▼

You need a cohesive CSS strategy when adopting CSS Modules, CVA, and co-located styles to ensure consistent conventions across teams. It reduces style drift by documenting anchors and guiding implementation workflows for new components.