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 Document Component

by baloise in baloise/design-system

A skill your agent uses 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…

Apache-2.0Auto-check passedFrontend & Design

Install Ds Document Component

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

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

GitHub CLI
$ gh skill install baloise/design-system ds-document-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-document-component .claude/skills/ds-document-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-document-component
GitHub stars
114
Token cost
~6.3k tokens
SKILL.md length
1,070 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses 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…

  • Works in 2 steps: Gather context → Present story sections
  • Generating Storybook documentation for a Baloise Design System component — creates stories.ts
  • SKILL.md covers Key Rules, Title and storyId Conventions, Process and .stories.ts, plus 10 more sections
  • Calls pnpm; reaches w3.org

What it does

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

Its SKILL.md is about 6.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Markdown, Accessibility and Design systems. It works with Storybook. 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

  • Generating Storybook documentation for a Baloise Design System component — creates stories.ts
  • Six MDX subpages (Overview
  • Testing) using reusable Storybook blocks (ComponentLead
  • ComponentPublicMethods

Example prompts

  • “/ds-document-component”

Workflow steps

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

  1. Gather context
  2. Present story sections

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

    Shell commands in SKILL.md call:

    • pnpm

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • w3.org

    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 Document Component loads about 6.3k tokens when it runs. Until then it costs about 100 tokens; SKILL.md has 1,070 words of instructions outside code blocks.

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

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). 1,070 words, ~6,347 tokens.

