New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Ds Test Component

by baloise in baloise/design-system

Auto-generate all test files for DS components including visual, a11y, component, page object, and unit tests.

Apache-2.0Auto-check passedTesting & QA

Install Ds Test Component

skills CLI
$ npx skills add baloise/design-system --skill ds-test-component -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install baloise/design-system ds-test-component --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/baloise/design-system.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/ds-test-component .claude/skills/ds-test-component && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ds-test-component
GitHub stars
114
Token cost
~2.1k tokens
SKILL.md length
511 words
Files
6
Skills in repo
10
Repo updated
First seen
Licence
Apache-2.0

At a glance

Auto-generate all test files for DS components including visual, a11y, component, page object, and unit tests.

  • Works in 9 steps: Visual Tests → Accessibility Tests → Component Tests → …
  • Creating new components
  • SKILL.md covers Quick Start, What Gets Generated, Workflow and Example: Button Component, plus 2 more sections
  • Runs JavaScript scripts from its folder; calls pnpm

What it does

Ds Test Component is an agent skill from baloise/design-system. 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.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files (for example `README.md`, `REFERENCE.md` and `generators.js`).

It sits in Testing & QA, covering Accessibility, Unit testing and Test coverage. It works with Playwright. The repository describes itself as: The Baloise Design System consists of reusable components and a clearly defined visual style, that can be assembled together to build any number of applications. The licence is Apache-2.0.

When your agent uses it

  • Creating new components
  • Setting up comprehensive test coverage

Example prompts

  • “/ds-test-component”

Requirements

  • Node.js

Workflow steps

9 steps, taken from the step headings in SKILL.md.

  1. Visual Tests
  2. Accessibility Tests
  3. Component Tests
  4. Page Object
  5. Unit Tests (if applicable)
  6. Invoke
  7. Confirm Visual Props
  8. Confirm Slots
  9. Files Generated

What it can do on your machine

Read from SKILL.md and the folder at commit 19063c5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Ds Test Component loads about 2.1k tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 511 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~51
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from baloise/design-system at commit 19063c5, republished under its Apache-2.0 licence (© baloise). 511 words, ~2,096 tokens.

Download SKILL.mdSave it as .claude/skills/ds-test-component/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
ds-test-component
description
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.

Test Component

Auto-generates all test files for a Helvetia Design System component in one command.

Quick Start

Generate all tests for a component:

bash
ds-test-component button

Process:

  1. Parse component props, events, slots, parts, states
  2. Show checklists for visual props and slots
  3. Generate 6 file types (or fewer if not applicable)
  4. Report summary with test counts

Output files:

  • button.visual.html — Visual test fixture with variant sections
  • button.visual.play.ts — Playwright visual regression tests
  • button.a11y.play.ts — Comprehensive accessibility tests
  • button.component.play.ts — Event and behavior tests
  • button.po.ts — Page object in packages/playwright/src/lib/components/
  • button.util.spec.ts — Unit tests (if .util.ts exists)

What Gets Generated

1. Visual Tests

visual.html — Test fixture with sections:

  • Basic — Minimal component demo with auto-detected common props
  • Enum variants — All color/size values in one section per enum
  • State variants — Separate section per state (disabled, loading, invalid, etc.)
  • Slot demos — One section per slot, auto-detected from render() JSX

visual.play.ts — Playwright tests:

  • "style" suite: screenshots from button.style.html
  • "host" suite: screenshots from button.visual.html
  • One test per variant
Data-Driven Test Pattern (VARIANTS constant)

Use a simple string array VARIANTS constant to avoid repetitive test code:

Define VARIANTS with testid strings:

ts
const TAG = 'data'

const VARIANTS = ['basic', 'border', 'horizontal', 'multiline', 'required', 'disabled', 'custom-form'] as const

const image = screenshot(TAG)

Loop through variants in forEach:

