| name | component-creation |
| description | Guide for creating new Elements components with all required files, base classes, metadata patterns, and test boilerplate. Use this skill whenever the user wants to create, scaffold, or set up a new component from scratch, needs to understand the required 10-file structure, asks about base classes and mixins (LitElement vs ButtonFormControlMixin), define.ts vs index.ts patterns, static metadata, component registration, or sub-component parent relationships. Also trigger when the user mentions creating test boilerplate for all 5 test types. |
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
Must Read File
Read the component creation guide to get critical context for component creation guidance.
Workflow
- 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 methodcomponent-name.css:styles using CSS custom propertiescomponent-name.examples.ts:example templates with @summary JSDoccomponent-name.test.ts:unit testscomponent-name.test.axe.ts:accessibility testscomponent-name.test.visual.ts:visual regression testscomponent-name.test.ssr.ts:SSR testscomponent-name.test.lighthouse.ts:lighthouse testsdefine.ts:registration using define() helper with HTMLElementTagNameMapindex.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.
References
Reference Components
/projects/core/src/button/ - ButtonFormControlMixin pattern example/projects/core/src/badge/ - LitElement pattern example/projects/core/src/card/ - Composition with slots example
