component-scaffolding

What this skill does

# Component Scaffolding

Generate component skeletons for a Drupal theme using Twig, web components, and Miyagi for validation.

## Trigger Phrases

- "Add component skeleton at patterns/..."
- "Create new component..."
- "Scaffold component..."
- Creating/updating schema.yaml or mocks.yaml files

## Configuration

### Component Library Root

This skill assumes it lives within a component library project, e.g.:

```
apps/component-library/
├── .claude/
│   └── skills/
│       └── component-scaffolding/   ← this skill
├── src/
│   ├── components/
│   └── css/
└── <theme-name>.libraries.yml
```

The **component library root** is three levels up from this skill (i.e., `../../..` relative to this SKILL.md).

### Theme Name Discovery

The `<theme-name>` placeholder must be replaced with the actual Drupal theme name. To determine it:

1. Navigate to the component library root
2. Find the `*.libraries.yml` file — the filename prefix is the theme name
3. Example: `circle_dot.libraries.yml` → theme name is `circle_dot`

If the theme name cannot be determined from existing files, ask the user.

## File Templates

### 1. Twig Template: `<component-name>.twig`

```twig
{{ attach_library("<theme-name>/pattern-<component-name>") }}

<div class="<ComponentName>">
	{# Component implementation #}
</div>
```

- Library name: `pattern-<component-name>` (kebab-case)
- CSS class: `<ComponentName>` (PascalCase)
- Single tab indentation

### 2. CSS: `<component-name>.css`

```css
/** @define <ComponentName>; */

.<ComponentName > {
  /* Component styles */
}
```

- PascalCase in `@define` comment
- Tab indentation

### 3. JavaScript: `<component-name>.js`

**Only create if explicitly needed.** Skip if user says "no JavaScript", "CSS only", etc.

```javascript
// @ts-check

class <ComponentName> extends HTMLElement {
	constructor() {
		super();
	}

	connectedCallback() {
		this.#addEventListeners();
	}

	/**
	 * Add event listeners
	 */
	#addEventListeners() {
		// Add event listeners here
	}
}

customElements.define("<component-name>", <ComponentName>);
```

- PascalCase class name
- **NO prefix** on custom element name (use kebab-case directly)
- Only `#addEventListeners()` method in skeleton
- **NO `#elements` field or `#getElements()` method**

### 4. Schema: `schema.yaml`

```yaml
$schema: http://json-schema.org/draft-07/schema#
$id: /<tier>/<component-name>

type: object

required:
  - property1

additionalProperties: false
properties:
```

- `$id` matches component tier path
- Include `required` array with placeholder names
- Leave `properties:` empty in skeleton
- 2-space indentation (YAML standard)

For detailed schema patterns, see [references/schema-and-mocks.md](references/schema-and-mocks.md).

### 5. Mocks: `mocks.yaml`

```yaml

```

- Single blank line only in skeleton
- User adds their own mock data later

For mock data patterns, see [references/schema-and-mocks.md](references/schema-and-mocks.md).

### 6. CSS Entry Point: `src/css/<component-name>.css`

```css
@import url("../components/<tier>/<component-name>/<component-name>.css")
layer(components);
```

> Note: If the component is an element, you can use the `elements.css` entry point instead.

### 7. Library Definition: `<theme-name>.libraries.yml`

Add entry **alphabetically** within the appropriate tier section:

```yaml
pattern-<component-name>:
  header: true
  css:
    component:
      build/assets/css/<component-name>.css: {}
  js:
    build/assets/components/<tier>/<component-name>/<component-name>.js:
      attributes:
        type: module
```

- **Omit the `js:` block entirely if no JavaScript file is created**
- Maintain blank line between library definitions
- **Omit the `css:` block entirely if the component is an element**

## Naming Conventions

| Item            | Format                | Example                  |
| --------------- | --------------------- | ------------------------ |
| Directory/files | kebab-case            | `share-button`           |
| CSS class       | PascalCase            | `ShareButton`            |
| JS class        | PascalCase            | `class ShareButton`      |
| Custom element  | kebab-case, NO prefix | `share-button`           |
| Library name    | `<prefix>-<kebab>`    | `pattern-share-button`   |
| Schema $id      | `/<tier>/<kebab>`     | `/patterns/share-button` |

## Component Tiers

| Tier                | Location                              | Library Prefix        |
| ------------------- | ------------------------------------- | --------------------- |
| Elements            | `src/components/elements/`            | `element-`            |
| Patterns            | `src/components/patterns/`            | `pattern-`            |
| Template Components | `src/components/template-components/` | `template-component-` |
| Templates           | `src/components/templates/`           | `template-`           |

## Workflow

1. Create component directory: `src/components/<tier>/<component-name>/`
2. Create component files (twig, css, schema.yaml, mocks.yaml, and js **only if needed**)
3. Create CSS entry point: `src/css/<component-name>.css`
4. Add library definition to `<theme-name>.libraries.yml` (alphabetically in tier section)
5. Run linters to verify

## Optional Files

Pay attention to user requests indicating which files to skip:

| User says                         | Action                                    |
| --------------------------------- | ----------------------------------------- |
| "no JavaScript" / "CSS only"      | Skip .js file, omit `js:` from library    |
| "no CSS" / "JavaScript only"      | Skip .css files, omit `css:` from library |
| "schema only" / "just the schema" | Create only schema.yaml                   |

## Notes

- Skeletons provide structure, not functionality
- All files use tabs except YAML (2 spaces)
- Run linters after creation to verify