---
name: html-to-scss
description: 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.
license: MIT
metadata:
  author: Valentin Silyutin
  version: "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

```scss
@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.