ts
test.describe('host', () => {
  test.beforeEach('Setup', async ({ page }) => {
    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`)
  })

  VARIANTS.forEach(variant => {
    test(variant, async ({ page }) => {
      const el = page.getByTestId(variant)
      await expectScreenshot(el, image(variant))
    })
  })
})

If component has both style.html and visual.html:

ts
test.describe('style', () => {
  test.beforeEach('Setup', async ({ page }) => {
    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.style.html`)
  })

  VARIANTS.forEach(variant => {
    test(variant, async ({ page }) => {
      const el = page.getByTestId(variant)
      await expectScreenshot(el, image(`style-${variant}`))
    })
  })
})

test.describe('host', () => {
  test.beforeEach('Setup', async ({ page }) => {
    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`)
  })

  VARIANTS.forEach(variant => {
    test(variant, async ({ page }) => {
      const el = page.getByTestId(variant)
      await expectScreenshot(el, image(variant))
    })
  })
})

Benefits:

  • Simple — just a string array, no complex objects
  • DRY — one forEach covers all variants
  • Maintainable — testid is both the test name and selector
  • Scalable — works for any number of variants
  • Consistent — matches the tag component pattern
2. Accessibility Tests

a11y.play.ts — Comprehensive a11y coverage:

  • Axe-core checks (auto-detected violations)
  • Semantic checks (ARIA labels, roles, heading hierarchy)
  • Contrast checks (WCAG AA compliance)
  • Tests all variants (colors, sizes, states)
3. Component Tests

component.play.ts — Behavior tests:

  • Event tests — Auto-discovered from @Event() decorators
    • Verify each event fires
    • Verify event doesn't fire when expected (e.g., disabled)
  • State tests — Auto-discovered from boolean props
    • Assertions for each state (disabled, loading, invalid, etc.)
  • Slot tests — Verify each slot renders correctly
  • Value tests — If component has value prop, test hasValue() assertion
Show full SKILL.md (200 more words)Show less
4. Page Object

button.po.ts — Page object for testing:

  • Part locators — readonly property for each @part JSDoc tag
    • Pattern: native = this.el.locator('[part="native"]')
  • Action methods — click(), focus(), etc.
  • Assertion methods — assertToBeDisabled(), assertToBeLoading(), etc.
    • One method per boolean state prop
    • Plus hasValue() if component has value prop`

Located in: packages/playwright/src/lib/components/button.po.ts

5. Unit Tests (if applicable)

button.util.spec.ts — Tests for utility functions:

  • Auto-detects button.util.ts if it exists
  • Generates comprehensive test cases per function
    • Happy paths (valid inputs → expected outputs)
    • Edge cases (undefined, null, empty string, invalid values)
    • Type variations (if function accepts multiple types)
  • Ready to run with pnpm test

Workflow

Step 1: Invoke
bash
ds-test-component button
Step 2: Confirm Visual Props
Detected props: color, size, disabled, loading, icon, label

Which are visual props? (deselect unwanted)
  ✓ color (enum)
  ✓ size (enum)
  ✓ disabled (state)
  ✓ loading (state)
  ✓ icon (prop)
  ✗ label (skip)
Step 3: Confirm Slots
Detected slots: icon, label, badge

Which to demo? (deselect unwanted)
  ✓ icon
  ✓ label
  ✓ badge
Step 4: Files Generated
✓ button.visual.html (8 variant sections)
✓ button.visual.play.ts (16 visual tests)
✓ button.a11y.play.ts (12 a11y tests)
✓ button.component.play.ts (8 event + 4 state tests)
✓ button.po.ts (5 parts + 4 assertions)
✓ button.util.spec.ts (4 utils, 18 test cases)

Next: Review files, run tests: pnpm play, pnpm test

Example: Button Component

Generated visual.html sections:
html
<!-- Basic -->
<section data-testid="basic">
  <span>Basic</span>
  <ds-button icon="plus">Button</ds-button>
</section>

<!-- Colors (enum) -->
<section data-testid="colors">
  <span>Colors</span>
  <ds-button color="primary">Primary</ds-button>
  <ds-button color="secondary">Secondary</ds-button>
  ...
</section>

<!-- Disabled (state) -->
<section data-testid="disabled">
  <span>Disabled</span>
  <ds-button disabled>Disabled</ds-button>
</section>

<!-- Icon slot demo -->
<section data-testid="slot-icon">
  <span>Slot: Icon</span>
  <ds-button><ds-icon name="plus"></ds-icon>Button</ds-button>
</section>
Generated component test:
ts
test('should fire dsClick event', async ({ page }) => {
  await page.mount(`<ds-button>Click me</ds-button>`)
  const dsButton = new DsButton(page.locator('ds-button'))
  const spy = await dsButton.el.spyOnEvent('dsClick')

  await dsButton.click()
  expect(spy).toHaveReceivedEventTimes(1)
})

test('should not fire dsClick when disabled', async ({ page }) => {
  await page.mount(`<ds-button disabled>Disabled</ds-button>`)
  const dsButton = new DsButton(page.locator('ds-button'))
  const spy = await dsButton.el.spyOnEvent('dsClick')

  await dsButton.assertToBeDisabled()
  expect(spy).toHaveReceivedEventTimes(0)
})
Generated page object:
ts
export class DsButton extends PageObject {
  readonly native = this.el.locator('[part="native"]')
  readonly spinner = this.el.locator('[part="spinner"]')
  readonly icon = this.el.locator('[part="icon"]')

  async click() {
    await this.native.click()
  }

  async assertToBeDisabled() {
    await expect(this.el).toHaveAttribute('disabled')
  }

  async assertToBeLoading() {
    await expect(this.el).toHaveAttribute('loading')
  }

  async hasValue(value: string) {
    await expect(this.el).toHaveValue(value)
  }
}

Key Behaviors

  • ✅ Auto-discovers events from @Event() decorators
  • ✅ Auto-discovers states from boolean props (disabled, loading, invalid, checked, etc.)
  • ✅ Auto-discovers slots from render() JSX, auto-generates demo content
  • ✅ Auto-discovers parts from @part JSDoc tags
  • ✅ Auto-discovers utils — generates comprehensive tests if .util.ts exists
  • ✅ Never skips visual props that user confirms — all get sections
  • ✅ Never skips events or states — all get test coverage
  • ✅ Comprehensive unit tests — not stubs; edge cases included

See REFERENCE.md for detailed generation rules for each test type.

© baloise, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files in .claude/skills/ds-test-component of baloise/design-system.

  • SKILL.md
  • README.md
  • REFERENCE.md
  • generators.js
  • implementation.js
  • index.js

Open the folder on GitHubat commit 19063c5

Compare with similar skills

Ds Test Component next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Ds Test Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ds Test Component this skillbaloise/design-system114—~2.1kAutomated safety check: PassApache-2.0
React Testingaffaan-m/ECC274k1 repos~3.3kAutomated safety check: PassMIT
PlaywrightEliasOulkadi/shokunin114—~3.6kAutomated safety check: NotesMIT
Playwright Testingchongdashu/vibejam-starter-pack149—~2.1kAutomated safety check: PassNone
Playwright Testingchongdashu/vibejam-starter-pack149—~2.2kAutomated safety check: PassNone
Testingradix-ng/primitives274—~3.3kAutomated safety check: PassMIT

Similar skills

  • React Testing

    affaan-m/ECC

    React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress…

    274k GitHub starsUsed in 1 repo~3.3k tokens
    Testing & QAAuto-check passed

  • Playwright

    EliasOulkadi/shokunin

    Browser automation, web scraping, E2E testing, and visual regression with Playwright.

    114 GitHub stars~3.6k tokensUpdated 2 days ago
    Testing & QAAuto-check: notes

  • Playwright Testing

    chongdashu/vibejam-starter-pack

    Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.

    149 GitHub stars~2.1k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed

  • Playwright Testing

    chongdashu/vibejam-starter-pack

    Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.

    149 GitHub stars~2.2k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed

  • Testing

    radix-ng/primitives

    Test Radix NG primitives across every layer and pick the RIGHT one for a change: Vitest unit (zoneless), jest-axe a11y, Playwright browser regression (apps/visual-regression), SSR…

    274 GitHub stars~3.3k tokensUpdated 8 days ago
    Testing & QAAuto-check passed

  • Test Specialist

    travisjneuman/.claude

    Test-writing patterns for JS/TS, Python, Go, and Rust (unit, integration, E2E, visual regression).

    101 GitHub stars~3.7k tokensUpdated yesterday
    Testing & QAAuto-check passed

More from baloise/design-system

All 10 skills in this repo

  • Ds Migrate From Baloise

    baloise/design-system

    Migrate a consuming app from the Baloise Design System (bal-) to the Helvetia Design System (ds-).

    114 GitHub stars~1.4k tokensUpdated yesterday
    Auto-check passed

  • Ds Changeset

    baloise/design-system

    Create a changeset entry for pending changes using the repo's create-changeset.mjs CLI.

    114 GitHub stars~719 tokensUpdated yesterday
    Auto-check passed

  • Ds Create Component

    baloise/design-system

    Create new web components in the Helvetia Design System. An agent skill from baloise/design-system.

    114 GitHub stars~2.1k tokensUpdated yesterday
    Auto-check passed

  • Ds Lint Component

    baloise/design-system

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

    114 GitHub stars~1.4k tokensUpdated yesterday
    Auto-check passed

  • Ds Token Lint

    baloise/design-system

    Check a component's design tokens in Base.tokens.json against the canonical naming convention (packages/tokens/CONTEXT.md "Token Naming Anatomy"), report violations as a markdown table, and apply…

    114 GitHub stars~2.5k tokensUpdated yesterday
    Auto-check passed

  • Ds Update Screenshots

    baloise/design-system

    Post the /update-screenshots bot command as a PR comment to re-baseline visual regression snapshots for one or more components.

    114 GitHub stars~861 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Ds Test Component

What does Ds Test Component do?

Auto-generate all test files for DS components including visual, a11y, component, page object, and unit tests. Ds Test Component is an agent skill from baloise/design-system. Auto-generate all test files for DS components including visual, a11y, component, page object, and unit tests.

When should I use Ds Test Component?

Ds Test Component fits situations like: creating new components; setting up comprehensive test coverage.

How do I install Ds Test Component in Claude Code?

Run `npx skills add baloise/design-system --skill ds-test-component -a claude-code`. Or copy the skill folder (.claude/skills/ds-test-component in baloise/design-system) into .claude/skills/ds-test-component in your project. Claude Code loads it when a task matches its description.

How do I install Ds Test Component in Codex?

Run `npx skills add baloise/design-system --skill ds-test-component -a codex`. Or copy the skill folder (.claude/skills/ds-test-component in baloise/design-system) into .agents/skills/ds-test-component in your project. Codex loads it when a task matches its description.

Can I use Ds Test Component in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add baloise/design-system --skill ds-test-component -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ds-test-component, .gemini/skills/ds-test-component, .github/skills/ds-test-component and .opencode/skills/ds-test-component in your project.

What does Ds Test Component need to run?

Going by SKILL.md and its folder, Ds Test Component needs JavaScript for the scripts in its folder and the command-line tools its instructions call (pnpm). Our summary lists: Node.js.

Does Ds Test Component access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Ds Test Component safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Ds Test Component use?

Ds Test Component is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Ds Test Component use?

About 2.1k tokens (SKILL.md is roughly 8.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Ds Test Component?

Skills that share tags, products or a category with Ds Test Component: React Testing (affaan-m/ECC, 274k stars), Playwright (EliasOulkadi/shokunin, 114 stars), Playwright Testing (chongdashu/vibejam-starter-pack, 149 stars) and Playwright Testing (chongdashu/vibejam-starter-pack, 149 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ds Test Component?

baloise (a GitHub organization) maintains it in baloise/design-system, which has 114 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 6, 2026.

Source: baloise/design-system on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.