lionad-morotar/local-tools/bem-refactor

Claude Code and agent skill by lionad-morotar/local-tools

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

将 Vue 组件重构为使用 BEM（Block-Element-Modifier）命名规范。 使用场景： - 用户说"用 useBEM 改造这个组件" - 用户说"给这个组件加上 BEM 类名" - 用户要求重构组件以符合项目 BEM 规范 - 需要将 Tailwind 工具类与 BEM 语义类名结合使用 触发关键词：useBEM、BEM、重构组件、BEM 改造、bem-refactor

Install

npx vskill@latest install lionad-morotar/local-tools/bem-refactor

SKILL.md

BEM 组件重构指南

工作流程

1. 分析现有代码

读取目标文件，了解：

  • 组件结构和层级关系
  • 现有的 class 命名方式
  • 是否需要保留 Tailwind 工具类
2. 查找项目 BEM 规范

搜索项目中的 useBEM 使用方式：

  • 查找 useBEM 的实现位置（通常在 app/composables/bem/）
  • 查看 CONVENTIONS.md 中的 BEM 命名规范
  • 了解项目约定的 block 前缀（如 page-*, cmpt-*, layout-*）
3. 确定 Block 名称

根据组件类型和位置，选择合适的 block 名：

组件类型Block 前缀示例
页面级组件page-xxx
可复用 UI 组件cmpt-xxx
布局组件layout-xxx
4. 重构模板

引入 useBEM：

ts
const { b, e, is } = useBEM('block-name')

类名绑定规则：

  • 静态 Tailwind 类名 → 使用 class
  • 动态 BEM 类名 → 使用 :class

示例：

vue
<!-- Before -->
<div class="px-6 py-4 bg-white rounded-sm">
  <h2 class="text-lg font-semibold text-gray-900">标题</h2>
</div>
 
<!-- After -->
<div class="px-6 py-4 bg-white rounded-sm" :class="e('header')">
  <h2 class="text-lg font-semibold text-gray-900" :class="e('title')">标题</h2>
</div>
5. 添加 Style Block

在组件末尾添加嵌套 BEM 结构的 style 占位：

vue
<style scoped lang="css">
.p-block-name {
  /* container */
 
  &__header {
    /* header wrapper */
 
    &-inner {
      /* header inner */
    }
  }
 
  &__title {
    /* title element */
  }
 
  &__main {
    /* main content */
 
    &.is-empty {
      /* modifier state */
    }
  }
}
</style>

完整示例

重构前：

vue
<template>
  <div class="w-full">
    <div class="px-6 py-4 bg-white rounded-sm">
      <h2 class="text-lg font-semibold">{{ title }}</h2>
    </div>
    <div class="main bg-white rounded-sm">
      <slot />
    </div>
  </div>
</template>

重构后：

vue
<script setup lang="ts">
const { b, e, is } = useBEM('page-saas')
 
const props = defineProps<{
  title?: string
}>()
</script>
 
<template>
  <div class="w-full" :class="b()">
    <div class="px-6 py-4 bg-white rounded-sm" :class="e('header')">
      <h2 class="text-lg font-semibold" :class="e('title')">{{ title }}</h2>
    </div>
    <div class="bg-white rounded-sm" :class="e('main')">
      <slot />
    </div>
  </div>
</template>
 
<style scoped lang="css">
.p-page-saas {
  /* container */
 
  &__header {
    /* header wrapper */
  }
 
  &__title {
    /* page title */
  }
 
  &__main {
    /* main content */
  }
}
</style>

注意事项

  1. 保留 Tailwind 类名：如果项目使用 Tailwind，保留工具类用于实际样式，BEM 类名用于语义标记
  2. v-tw-merge 指令：在根元素上使用 v-tw-merge 指令确保 class 合并正确
  3. 状态修饰符：使用 is('state') 生成状态类名（如 is-empty）
  4. 空规则占位：在 style block 中使用注释占位，避免 lint 警告

Security

  • Security scanPassed, 90 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

7-day trend score
0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/lionad-morotar/local-tools/bem-refactor/badge)](https://verified-skill.com/skills/lionad-morotar/local-tools/bem-refactor)

Something wrong with this skill or its page? Tell us.