BEM·WIND

A Claude Code skill

Semantic BEM CSS with Tailwind @apply. Keep the design system, lose the utility soup in your markup.

Setup

Install the skill into your .claude/skills:

Drop --global to install into the current project instead.

Or add it from inside Claude Code (run each in turn):

Then invoke it any time with /bem-wind.

The method

• 01Everything inside @apply: compose from Tailwind, no raw CSS.
• 02Prefix every class with a 2–4 char project prefix.
• 03BEM naming: [prefix]-block__element--modifier.
• 04Prefer standard Tailwind values; brackets only when needed.
• 05No utilities in markup: components carry semantic names only.

Examples

Before · utility soup in the markup:

<button class="inline-flex items-center
  justify-center px-4 py-2 rounded-lg
  bg-blue-500 text-white transition-colors
  hover:bg-blue-600 active:bg-blue-700 ...">
  Get started
</button>

After · semantic markup, styling in the stylesheet:

<button class="ds-button ds-button--primary">Get started</button>

.ds-button {
  @apply inline-flex items-center justify-center;
  @apply px-4 py-2 rounded-lg transition-colors;
  &--primary {
    @apply bg-blue-500 text-white;
    @apply hover:bg-blue-600 active:bg-blue-700;
  }
}

Same pixels. Full patterns (cards, inputs, modals, tokens) ship inside the skill.