css-modules
OfficialCSS Modules conventions for scalable styling.
AuthorOpentrons
Version1.0.0
Installs0
System Documentation
What problem does it solve?
CSS Modules conventions, Stylelint rules, design tokens (spacing, colors, typography, border-radius), and patterns for the Opentrons monorepo. Use when working with .module.css files or styling React components.
Core Features & Use Cases
- File naming: File names are lowercase, no separators, suffixed with .module.css, and match the component name.
- Class naming: Stylelint enforces the pattern /^[a-z0-9_]+$/ — snake_case only, with a component_element or element_modifier structure.
- Importing in Components: Import the module as import styles from './componentname.module.css' and apply via styles.className.
- Design Tokens: Tokens are defined in components/src/styles/global.css and should be used for colors, spacing, typography, and border-radius.
- Linting & Best Practices: The repo uses stylelint with standard configurations and provides Makefile targets for linting and formatting.
Quick Start
Create a componentname.module.css following the naming conventions and import it into the component to apply styles.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: css-modules Download link: https://github.com/Opentrons/opentrons/archive/main.zip#css-modules Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.