component-scaffolding

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

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

/** @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.

// @ts-check

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

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

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

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