Typed CSS Modules for styling edits

Use this skill for styling edits in a project that has adopted the methodology. Project conventions override the examples and defaults here. Use the manual css-modules-setup skill for installation, bootstrap, alignment, migration, and verification planning.

Start with adoption

Activate when at least one condition is true:

.agents/css-modules.json exists and is valid (legacy or compact format).
Repository instructions explicitly adopt this methodology.
The user directly asks to apply or migrate to it.

The presence of a *.module.css, className, or React component alone does not establish adoption. If a project is explicitly adopted but has no JSON profile, follow its recorded repository conventions and inspect the relevant implementation. Do not invent a permanent profile. Ask only about missing choices that affect the edit, such as competing shared entry points, incompatible layer ownership, or a required color value. If the user only asks to inspect or verify an unprofiled project, stay read-only and use the setup skill's audit route.

Example

Compose shared styles and local role classes in JSX. Use the names and layers recorded in the project contract: