skills.rest
baloisebaloiseOfficial·6 Agent Skills Included

design-system

Plan, build, test, and document design system components

Generates web components, design tokens, tests, and Storybook documentation for the Baloise design system. Removes manual scaffolding, token naming errors, and repetitive test writing across component workflows. Lints components against style guide rules and keeps visual regression baselines up to date automatically.
111|29
↗
npx skills add baloise/design-system --all -g -y
Available:

Gives your AI agent the design system's core principles, build commands, coding rules, and package context files so it can work on components correctly.

All Skills in This Repository (6)

Pure Emerald Level Indicators
📦 In Repo
baloisebaloise

ds-test-component

Generate visual, accessibility, and unit tests for Helvetia Design System components.

Official
Advanced
📦 In Repo
baloisebaloise

ds-create-token

Analyze SCSS files to create design tokens in Base.tokens.json.

Official
Intermediate
📦 In Repo
baloisebaloise

ds-plan

Interview users and generate phased implementation plans for Helvetia Design System components.

Official
Advanced
📦 In Repo
baloisebaloise

ds-document-component

Generate six MDX documentation subpages for Baloise Design System components.

Official
Advanced
📦 In Repo
baloisebaloise

ds-lint-component

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

Official
Advanced
📦 In Repo
baloisebaloise

ds-create-component

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

Official
Intermediate

Frequently Asked Questions

FAQPage Schema
How to install Baloise Design System skills?▼

Run `npx skills add baloise/design-system --all -g -y` in your terminal to install all skills globally.

How to create a new design system component?▼

Use the ds-create-component skill, which asks a short questionnaire and generates the Stencil component, interfaces, styles, and visual test file in one pass.

How to generate tests for a UI component?▼

The ds-test-component skill auto-creates visual, accessibility, behavior, page object, and unit tests by reading the component's props, events, and slots.

How to fix design token naming issues?▼

The ds-token-lint skill checks a component's tokens against the official naming convention, reports violations, and applies approved renames across JSON and SCSS files.

Do these skills work with Claude Code?▼

Yes. All skills follow the standard SKILL.md format and run directly in Claude Code and other compatible coding environments.

Related Repositories in Design & Creative

View All in Design & Creative→
nextlevelbuildernextlevelbuilder
123.5k

ui-ux-pro-max-skill

AI design intelligence for professional UI, brands, and presentations

Official📦 13 Skills
shadcn-uishadcn-ui
122.7k

ui

Build and customize beautiful React component libraries with AI

Official📦 2 Skills
nexu-ionexu-io
93.2k

open-design

Open-source AI design studio for decks, prototypes, images, and video

Official📦 394 Skills