component-creation

Component Creation

You MUST review the component creation guideline before creating or modifying components.

When to Use This Skill

Creating a new component from scratch
Understanding the required file structure for components
Setting up test boilerplate for all 5 test types
Choosing the appropriate base class or mixin (ButtonFormControlMixin vs LitElement)
Understanding component metadata and registration patterns
Setting up JSDoc comments for components

Read the component creation guide to get critical context for component creation guidance.

Gather requirements: confirm the component name (kebab-case), purpose, and whether to use LitElement directly or apply ButtonFormControlMixin for button-like interactive components.
Study a reference: read the closest reference component listed below to understand the pattern in practice.
Create the 10 required files in projects/core/src/<component-name>/:
- component-name.ts:component class with metadata, JSDoc, and render method
- component-name.css:styles using CSS custom properties
- component-name.examples.ts:example templates with @summary JSDoc
- component-name.test.ts:unit tests
- component-name.test.axe.ts:accessibility tests
- component-name.test.visual.ts:visual regression tests
- component-name.test.ssr.ts:SSR tests
- component-name.test.lighthouse.ts:lighthouse tests
- define.ts:registration using define() helper with HTMLElementTagNameMap
- index.ts:side-effect-free export
Update bundle: add import '@nvidia-elements/core/<component-name>/define.js' to projects/core/src/bundle.ts in alphabetical order so the bundle registers the component.
Verify: confirm all files follow the templates in the component creation guide, run pnpm run lint and pnpm run test from the elements project.