create-component

Scaffold BEEQ web components with StencilJS structure and supporting files.

160|24|Updated Feb 22, 2023

Search Tags:#scaffolding #storybook #nx #web-components #stenciljs #beeq

Ready to run

npx skills add https://github.com/Endava/BEEQ --skill create-component-endava

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/Endava/BEEQ/tree/main/.agents/skills/create-component
Command: npx skills add https://github.com/Endava/BEEQ --skill create-component-endava

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the repetitive setup work involved in creating a new BEEQ web component, so you can move from idea to a consistent scaffold without manually assembling files, conventions, and documentation.

Core Features & Use Cases

Component Scaffolding: Generates the component shell, supporting types, styles, stories, and tests in the expected BEEQ structure.
Design System Consistency: Enforces naming, section ordering, JSDoc, Shadow DOM, and monorepo placement rules so new components match the existing system.
Implementation Guidance: Helps you continue an in-progress scaffold by following the same conventions for props, events, methods, accessibility, and build verification.

Quick Start

Ask this skill to scaffold a new BEEQ component named slider and include the styling, types, and Storybook files you need.

Frequently Asked Questions about create-component

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

FAQPage Schema

How do I scaffold a new StencilJS web component in an Nx monorepo?▼

To scaffold a StencilJS web component in an Nx monorepo, you need to generate the component shell, supporting types, styles, and tests while enforcing design system naming conventions and Shadow DOM structure.

What's the best way to generate Storybook stories for web components?▼

Generating Storybook stories for web components is best handled by scaffolding the component with its supporting files, ensuring design system consistency, JSDoc documentation, and interactive variants are included from the start.

Can I create form-associated web components using StencilJS?▼

Yes, you can create form-associated web components using StencilJS by scaffolding the specific component variant, which automatically enforces the required prop validation, naming rules, and build verification.

How do I resume an incomplete web component scaffold in StencilJS?▼

To resume an incomplete web component scaffold in StencilJS, you continue applying the established conventions for props, events, methods, and accessibility, ensuring the final output meets design system consistency and build verification requirements.

Does this scaffolding tool support compound component variants?▼

Yes, this scaffolding tool supports generating compound component variants, applying the correct BEEQ naming conventions, StencilJS structure, JSDoc documentation, and Shadow DOM rules to ensure design system consistency.

What conventions are enforced when scaffolding design system components?▼

Scaffolding design system components enforces specific naming, section ordering, JSDoc documentation, Shadow DOM conventions, prop validation, and build verification to ensure new components match the existing system architecture.