Skills
.Work. You
Rest

bem-refactor

Community

Refactor Vue components with BEM.

Software Engineering#code quality#css#vue#component#refactor#bem
AuthorLionad-Morotar
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the process of refactoring Vue components to adhere to the BEM (Block-Element-Modifier) naming convention, improving code organization and maintainability.

Core Features & Use Cases

  • BEM Renaming: Automatically applies BEM class names to Vue component templates.
  • Style Block Generation: Creates corresponding nested BEM style blocks in the component's <style> section.
  • Tailwind Integration: Facilitates the combination of Tailwind utility classes with BEM semantic class names.
  • Use Case: When a user requests to "use useBEM to refactor this component" or "add BEM class names to this component," this Skill will perform the necessary code transformations.

Quick Start

Refactor the current Vue component to use the BEM naming convention with the block name 'page-saas'.

Dependency Matrix

Required Modules

None required

Components

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: bem-refactor
Download link: https://github.com/Lionad-Morotar/local-tools/archive/main.zip#bem-refactor

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.