Run any Skill in Manus with one click

component-creation

Stars25

Forks6

UpdatedJune 3, 2026 at 21:28

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

NVIDIA

NVIDIA/elements

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name

component-creation

description

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

References

Component Creation Guide - Complete component creation workflow
TypeScript Guidelines - Type safety patterns
Examples Guidelines - Example file structure
Testing Guidelines - Testing strategy
API Design - Properties - Property design patterns
API Design - Styles - CSS custom properties

Reference Components

/projects/core/src/button/ - ButtonFormControlMixin pattern example
/projects/core/src/badge/ - LitElement pattern example
/projects/core/src/card/ - Composition with slots example

More from this repository

same repository

availability-report

NVIDIA/elements

Generate a production availability report for NVIDIA Elements packages and documentation.

2026-07-0925

accessibility

NVIDIA/elements

Unified accessibility auditing workflow across static analysis, runtime testing, ARIA patterns, keyboard navigation, and color contrast. Use this skill whenever the user mentions accessibility, a11y, WCAG, ARIA roles, axe tests, screen readers, focus management, keyboard navigation, color contrast, or wants to audit, verify, or fix accessibility on any component. Also use when writing or debugging .test.axe.ts files, checking tabindex management, or reviewing focus trapping behavior.

2026-05-0825

api-design

NVIDIA/elements

Component API design patterns following Elements conventions for properties, attributes, CSS custom properties, slots, and events. Use this skill whenever the user is designing or deciding on a component API, choosing between properties vs attributes vs slots, naming CSS custom properties, designing events, avoiding impossible states, deciding whether to reflect to an attribute, using CSS Parts, implementing the DataElement interface, or applying the internal-host pattern. Also trigger when the user asks about shorthand vs granular CSS properties or event naming conventions.

2026-05-0825

build-system

NVIDIA/elements

Wireit orchestration, build optimization, caching strategies, and build troubleshooting for the Elements monorepo. Use this skill whenever the user asks about Wireit configuration, build tasks, build dependencies, cache invalidation, build performance, adding new build tasks to package.json, cross-package dependency patterns, sideEffects declarations, CI pipeline configuration, or diagnosing slow or failing builds. Also trigger when the user mentions wireit, vite build issues, pnpm run ci, or build output problems.

2026-05-0825

code-review

NVIDIA/elements

Comprehensive code review process for Elements monorepo changes. Provides structured feedback on type safety, testing, documentation, and adherence to project guidelines. Use this skill whenever the user asks you to review code, check staged changes, look at a diff, give feedback before committing, review a PR or merge request, or evaluate code quality. Trigger on phrases like "review my changes," "check my code," "give me feedback," "look at my staged files," "review this PR," or "before I commit."

2026-05-0825

documentation

NVIDIA/elements

Guidelines for writing documentation files including 11ty templates, Eleventy shortcodes, JSDoc annotations, and markdown content. Use this skill whenever the user works with documentation markdown files, Vale prose linting errors, Eleventy shortcodes (dodont, example), frontmatter, JSDoc annotations that must pass Vale, or the documentation site. Also trigger when the user mentions Vale errors, adding terms to the vocabulary, suppressing Vale rules, or writing and fixing prose in .md or .ts files.

2026-05-0825

name

component-creation

description

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

References

Component Creation Guide - Complete component creation workflow
TypeScript Guidelines - Type safety patterns
Examples Guidelines - Example file structure
Testing Guidelines - Testing strategy
API Design - Properties - Property design patterns
API Design - Styles - CSS custom properties

Reference Components

/projects/core/src/button/ - ButtonFormControlMixin pattern example
/projects/core/src/badge/ - LitElement pattern example
/projects/core/src/card/ - Composition with slots example