Download SKILL.mdSave it as .claude/skills/ds-document-component/SKILL.md (or your agent's skills folder).
name
ds-document-component
description
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

Write Component Docs

Generates a complete documentation set for a component in apps/storybook/src/components/<category>/<component>/ (mirroring the component's category folder in packages/core/src/components/; see apps/storybook/CONTEXT.md for the taxonomy). The canonical reference for structure and style is the tag component (apps/storybook/src/components/indicators/tag/).

Each component gets exactly six MDX files plus two TypeScript support files:

FilePurpose
1-Overview.mdxCanvas (type-dependent) + Controls + ComponentLead + ComponentPublicMethods
2-Usage.mdxWhen to use, do's/don'ts, UsageExamples
3-Variants.mdxAll story variants with Canvas (type-dependent)
4-Styling.mdxComponentParts + ComponentCssVariables + ComponentDesignTokens
5-Accessibility.mdxWCAG guidelines via A11yGuidelines
6-Testing.mdxComponentPageObject — PO API table + example test + install guide
<component>.stories.tsStencil story exports — both 🧩 (web component) and 🌍 (HTML/CSS) pairs
<component>.doc-config.tsShared section/color/tabs config

Do NOT create api.md (auto-generated by Stencil), .parts.svg, or any other files.

Key Rules

  • Category-prefixed title — Storybook title is always Components/<Category>/<ComponentName>/..., where <Category> matches the component's folder in packages/core/src/components/<category>/ (see apps/storybook/CONTEXT.md).
  • Color is always purple for all components.
  • Canvas component choice is type-dependent:
    • Web Components only (WC only): Use <CanvasWithCodePen of={Stories.Basic} sourceState="shown" /> — shows CodePen embed without HTML tab
    • Hybrid or CSS-only: Use <CanvasTabs htmlOf={Stories.BasicHtml} of={Stories.Basic} /> — shows both web component and HTML/CSS tabs
  • Stories have dual variants: every story comes in a 🧩 Name (web component, ds-* tags) and a 🌍 Name (HTML/CSS classes only) pair.
  • 4-Styling.mdx uses ComponentCssVariables and ComponentDesignTokens — NOT TokenOverview.

Title and storyId Conventions

stories.ts
ts
title: 'Components/<Category>/<ComponentName>/Variants'
MDX Meta titles
FileMeta title pattern
1-Overview.mdx"Components/<Category>/<Name>/<Name>"
2-Usage.mdx"Components/<Category>/<Name>/Usage"
3-Variants.mdx"Components/<Category>/<Name>/Variants/Overview"
4-Styling.mdx"Components/<Category>/<Name>/Styling"
5-Accessibility.mdx"Components/<Category>/<Name>/Accessibility"
6-Testing.mdx"Components/<Category>/<Name>/Testing"

Why <Name>/<Name> for Overview? Storybook uses the last path segment as the sidebar/search label. Using the component name as the last segment makes the search show "Button" (not "Documentation") as the primary result, while keeping the page correctly nested under Components/<Category>/<Name> in the sidebar.

Why a static string, not a computed title? Storybook's CSF/MDX indexer requires title to be a static string literal — a helper function call (e.g. deriving the category from import.meta.url) fails to index with CSF: unexpected dynamic title. Write the category segment out literally, matching the folder the file lives in.

doc-config storyIds
ts
tabs: [
  { label: 'Overview', storyId: 'components-<category>-<component>--<component>' },
  { label: 'Usage', storyId: 'components-<category>-<component>--usage' },
  { label: 'Variants', storyId: 'components-<category>-<component>--variants-overview' },
  { label: 'Styling', storyId: 'components-<category>-<component>--styling' },
  { label: 'Accessibility', storyId: 'components-<category>-<component>--accessibility' },
  { label: 'Testing', storyId: 'components-<category>-<component>--testing' },
]

Also add an entry per MDX page to apps/storybook/.storybook/story-paths.json (used by the "Edit on GitHub" footer link), keyed by the same storyId and pointing at components/<category>/<component>/<N-Page>.mdx.

Process

Step 1 — Gather context

Read these files to understand the component:

  • packages/core/src/components/<category>/<component>/<component>.tsx — props, events, parts, render output
  • packages/core/src/components/<category>/<component>/test/<component>.visual.html — story sections
Step 1a — Determine component type

Check the component type by examining the TSX file and visual.html:

  • Web Components only (WC only): Component has no HTML/CSS class-based equivalent. The visual.html only shows web component usage (<ds-*> tags).
  • Hybrid: Component supports both web component (<ds-*>) and HTML/CSS class-based variants (e.g., <div class="ds-*">).
  • CSS-only: Component has no web component implementation, only HTML/CSS classes.

Ask the user if unclear: "Is this component WC only, hybrid, or CSS-only?"

Step 2 — Present story sections

Show ALL data-testid sections from visual.html as a numbered list:

Which sections should become story variants?

1. basic
2. with-icon
3. colors
4. sizes
...

(enter numbers separated by commas, or "all")

Wait for user selection before generating anything.

<component>.stories.ts

Structure stories to expose component props as controls. All props go into the args object and are rendered via ${props(args)}:

ts
import type { JSX } from '@helvetia-design/core'
import type { Meta } from '@storybook/html-vite'
import { createCssMappings, cssClasses, props, StoryFactory, withComponentControls, withRender } from '../../../utils'

type Args = JSX.Ds<Component> & { slot: string }

const tag = 'ds-<component>'
// Only include css/cssClasses if the component has an HTML/CSS equivalent
const css = createCssMappings(tag)

const meta: Meta<Args> = {
  title: 'Components/<Category>/<ComponentName>/Variants',
  args: {
    slot: 'Default content',
  },
  argTypes: {
    ...withComponentControls({ tag: 'ds-<component>' }),
  },
  ...withRender(({ slot, ...args }) => `<ds-<component> ${props(args)}>${slot}</ds-<component>>`),
}

export default meta

const Story = StoryFactory<Args>(meta)

export const Basic = Story({})
Basic.storyName = '🧩 Basic'

export const BasicHtml = Story({})
BasicHtml.storyName = '🌍 Basic'

export const WithVariant = Story({
  args: {
    variant: 'success',
  },
})
WithVariant.storyName = '🧩 With Variant'

export const WithVariantHtml = Story({
  args: {
    variant: 'success',
  },
})
WithVariantHtml.storyName = '🌍 With Variant'

// Additional stories follow the same pattern...

Key patterns:

  • Meta includes default withRender — covers both WC and HTML/CSS default rendering via ${props(args)}
  • Each story has an args object — maps to component @Prop() values (e.g., { border: true, horizontal: true })
  • Use ${props(args)} in template — serializes args to HTML attributes on the component tag
  • No hardcoded attributes — all variant differences go into args, not hardcoded in template strings
  • Story names: '🧩 <Name>' for web component, '🌍 <Name>' for HTML

For slots or complex content: If a variant needs different slot content, override withRender:

ts
export const WithContent = Story({
  args: {
    variant: 'primary',
  },
  ...withRender(
    ({ variant, ...args }) => `
      <ds-<component> variant="${variant}" ${props(args)}>
        Custom slot content here
      </ds-<component>
    `,
  ),
})

<component>.doc-config.ts

ts
/**
 * Shared configuration for <Component> component documentation pages.
 */

export const <COMPONENT>_DOC_CONFIG = {
  section: 'Components / <ComponentName>',
  color: 'purple' as const,
  tabs: [
    { label: 'Overview',      storyId: 'components-<component>--<component>' },
    { label: 'Usage',         storyId: 'components-<component>--usage' },
    { label: 'Variants',      storyId: 'components-<component>--variants-overview' },
    { label: 'Styling',       storyId: 'components-<component>--styling' },
    { label: 'Accessibility', storyId: 'components-<component>--accessibility' },
    { label: 'Testing',       storyId: 'components-<component>--testing' },
  ],
}

export const <COMPONENT>_TAB_TITLES = {
  overview:      'Overview',
  usage:         'Usage',
  variants:      'Variants',
  styling:       'Styling',
  accessibility: 'Accessibility',
  testing:       'Testing',
}

export const get<Component>Tabs = (activeLabel: keyof typeof <COMPONENT>_TAB_TITLES) => {
  return <COMPONENT>_DOC_CONFIG.tabs.map(tab => ({
    ...tab,
    active: tab.label === <COMPONENT>_TAB_TITLES[activeLabel],
  }))
}

1-Overview.mdx

For Web Components only:
mdx
import { Controls, Meta } from '@storybook/addon-docs/blocks'
import {
  Banner,
  BannerTabs,
  CanvasWithCodePen,
  ComponentLead,
  ComponentPublicMethods,
  Footer,
} from '../../../../.storybook/blocks'
import * as <Component>Stories from './<component>.stories'
import { <COMPONENT>_DOC_CONFIG, get<Component>Tabs } from './<component>.doc-config'

<Meta title="Components/<Category>/<ComponentName>/<ComponentName>" />

<Banner label={'<ComponentName>'} section={<COMPONENT>_DOC_CONFIG.section} color={<COMPONENT>_DOC_CONFIG.color} />

<BannerTabs of={<Component>Stories} tabs={get<Component>Tabs('overview')} />

<ComponentLead component="<component>" />

<CanvasWithCodePen of={<Component>Stories.Basic} sourceState="shown" />

<Controls of={<Component>Stories.Basic} />

<ComponentPublicMethods component="<component>" />

<Footer />
For Hybrid or CSS-only:
mdx
import { Controls, Meta } from '@storybook/addon-docs/blocks'
import {
  Banner,
  BannerTabs,
  CanvasTabs,
  ComponentLead,
  ComponentPublicMethods,
  Footer,
} from '../../../../.storybook/blocks'
import * as <Component>Stories from './<component>.stories'
import { <COMPONENT>_DOC_CONFIG, get<Component>Tabs } from './<component>.doc-config'

<Meta title="Components/<Category>/<ComponentName>/<ComponentName>" />

<Banner label={'<ComponentName>'} section={<COMPONENT>_DOC_CONFIG.section} color={<COMPONENT>_DOC_CONFIG.color} />

<BannerTabs of={<Component>Stories} tabs={get<Component>Tabs('overview')} />

<ComponentLead component="<component>" />

<CanvasTabs htmlOf={<Component>Stories.BasicHtml} of={<Component>Stories.Basic} />

<Controls of={<Component>Stories.Basic} />

<ComponentPublicMethods component="<component>" />

<Footer />

2-Usage.mdx

mdx
import { Meta } from '@storybook/addon-docs/blocks'
import {
  Banner,
  BannerTabs,
  Code,
  Footer,
  UsageExamples,
} from '../../../../.storybook/blocks'
import * as <Component>Stories from './<component>.stories'
import { <COMPONENT>_DOC_CONFIG, get<Component>Tabs } from './<component>.doc-config'

<Meta title="Components/<Category>/<ComponentName>/Usage" />
<Banner label={'Usage'} section={<COMPONENT>_DOC_CONFIG.section} color={<COMPONENT>_DOC_CONFIG.color} />
<BannerTabs of={<Component>Stories} tabs={get<Component>Tabs('usage')} />

## When to Use

- [bullet list of valid use cases]

## When NOT to Use

- [bullet list of anti-patterns]

## Do's and Don'ts

### [Guideline Title]

<UsageExamples
  items={[
    {
      type: 'correct',
      title: 'Correct: [Short Label]',
      content: (
        <ds-<component>>Correct example</ds-<component>>
      ),
      description: '[Why this is correct]',
    },
    {
      type: 'incorrect',
      title: 'Incorrect: [Short Label]',
      content: (
        <ds-<component>>Incorrect example</ds-<component>>
      ),
      description: '[Why this is wrong]',
    },
  ]}
/>

<Footer />

3-Variants.mdx

For Web Components only:
mdx
import { Meta } from '@storybook/addon-docs/blocks'
import {
  Banner,
  BannerTabs,
  CanvasWithCodePen,
  Footer,
  StoryHeading,
} from '../../../../.storybook/blocks'
import * as <Component>Stories from './<component>.stories'
import { <COMPONENT>_DOC_CONFIG, get<Component>Tabs } from './<component>.doc-config'

<Meta title="Components/<Category>/<ComponentName>/Variants/Overview" />

<StoryHeading of={<Component>Stories.Basic} hidden></StoryHeading>

<Banner label={'Variants'} section={<COMPONENT>_DOC_CONFIG.section} color={<COMPONENT>_DOC_CONFIG.color} />

<BannerTabs of={<Component>Stories} tabs={get<Component>Tabs('variants')} />

{/* STORIES */}
{/* ------------------------------------------------------ */}

<StoryHeading of={<Component>Stories.<StoryName>}></StoryHeading>

[One or two sentence description of this variant.]

<CanvasWithCodePen of={<Component>Stories.<StoryName>} sourceState="shown" />

{/* ------------------------------------------------------ */}

<StoryHeading of={<Component>Stories.<NextStoryName>}></StoryHeading>

[Description.]

<CanvasWithCodePen of={<Component>Stories.<NextStoryName>} sourceState="shown" />

<Footer />
For Hybrid or CSS-only:
mdx
import { Meta } from '@storybook/addon-docs/blocks'
import {
  Banner,
  BannerTabs,
  CanvasTabs,
  Footer,
  StoryHeading,
} from '../../../../.storybook/blocks'
import * as <Component>Stories from './<component>.stories'
import { <COMPONENT>_DOC_CONFIG, get<Component>Tabs } from './<component>.doc-config'

<Meta title="Components/<Category>/<ComponentName>/Variants/Overview" />

<StoryHeading of={<Component>Stories.Basic} hidden></StoryHeading>

<Banner label={'Variants'} section={<COMPONENT>_DOC_CONFIG.section} color={<COMPONENT>_DOC_CONFIG.color} />

<BannerTabs of={<Component>Stories} tabs={get<Component>Tabs('variants')} />

{/* STORIES */}
{/* ------------------------------------------------------ */}

<StoryHeading of={<Component>Stories.<StoryName>}></StoryHeading>

[One or two sentence description of this variant.]

<CanvasTabs htmlOf={<Component>Stories.<StoryName>Html} of={<Component>Stories.<StoryName>} />

{/* ------------------------------------------------------ */}

<StoryHeading of={<Component>Stories.<NextStoryName>}></StoryHeading>

[Description.]

<CanvasTabs htmlOf={<Component>Stories.<NextStoryName>Html} of={<Component>Stories.<NextStoryName>} />

<Footer />

Notes:

  • The first <StoryHeading hidden> above the Banner is required by Storybook routing — it registers the Basic story as the "variants" landing page.
  • For hybrid/CSS-only components: each variant block pairs <StoryName> with <StoryName>Html.
  • For WC-only components: use CanvasWithCodePen without HTML tabs.

4-Styling.mdx

mdx
import { Meta } from '@storybook/addon-docs/blocks'
import {
  Banner,
  BannerTabs,
  ComponentCssVariables,
  ComponentDesignTokens,
  ComponentParts,
  Footer,
} from '../../../../.storybook/blocks'
import * as <Component>Stories from './<component>.stories'
import { <COMPONENT>_DOC_CONFIG, get<Component>Tabs } from './<component>.doc-config'

<Meta title="Components/<Category>/<ComponentName>/Styling" />

<Banner label={'Styling'} section={<COMPONENT>_DOC_CONFIG.section} color={<COMPONENT>_DOC_CONFIG.color} />

<BannerTabs of={<Component>Stories} tabs={get<Component>Tabs('styling')} />

<ComponentParts component="<component>" />

<ComponentCssVariables component="<component>" />

<ComponentDesignTokens component="<component>" />

<Footer />

Notes:

  • Use ComponentCssVariables and ComponentDesignTokens — NOT the old TokenOverview.
  • ComponentParts renders Shadow DOM parts from JSDoc @part tags automatically.
Show full SKILL.md (423 more words)Show less

5-Accessibility.mdx

mdx
import { Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks'
import {
  A11yGuidelines,
  Banner,
  BannerTabs,
  CanvasTabs,
  Footer,
  InfoQuote,
  Lead,
  StoryHeading,
  TokenOverview,
} from '../../../../.storybook/blocks'
import * as <Component>Stories from './<component>.stories'
import { <COMPONENT>_DOC_CONFIG, get<Component>Tabs } from './<component>.doc-config'

<Meta title="Components/<Category>/<ComponentName>/Accessibility" />

<Banner label={'Accessibility'} section={<COMPONENT>_DOC_CONFIG.section} color={<COMPONENT>_DOC_CONFIG.color} />

<BannerTabs of={<Component>Stories} tabs={get<Component>Tabs('accessibility')} />

## Guidelines

<A11yGuidelines
  items={[
    {
      type: 'do',
      title: '[Guideline Title — actionable requirement]',
      content: (
        <p style={{ margin: '0.5rem 0 0 0' }}>
          [Clear instruction for component consumers. Reference HTML attributes like <code>aria-label</code>,{' '}
          <code>aria-describedby</code>, or semantic elements where relevant.]
        </p>
      ),
    },
    {
      type: 'do',
      title: '[Second do example]',
      content: <p style={{ margin: '0.5rem 0 0 0' }}>[Another important practice for this component.]</p>,
    },
    {
      type: 'dont',
      title: '[Anti-pattern Title — what to avoid]',
      content: (
        <p style={{ margin: '0.5rem 0 0 0' }}>
          [What not to do and why it fails accessibility. Explain the consequence for users.]
        </p>
      ),
    },
    {
      type: 'dont',
      title: '[Second dont example]',
      content: <p style={{ margin: '0.5rem 0 0 0' }}>[Another common mistake that breaks accessibility.]</p>,
    },
  ]}
/>

## References

- [MDN Reference 1](https://example.com) - [Brief description of what users will learn]
- [MDN Reference 2](https://example.com) - [How it relates to this component]
- [WCAG 2.2 Guideline](https://www.w3.org/WAI/WCAG22/) - [Which success criterion applies]

<Footer />

Accessibility content principle:

  • Document consumer requirements only — not internal implementation.
  • Include 4–6 do/don't guidelines (2–3 dos, 2–3 don'ts) that are component-specific and actionable.
  • Add MDN and WCAG references at the end to direct users to authoritative resources.
  • Guidelines should match the component's actual usage patterns. For example:
    • Form fields (Select, Input, Checkbox): Focus on labels, aria-describedby for error messages, required indication.
    • Interactive buttons/links: Focus on text labels, focus visible, keyboard activation.
    • Content containers (Badge, Card): Focus on semantic structure, color contrast, descriptive context.
    • Navigation: Focus on landmarks, skip links, ARIA roles.
  • Avoid generic guidelines; tailor each item to the component's role and user interactions.

Reusable Block Components

BlockImportPropsPurpose
Banner../../../.storybook/blockslabel, section, colorPage header with title and accent color
BannerTabs../../../.storybook/blocksof, tabsNavigation between Overview/Usage/etc
CanvasTabs../../../.storybook/blocksof, htmlOf?Canvas with web component + HTML/CSS tabs (hybrid/CSS-only)
CanvasWithCodePen../../../.storybook/blocksof, sourceState?Canvas with CodePen embed for web components (WC only)
ComponentLead../../../.storybook/blockscomponentAuto-pulls description from components.json
ComponentPublicMethods../../../.storybook/blockscomponent, subComponents?, title?Auto-pulls methods from components.json
ComponentParts../../../.storybook/blockscomponentAuto-pulls Shadow DOM parts from components.json
ComponentCssVariables../../../.storybook/blockscomponentCSS custom properties table
ComponentDesignTokens../../../.storybook/blockscomponentDesign tokens table
A11yGuidelines../../../.storybook/blocksitems: { type, title, content }[]Do/Don't accessibility checklist
UsageExamples../../../.storybook/blocksitems: { type, title, content, description }[]Correct/Incorrect code pattern comparison
StoryHeading../../../.storybook/blocksof, hidden?Section title before canvas component
Footer../../../.storybook/blocksnoneEnd-of-page footer
ComponentPageObject../../../.storybook/blockscomponentPO API table + example test + install guide
Code../../../.storybook/blockscode, noPreview?Inline code snippet in UsageExamples

Shared Patterns

Meta title must be a string literal

Storybook's static indexer cannot evaluate expressions:

mdx
{/* ✓ correct */}

<Meta title="Components/Indicators/Tag/Usage" />

{/* ✗ wrong — causes indexing error */}

<Meta title={`${TAG_DOC_CONFIG.section}/Usage`} />
Import only what you use

Each MDX page imports only the blocks it actually renders.

Section dividers in 3-Variants.mdx

Use {/* ------------------------------------------------------ */} before every StoryHeading.

Key story utilities
  • createCssMappings(tag) — maps component props to CSS class names for HTML variants
  • cssClasses(mappings, args, baseClass) — applies mapped CSS classes to an element
  • props(args) — serialises Stencil props to HTML attribute string
  • withRender(fn) — render function override
  • withComponentControls({ tag }) — argTypes from component JSDoc
  • StoryFactory<Args>(meta) — returns the Story() helper

6-Testing.mdx

mdx
import { Meta } from '@storybook/addon-docs/blocks'
import {
  Banner,
  BannerTabs,
  ComponentPageObject,
  Footer,
} from '../../../../.storybook/blocks'
import * as <Component>Stories from './<component>.stories'
import { <COMPONENT>_DOC_CONFIG, get<Component>Tabs } from './<component>.doc-config'

<Meta title="Components/<Category>/<ComponentName>/Testing" />

<Banner label={'Testing'} section={<COMPONENT>_DOC_CONFIG.section} color={<COMPONENT>_DOC_CONFIG.color} />

<BannerTabs of={<Component>Stories} tabs={get<Component>Tabs('testing')} />

<ComponentPageObject component="<component>" />

<Footer />

Notes:

  • Keep this page minimal — no extra content beyond the components above. Do not add additional sections, guidelines, or explanatory text.
  • ComponentPageObject reads pageObject from components.json (populated during pnpm build).
  • If the component has no .po.ts in packages/playwright, the block shows "No page object available" + the install guide.
  • If a page object exists, it renders Locators / Actions / Assertions tables, a semi-dynamic example test, and the install guide.
  • The structure is always: Meta → Banner → BannerTabs → ComponentPageObject → Footer. Nothing more.

Reference: Tag Component

The tag is the canonical example for the current pattern:

apps/storybook/src/components/indicators/tag/
  tag.stories.ts       ← title: 'Components/Indicators/Tag/Variants', paired 🧩/🌍 stories
  tag.doc-config.ts    ← TAG_DOC_CONFIG (color: 'purple'), getTagTabs()
  1-Overview.mdx       ← CanvasTabs + Controls + ComponentLead + ComponentPublicMethods
  2-Usage.mdx          ← UsageExamples block
  3-Variants.mdx       ← Meta title ends in /Variants/Overview, StoryHeading + CanvasTabs pairs
  4-Styling.mdx        ← ComponentParts + ComponentCssVariables + ComponentDesignTokens
  5-Accessibility.mdx  ← A11yGuidelines + WCAG compliance list
  api.md               ← AUTO-GENERATED — never edit

© 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

Just SKILL.md in .claude/skills/ds-document-component of baloise/design-system.

Open the folder on GitHubat commit 19063c5

Compare with similar skills

Ds Document 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 Document Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ds Document Component this skillbaloise/design-system114—~6.3kAutomated safety check: PassApache-2.0
Storybook Storyradix-ng/primitives274—~3.7kAutomated safety check: PassMIT
Review ComponentEndava/BEEQ163—~1.7kAutomated safety check: PassApache-2.0
React Component Documentationgetsentry/sentry45k—~3.6kAutomated safety check: PassCustom licence
Write StoriesEndava/BEEQ163—~968Automated safety check: PassApache-2.0
Design Systemalirezarezvani/claude-skills28k—~2.8kAutomated safety check: PassMIT

Similar skills

  • Storybook Story

    radix-ng/primitives

    Write or update Storybook stories and docs MDX for a Radix NG primitive following project conventions.

    274 GitHub stars~3.7k tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed

  • Review Component

    Endava/BEEQ

    Review a BEEQ StencilJS component against design system guidelines and project standards.

    163 GitHub stars~1.7k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • React Component Documentation

    getsentry/sentry

    Official

    Create or update component documentation in Sentry's MDX stories format.

    45k GitHub stars~3.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Write Stories

    Endava/BEEQ

    Write Storybook stories and MDX docs for BEEQ web components.

    163 GitHub stars~968 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Design System

    alirezarezvani/claude-skills

    Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output…

    28k GitHub stars~2.8k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Design System

    revfactory/harness-100

    Full pipeline for systematically building a UI design system.

    1.3k GitHub stars~1.8k tokensUpdated 6 mo ago
    Frontend & DesignAuto-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 today
    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 today
    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 today
    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 today
    Auto-check passed

  • Ds Test Component

    baloise/design-system

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

    114 GitHub stars~2.1k tokensUpdated today
    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 today
    Auto-check passed

Works with

Categories

Questions about Ds Document Component

What does Ds Document Component do?

A skill your agent uses 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…. Ds Document Component is an agent skill from baloise/design-system.

When should I use Ds Document Component?

Ds Document Component fits situations like: generating Storybook documentation for a Baloise Design System component — creates stories.ts; six MDX subpages (Overview; testing) using reusable Storybook blocks (ComponentLead; componentPublicMethods.

How do I install Ds Document Component in Claude Code?

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

How do I install Ds Document Component in Codex?

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

Can I use Ds Document 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-document-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-document-component, .gemini/skills/ds-document-component, .github/skills/ds-document-component and .opencode/skills/ds-document-component in your project.

What does Ds Document Component need to run?

Going by SKILL.md and its folder, Ds Document Component needs the command-line tools its instructions call (pnpm).

Does Ds Document Component access the network?

SKILL.md names 1 domain. In commands or code: w3.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Ds Document 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 Document Component use?

Ds Document 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 Document Component use?

About 6.3k tokens (SKILL.md is roughly 25k 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 Document Component?

Skills that share tags, products or a category with Ds Document Component: Storybook Story (radix-ng/primitives, 274 stars), Review Component (Endava/BEEQ, 163 stars), React Component Documentation (getsentry/sentry, 45k stars) and Write Stories (Endava/BEEQ, 163 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ds Document 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.