Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

$pwd:

component-creation

Name: Component Creation
Author: NVIDIA

// 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 (LitElement vs BaseButton), 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.

In Manus ausführen

$ git log --oneline --stat

stars:8

forks:1

updated:8. Mai 2026 um 20:48

SKILL.md

readonly

related-skills.json

gleiches Repository

accessibility.md

from "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-088

api-design.md

from "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-088

build-system.md

from "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-088

code-review.md

from "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-088

documentation.md

from "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-088

examples.md

from "NVIDIA/elements"

Guidelines for writing example template files (*.examples.ts) including naming conventions, @summary JSDoc comments, and stateless HTML patterns. Use this skill whenever the user creates, modifies, or reviews *.examples.ts files, asks about example naming rules (PascalCase, 3-word max, no component prefix), needs to write or improve @summary JSDoc comments, encounters example-naming ESLint errors, or wants to add stateless or interactive examples to a component's example file.

2026-05-088

package.json

"author": "NVIDIA"

"repository": "NVIDIA/elements"

GitHub-Repository öffnen Creator-Repositorys ansehen

$ install --global

$ download --local

In Manus ausführen

$ useful --forSOC

SoftwareentwicklerInformatik- und Mathematikberufe15-1252L4

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 (LitElement vs BaseButton), 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 (BaseButton 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 which base class to use (LitElement for most components, BaseButton 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 component is registered in the bundle.
Verify:confirm all files follow the templates in the component creation guide, run pnpm run lint and pnpm run test from the elements project.

Additional 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/ - BaseButton pattern example
/projects/core/src/badge/ - LitElement pattern example
/projects/core/src/card/ - Composition with slots example

component-creation

Mehr aus diesem Repository

Mehr aus diesem Repository

Component Creation

When to Use This Skill

Must Read File

Workflow

Additional References

Reference Components

Component Creation

When to Use This Skill

Must Read File

Workflow

Additional References

Reference Components