·bem-structure
</>

bem-structure

Expert guidance for writing, refactoring, and structuring CSS using BEM (Block Element Modifier) methodology. Provides proper CSS class naming conventions, component structure, and Optics design system integration for maintainable, scalable stylesheets.

15Installs·0Trend·@rolemodel

Installation

$npx skills add https://github.com/rolemodel/rolemodel-skills --skill bem-structure

How to Install bem-structure

Quickly install bem-structure AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/rolemodel/rolemodel-skills --skill bem-structure
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: rolemodel/rolemodel-skills.

SKILL.md

View raw

This skill guides AI in writing CSS using the BEM (Block Element Modifier) methodology for creating maintainable, scalable, and reusable stylesheets with clear naming conventions and component structure, while exercising judgment about scope, risk, and architectural impact. It also should use BEM in conjunction with Optics, our RoleModel design system, so that it's not recreating things that already exist. If ther...

The agent should prioritize clarity, predictability, and minimal unintended side effects.

Keywords: CSS review, BEM structure, BEM methodology, CSS best practices, Refactor CSS, Review CSS, Fix my CSS, Fix my BEM, BEM-ify my CSS

Expert guidance for writing, refactoring, and structuring CSS using BEM (Block Element Modifier) methodology. Provides proper CSS class naming conventions, component structure, and Optics design system integration for maintainable, scalable stylesheets. Source: rolemodel/rolemodel-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/rolemodel/rolemodel-skills --skill bem-structure
Category
</>Dev Tools
Verified
First Seen
2026-02-21
Updated
2026-03-10

Browse more skills from rolemodel/rolemodel-skills

Quick answers

What is bem-structure?

Expert guidance for writing, refactoring, and structuring CSS using BEM (Block Element Modifier) methodology. Provides proper CSS class naming conventions, component structure, and Optics design system integration for maintainable, scalable stylesheets. Source: rolemodel/rolemodel-skills.

How do I install bem-structure?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/rolemodel/rolemodel-skills --skill bem-structure Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/rolemodel/rolemodel-skills