component-scaffolding

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

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/

└── .libraries.yml

```

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

Theme Name Discovery

The 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.

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

```twig

{{ attach_library("/pattern-") }}

```

• Library name: pattern- (kebab-case)
• CSS class: (PascalCase)
• Single tab indentation

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

```css

/* @define ; /

. {

/ 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 extends HTMLElement {

constructor() {

super();

}

connectedCallback() {

this.#addEventListeners();

}

/**

* Add event listeners

*/

#addEventListeners() {

// Add event listeners here

}

}

customElements.define("", );

```

• 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: //

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///.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-:

header: true

css:

component:

build/assets/css/.css: {}

js:

build/assets/components///.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

| 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 | - | pattern-share-button |

| Schema $id | // | /patterns/share-button |

| 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- |

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

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 |

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