Menü
Create design tokens for a component from its CSS variables
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Create new web components in the Helvetia Design System. Generates Stencil component files with shadow DOM, interfaces, SCSS with design tokens, and visual HTML. Use when building a new component, migrating from the old design system, or creating subcomponents.
Use when writing or generating Storybook documentation for a Baloise Design System component — creates stories.ts, doc-config.ts, and six MDX subpages (Overview, Usage, Variants, Styling, Accessibility, Testing) using reusable Storybook blocks (ComponentLead, ComponentPublicMethods, ComponentParts, CanvasTabs, ComponentPageObject) for dynamic data binding to components.json
Auto-generate all test files for DS components including visual, a11y, component, page object, and unit tests. Use when creating new components or setting up comprehensive test coverage.
Lint and fix Helvetia Design System components for style guide compliance. Checks prop validation coverage, divider comment formatting, and lifecycle hook setup. Use when building or reviewing DS components, or when user asks to lint/check a component.
Generate phased implementation plans for design system components with adaptive scope, design decisions, and risk assessment
| name | ds-create-token |
| description | Create design tokens for a component from its CSS variables |
Create component design tokens from CSS variables defined in a component's SCSS file. The skill analyzes vars.local() calls and variant --mod- variables, suggests component token paths, and creates them in Base.tokens.json.
/ds-create-token <component-name>
Examples:
/ds-create-token badge
/ds-create-token button
/ds-create-token footer
@include vars.local() and --mod- variablesFor each variable:
ds-find-token skill to find matching alias tokens
--ds-[component]-[variant]-[element]-[category]-[property]-[state]
Base.tokens.jsonBase.tokens.jsonpnpm tokens to compile outputsComponent tokens always follow this structure:
--ds-[component]-[variant]-[element]-[category]-[property]-[state]
Example: --ds-badge-primary-color-base-text
component: badgevariant: primaryelement: (skipped if not present)category: colorproperty: textstate: basepackages/core/src/components/.host.scss file with vars.local() definitionspnpm tokens first if needed)JSDoc Comments: When generating or updating JSDoc comments in the SCSS file, do NOT include default values in parentheses. Only include the property name and description. Example:
@prop --button-color: Text color of the button@prop --button-color: Text color of the button (default: --ds-alias-text-color-white)