skills.rest
IgniteUI
IgniteUIOFFICIAL
Explore all skills by this author →
WebsiteGitHub

create-new-component

Generate a Lit web component scaffold with theme files, tests, Storybook story, and exports.

169|10|Updated May 12, 2021
Search Tags:#testing#scaffold#storybook#web components#generate#lit
One-click install
npx skills add https://github.com/IgniteUI/igniteui-webcomponents --skill create-new-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-new-component
Source: https://github.com/IgniteUI/igniteui-webcomponents/tree/main/.github/skills/create-new-component
Command: npx skills add https://github.com/IgniteUI/igniteui-webcomponents --skill create-new-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating new Lit web components from scratch is repetitive and error-prone; this skill provides a standardized scaffold that enforces project conventions, ensuring consistent structure, exports, theming, and tests.

Core Features & Use Cases

  • End-to-end scaffolding: component class, styles, tests, Storybook story, and exports.
  • Theming and exports: includes theming integration and ready-to-export module.
  • Documentation and QA readiness: includes JSDoc, accessibility-audited tests, and Storybook story.

Quick Start

Create a new component named my-component following the conventions to generate the full scaffold.

Frequently Asked Questions about create-new-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a new Lit web component with Storybook and tests?▼

To scaffold a Lit web component, this skill automates the end-to-end creation of the component class, theme files, accessibility-ready tests, Storybook story, and module exports, enforcing project directory conventions.

What is the best way to generate a consistent directory structure for Lit components?▼

Generating a consistent directory structure for Lit components is handled by automating the frontmatter-driven metadata, theming integration, and index exports, preventing manual setup errors and ensuring standardization.

Does this Lit component generator include theming and accessibility testing?▼

Yes, this Lit component generator includes theming integration and accessibility-audited tests, ensuring the newly scaffolded web component is visually consistent and meets accessibility requirements out of the box.

Can I bootstrap a complete web component end-to-end without manual configuration?▼

You can bootstrap a complete web component end-to-end without manual configuration by using this skill to automatically generate the component class, styles, JSDoc, Storybook stories, and ready-to-export module files.

Why use an automated scaffold for Lit web components instead of starting from scratch?▼

Using an automated scaffold for Lit web components eliminates the repetitive and error-prone manual setup process, immediately providing standardized directory structure, exports, theming, and QA-ready tests.

What files are generated when creating a new Lit component scaffold?▼

When creating a new Lit component scaffold, the generated files include the component class, theme files, tests with accessibility audits, a Storybook story, JSDoc documentation, and the necessary index exports.

Related Skills

Explore More Software Engineering Skills→
rodydavisrodydavis
58

lit-and-vscode-extensions

Create VSCode extensions with Lit web components using Node.js, TypeScript, and Vite.

Community
Intermediate
GainInsightDevGainInsightDev

af-write-rtl-tests

Generate React Testing Library tests for UI behavior and accessibility.

Official
Intermediate
masrurimzmasrurimz

doc-writer

Generate JSDoc/TSDoc comments, READMEs, and API documentation across codebases.

Community
Basic
buisihung11buisihung11

nx-generate

Generate applications and libraries using Nx generators in a monorepo.

Community
Intermediate