Agent skill
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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/component-scaffold-pixu1980-karaoke-tracker
Metadata
Additional technical details for this skill
- author
- AI Agents
- version
- 1.0
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?