home / skills / a5c-ai / babysitter / css-modules

css-modules skill

safe

/plugins/babysitter/skills/babysit/process/specializations/web-development/skills/css-modules

This skill helps you configure and write scoped CSS using CSS Modules, including composition, variables, and theming for React components.

npx playbooks add skill a5c-ai/babysitter --skill css-modules

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

808 B

---
name: css-modules
description: CSS Modules patterns, composition, variables, and build configuration.
allowed-tools: Read, Write, Edit, Bash, Glob, Grep
---

# CSS Modules Skill

Expert assistance for scoped styling with CSS Modules.

## Capabilities

- Configure CSS Modules
- Write scoped styles
- Implement composition
- Use CSS variables
- Handle theming

## Usage Pattern

```css
/* Button.module.css */
.button {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  composes: reset from './reset.module.css';
}

.primary {
  composes: button;
  background: var(--color-primary);
  color: white;
}
```

```tsx
import styles from './Button.module.css';

<button className={styles.primary}>Click me</button>
```

## Target Processes

- react-application-development
- component-styling
- design-system

Overview

This skill provides practical patterns and configuration guidance for using CSS Modules in component-driven JavaScript projects. It focuses on scoped class naming, composition, CSS variables, theming, and build/tooling setup to ensure predictable, maintainable styles. The goal is to enable reliable styling in React and similar component frameworks with minimal runtime overhead.

How this skill works

It inspects component style needs and maps them to CSS Module files (.module.css), demonstrating how to compose classes, expose variables, and import styles into JS/TSX components. It also recommends build and bundler configuration so class names remain scoped and deterministic across environments. Examples show composition via composes, using CSS variables for theming, and importing styles as objects for type-safe usage.

When to use it

Building component libraries or design systems to avoid global CSS leakage
Creating scoped styles for React, Preact, or other component-based frameworks
Sharing and composing base styles across components without runtime classname conflicts
Implementing theming with CSS variables while keeping local component scope
Migrating legacy global styles to modular, maintainable patterns

Best practices

Name module files with .module.css and import them directly in components for clarity
Prefer composition (composes) for reuse rather than duplicating CSS rules
Use CSS variables for theme tokens and expose them at a root or theme wrapper level
Keep component modules focused: one module per component, small rule sets, clear class names
Configure the bundler (webpack, Vite) to enable deterministic class hashing and source maps for debugging

Example use cases

Button component styles that compose a shared reset and switch variants via classes
Design system tokens defined as CSS variables and applied inside module files for per-component theming
Migrating a legacy stylesheet by extracting base utilities into reset.module.css and composing them into components
Server-side rendering with deterministic class names to match client-rendered markup
Type-checked imports in TypeScript projects to avoid runtime class name typos

FAQ

How do I share a base style across components?

Extract the base rules into a module like reset.module.css and use composes to include that class in other module files so the rules are reused without global selectors.

Can I use CSS variables with CSS Modules?

Yes. Define variables at a global level ( :root or a theme wrapper ) and reference them inside module files with var(--token). This keeps tokens centralized while styles remain scoped.