·bem-structure
</>

bem-structure

使用 BEM(區塊元素修改器)方法編寫、重構和建立 CSS 的專家指南。提供適當的 CSS 類別命名約定、組件結構和光學設計系統集成,以實現可維護、可擴展的樣式表。

15安裝·0熱度·@rolemodel

安裝

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

如何安裝 bem-structure

透過命令列快速安裝 bem-structure AI 技能到你的開發環境

  1. 開啟終端機: 開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等)
  2. 執行安裝指令: 複製並執行以下指令:npx skills add https://github.com/rolemodel/rolemodel-skills --skill bem-structure
  3. 驗證安裝: 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

來源:rolemodel/rolemodel-skills。

SKILL.md

查看原文

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

使用 BEM(區塊元素修改器)方法編寫、重構和建立 CSS 的專家指南。提供適當的 CSS 類別命名約定、組件結構和光學設計系統集成,以實現可維護、可擴展的樣式表。 來源:rolemodel/rolemodel-skills。

可引用資訊

為搜尋與 AI 引用準備的穩定欄位與指令。

安裝指令
npx skills add https://github.com/rolemodel/rolemodel-skills --skill bem-structure
分類
</>開發工具
認證
收錄時間
2026-02-21
更新時間
2026-03-10

Browse more skills from rolemodel/rolemodel-skills

快速解答

什麼是 bem-structure?

使用 BEM(區塊元素修改器)方法編寫、重構和建立 CSS 的專家指南。提供適當的 CSS 類別命名約定、組件結構和光學設計系統集成,以實現可維護、可擴展的樣式表。 來源:rolemodel/rolemodel-skills。

如何安裝 bem-structure?

開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等) 複製並執行以下指令:npx skills add https://github.com/rolemodel/rolemodel-skills --skill bem-structure 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

這個 Skill 的原始碼在哪?

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