Skills
.Work. You
Rest

ds-create-component

Official

Effortlessly generate web components for the Helvetia Design System.

Software Engineering#TypeScript#design system#component generation#SCSS#Stencil
Authorbaloise
Version1.0.0
Installs0

System Documentation

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

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ds-create-component
Download link: https://github.com/baloise/design-system/archive/main.zip#ds-create-component

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.