skills.rest
Opentrons
OpentronsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

css-modules

Enforce CSS Modules naming, imports, and design tokens in React components.

515|208|Updated Jul 6, 2015
Search Tags:#frontend#react#design-tokens#css-modules#stylelint#frontend-styling
One-click install
npx skills add https://github.com/Opentrons/opentrons --skill css-modules
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-modules
Source: https://github.com/Opentrons/opentrons/tree/main/.cursor/skills/css-modules
Command: npx skills add https://github.com/Opentrons/opentrons --skill css-modules

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about css-modules

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

FAQPage Schema
How do I fix inconsistent CSS Modules styling in a React monorepo?▼

Fix inconsistent CSS Modules styling by enforcing strict file naming conventions, requiring lowercase component names ending in .module.css, and mandating snake_case class names to ensure scalable and predictable styling across the monorepo.

What are the Stylelint rules for CSS Modules class naming?▼

Stylelint rules for CSS Modules enforce the /^[a-z0-9_]+$/ pattern, requiring snake_case class names structured as component_element or element_modifier to maintain strict naming consistency and prevent styling conflicts.

How do I import and apply CSS Modules in a React component?▼

Import CSS Modules in a React component using the syntax import styles from './componentname.module.css', then apply the localized class names directly via the styles.className property to scope styles to the component.

When do I need to use global design tokens instead of hardcoded values in CSS Modules?▼

Use global design tokens instead of hardcoded values whenever defining colors, spacing, typography, and border-radius in CSS Modules. Tokens are centralized in the global.css file to maintain visual consistency across the monorepo.

Does this styling convention work without any external dependencies?▼

Yes, this styling convention works without external dependencies. It relies entirely on standard CSS Modules conventions integrated with React and enforced via stylelint configurations provided through local Makefile targets.

What is the correct file naming convention for CSS Modules?▼

The correct file naming convention for CSS Modules requires file names to be completely lowercase with no separators, suffixed with .module.css, and matching the exact name of the corresponding React component.

Related Skills

Explore More Software Engineering Skills→
trystan2ktrystan2k

css-architecture

Organize CSS with CSS Modules for component-scoped styles.

Community
Intermediate
ehtbantonehtbanton

stylelint-config-generator

Generate Stylelint configuration files for CSS/SCSS linting and formatting.

Community
Basic
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic
Software-Design-ClubSoftware-Design-Club
1

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic