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.

majiayu000 248e180 2 files · 2.1 KB Updated 567 repo stars

File contents

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

  1. Create a component directory with ComponentName.js, ComponentName.css, and ComponentName.template.html.
  2. 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.

majiayu000/claude-skill-registry-data/tree/main/design/component-scaffold commit 248e180d14

Frequently asked questions

npx skillmds add majiayu000/component-scaffold-2