OpenSkillIndex← back to search
claude-codedevelopment

Babysitter css-modules

CSS Modules patterns, composition, variables, and build configuration.

install
source · Clone the upstream repo
git clone https://github.com/a5c-ai/babysitter
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/a5c-ai/babysitter "$T" && mkdir -p ~/.claude/skills && cp -r "$T/library/specializations/web-development/skills/css-modules" ~/.claude/skills/a5c-ai-babysitter-css-modules && rm -rf "$T"
manifest: library/specializations/web-development/skills/css-modules/SKILL.md
tags
#css-styling#react-styling#scoped-styles#theming#css-variables
source content

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

/* 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;
}

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

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

Target Processes

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