component-scaffold
Scaffold and conventions to create a new UI component following project patterns (no Shadow DOM, static stylesheet registration, pixEngine templates). Use when adding a new custom element to the app.
When & Why to Use This Skill
This Claude skill streamlines the development process by scaffolding new UI components according to specific project conventions. It automates the creation of custom elements, ensuring consistent use of pixEngine templates, static stylesheet registration, and lifecycle management while bypassing Shadow DOM for better integration with existing project patterns.
Use Cases
- Rapidly generating the boilerplate for new custom elements, including the necessary JS, CSS, and HTML template files.
- Ensuring all new UI components adhere to internal architectural patterns and naming conventions to maintain codebase consistency.
- Simplifying the setup of component lifecycle and style registration for developers working within a pixEngine-based environment.
| name | component-scaffold |
|---|---|
| description | Scaffold and conventions to create a new UI component following project patterns (no Shadow DOM, static stylesheet registration, pixEngine templates). Use when adding a new custom element to the app. |
| license | MIT |
| author | AI Agents |
| version | "1.0" |
When to use this skill
Use this skill when you need to add a new Custom Element-based UI component to the app following repository conventions (no Shadow DOM, register styles, use pixEngine templates).
Use this skill when you need to create a new reusable UI component following project conventions. This skill covers component structure, lifecycle management, and code organization patterns.
Quick start
- Create a component directory with
ComponentName.js,ComponentName.css, andComponentName.template.html. - Register styles via
registerStylesheet()in the static block and define the custom element.
For detailed examples, patterns, and quality checklist see references/REFERENCE.md.
For project-specific conventions (naming, bundling, templating), see the project's .context/ directory.