skills/html-to-scss/SKILL.md

name, description, license, metadata

name	description	license	metadata
html-to-scss	Generate SCSS file skeletons with BEM selectors based on provided HTML. Use when the user asks to convert HTML markup into an SCSS block or file. Outputs selectors with empty rule bodies.	MIT	author version Valentin Silyutin 1.0.0

BEM SCSS Skeleton Generation Instructions

Analyze the provided HTML markup and generate only the SCSS skeleton with selectors following the BEM methodology.

What is Generated

• Only selector structure with empty rule bodies.
• No @media, pseudo-classes (&:hover, &:focus), pseudo-elements, child/descendant tag selectors (& > a, & a), or actual CSS properties.
• Only nesting forms &_modifier and &__element derived explicitly from the HTML.
• BEM Mixes: If an element contains both an element class and an independent block class (e.g., <button class="product-card__btn button">), place &__btn in product-card.scss and process button as a separate block.

1. Output Mode & File Organization

Before generating, check if the project has the directory src/styles/blocks/:

• If src/styles/blocks/ exists:
  • Create a separate file src/styles/blocks/<block-name>.scss for each BEM block (kebab-case, matching the block class name).
  • Existing files: If src/styles/blocks/<block-name>.scss already exists, do not modify or overwrite it. Notify the user that the block file already exists with a reference to it.
  • src/styles/blocks/_index.scss is managed automatically — do not modify or mention it.
• If src/styles/blocks/ does NOT exist:
  • Do not create any files. Output the SCSS code directly in the response as code blocks, labeling each block with its filename (e.g., // <block-name>.scss).

2. Syntax and Variables

• Add @use '../variables' as *; at the very beginning of the SCSS code for each block.
• Assign the current block name (including the leading dot) to variable $b right after @use. Example: $b: '.example';
• Use #{$b} interpolation for the main block selector.
• Use & inside the block to reference the parent selector.
• Use single quotes '.
• Use 4 spaces for indentation.

3. BEM Structure

• Elements (&__): Place all block elements at the same nesting level directly inside the #{$b} selector. Do not replicate the nesting depth from HTML.
• Modifiers (&_): Use a single underscore (e.g., &_active, &_featured).
• Modifier Placement: Place the modifier selector inside that element/block selector at the very top.
• Order inside #{$b}: First the block's own modifiers (&_modifier), followed by elements (&__element). Inside an element: first its modifiers, then the empty rule body.
• Spacing: Separate adjacent blocks and elements with an empty line.

4. Filtering

• Omit classes that do not belong to the current block (third-party utilities, helper classes, etc.).
• Ignore JS hooks, lazyload classes, and utility classes.
• Do not add selectors for tags or states that are not present in the HTML.

Example of Expected Structure

@use '../variables' as *;

$b: '.product-card';

#{$b} {
    &_featured {
    }

    &__title {
        &_large {
        }
    }

    &__image {
    }
}

Workflow

1. Receive HTML from the user.
2. Check for the existence of src/styles/blocks/ to determine output mode (file creation vs markdown response).
3. Identify all distinct BEM blocks.
4. For each block:
   • Collect all matching classes (<block>__<element>, <block>_<modifier>, <block>__<element>_<modifier>).
   • Filter out unrelated/utility classes.
   • Format into SCSS according to the syntax rules above.
5. Create files in src/styles/blocks/ or return the SCSS in the chat response accordingly.