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

- Skill: `majiayu000/component-scaffold-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/component-scaffold-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/component-scaffold-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/component-scaffold-2

---


## 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](references/REFERENCE.md).

For project-specific conventions (naming, bundling, templating), see the project's `.context/` directory.