Claude Code Plugins

Community-maintained marketplace

Feedback

component-scaffold

@pixu1980/karaoke-tracker
0
0

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 Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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
metadata [object Object]

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.