skills.rest
baloise
baloiseOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ds-create-component

Generate Stencil web components with TypeScript, SCSS, and visual test files.

111|29|Updated Oct 4, 2019
Search Tags:#TypeScript#design system#component generation#SCSS#Stencil
One-click install
npx skills add https://github.com/baloise/design-system --skill ds-create-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ds-create-component
Source: https://github.com/baloise/design-system/tree/main/.claude/skills/ds-create-component
Command: npx skills add https://github.com/baloise/design-system --skill ds-create-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation of new web components in the Helvetia Design System, reducing development time and ensuring compliance with design standards.

Core Features & Use Cases

  • Automated Component Generation: Generates complete Stencil components with TypeScript, SCSS, and visual test files in one pass.
  • Component Customization: Supports customization through an interactive questionnaire covering props, events, and variants.
  • Migration Assistance: Offers migration assistance from old design system components, including prop and event extraction.
  • Use Case: If you need to create a new 'tabs' component for your web application, this Skill can generate the component files, including TypeScript, SCSS, and visual test files.

Quick Start

Generate a new component by running the command: /ds-create-component

Frequently Asked Questions about ds-create-component

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

FAQPage Schema
How do I generate web components for a design system using Stencil?▼

You can generate web components for the Helvetia Design System using an interactive questionnaire that automates the creation of Stencil components with TypeScript, SCSS, and visual test files.

How do I migrate old design system components to a new Stencil component structure?▼

Migration assistance from old design system components is supported through prop and event extraction, allowing you to transition existing components into the new Stencil-based structure.

Do I need design system tokens and variables to create Stencil components?▼

Yes, the design system's variables and tokens are required to generate web components that ensure compliance with the established design standards.

Can I customize component props and events when generating TypeScript web components?▼

Customization is supported through an interactive questionnaire that covers component props, events, and variants during the automated TypeScript and SCSS file generation process.

What files are included when generating a web component for a TypeScript design system?▼

Generating a web component produces complete Stencil component files, including TypeScript, SCSS, and visual test files in a single automated pass.

Related Skills

Explore More Software Engineering Skills→
ll1llkll1llk

design-system

Manage token-based UI design and generate slides with design tokens.

Community
Advanced
alekspetrovalekspetrov
196

visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

Community
Advanced
spallempatispallempati

zds-design-system

Enforce Zelis Design System standards for Bootstrap 5 UI components.

Community
Intermediate
baloisebaloise
111

ds-lint-component

Lint and fix Helvetia Design System components for style guide compliance.

Official
Advanced