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

by baloise in baloise/design-system

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

Apache-2.0Auto-check passedFrontend & Design

Install Ds Lint Component

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

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

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

At a glance

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

  • Works in 2 steps: Check (Report) → Fix (Auto-Correct)
  • Reviewing DS components
  • SKILL.md covers Quick Start, What Gets Checked, Workflow and Examples, plus 3 more sections
  • Runs JavaScript scripts from its folder; calls tsc

What it does

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

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

It sits in Frontend & Design, covering Linting and formatting, Design systems and Regulatory compliance. 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

  • Reviewing DS components
  • User asks to lint/check a component

Example prompts

  • “/ds-lint-component”

Requirements

  • Node.js

Workflow steps

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

  1. Check (Report)
  2. Fix (Auto-Correct)

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:

    • tsc

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

  • Network

    No URLs in SKILL.md.

    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 Lint Component loads about 1.4k tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 538 words of instructions outside code blocks.

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

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). 538 words, ~1,440 tokens.

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

Lint Component

Checks and fixes Helvetia Design System components against the STYLE_GUIDE. Two phases: Check (report violations) and Fix (auto-correct issues).

Quick Start

Check a component for violations:

bash
ds-lint-component button

Output: Human-readable report of violations (to terminal and Claude context).

Fix violations:

bash
ds-lint-component button --fix

Output: Summary of changes written to files.

What Gets Checked

Design Tokens

  • Component styles use --ds-alias-* tokens (approved alias tokens)
  • Component styles use --ds-component-* tokens (component-specific tokens)
  • Component styles use --_* tokens (private/local variables)
  • Global --ds-* tokens are only allowed in vars.local() setup context as defaults
  • Flags usage of old or non-existent global tokens directly in styles

Documentation

  • Every @Prop has a JSDoc comment immediately before it
  • Every @Event has a JSDoc comment immediately before it
  • Every @Method has a JSDoc comment immediately before it
  • Every @slot is documented in the component-level JSDoc with a description
  • Every @part is documented in the component-level JSDoc with a description

Divider Comments

  • Section dividers exist only for sections with content
  • Format: Unicode dashes, correct spacing
  • Sections appear in order: PUBLIC PROPERTY API → LIFECYCLE → PUBLIC LISTENERS → PUBLIC METHODS → EVENT HANDLERS → PRIVATE METHODS → RENDER

Prop Validation

  • Every @Prop() has a matching validation decorator (@Type / @OneOf)
  • Validator type matches prop type (string → @Type('string'), enum → @OneOf(CONST_ARRAY))
  • Optional @OneOf enum props use undefined (optional ?:), never = '' as the "not set" sentinel (STYLE_GUIDE.md "Props")

Type Matching Rules

  • Primitive props → @Type('string'|'number'|'boolean')
  • Enum props → @OneOf(CONST_ARRAY) via .interfaces.ts
  • Complex types (union, object) → Flagged as unable to validate; manual review required
  • Required props → add @Required() above the @Type/@OneOf check

Workflow

Phase 1: Check (Report)
bash
ds-lint-component button

Scans component and sub-components (e.g., carousel scans carousel/carousel.tsx and carousel/carousel-item.tsx). Reports to terminal:

✓ carousel/carousel.tsx
  ✓ Documentation: All props, events, methods documented
  ✓ Dividers: Present sections correctly ordered
  ✓ Props: All 12 props have validators

⚠ carousel/carousel-item.tsx
  ⚠ Missing JSDoc documentation for @Prop "disabled"
  ⚠ Missing JSDoc documentation for @Event "dsChange"
  ✗ Dividers: PUBLIC LISTENERS section missing (but @Listen() methods present)
  ✗ Props: "value" (string) has @Type('number') — type mismatch
Show full SKILL.md (276 more words)Show less
Phase 2: Fix (Auto-Correct)
bash
ds-lint-component button --fix

Auto-corrects issues:

  • ✅ Adds missing JSDoc comments for @Prop, @Event, and @Method decorators
  • ✅ Adds/fixes divider comments with correct formatting
  • ✅ Adds missing @Type/@OneOf decorators (matches types via .interfaces.ts)
  • ✅ Rewrites x: T = '' → x?: T for optional @OneOf props, and strips the now-unneeded '' sentinel out of the matching CONST_ARRAY in .interfaces.ts
  • ✅ Writes changes to .tsx and .interfaces.ts files

Not auto-fixed — flagged as warnings for manual review instead, since these require judgment:

  • Render logic in the same .tsx that compares the prop against '' (|| '', === '', ...)
  • A method/property called directly on the prop (this.prop.split(...)) — now that the prop is optional, this needs a type-narrowing guard; hasValue() is a plain boolean check, not a TS type guard, so under strict: true these become real type errors. Run tsc --noEmit after any --fix run that touches a prop's optionality.
  • Storybook argTypes defaults (*.stories.ts / *.doc-config.ts) referencing ''
  • Playwright page objects (packages/playwright/src/lib/components/*.po.ts) referencing ''
  • Unit tests (*.spec.ts) referencing ''

Reports summary of changes:

✓ carousel/carousel-item.tsx
  • Added JSDoc for @Prop "disabled"
  • Added JSDoc for @Event "dsChange"
  • Added PUBLIC LISTENERS divider comment
  • Fixed validator: "value" now @Type('string')

Examples

Example 1: Button Component

Check button:

bash
ds-lint-component button

If button is compliant, no violations reported.

Check carousel and carousel-item together:

bash
ds-lint-component carousel

Reports violations in both carousel/carousel.tsx and carousel/carousel-item.tsx.

Warnings & Limitations

  • Complex types: Unions and object types flagged for manual review; skill cannot auto-validate
  • Missing .interfaces.ts: Enum validation skipped with warning if interfaces file not found
  • Validator type inference: Relies on .interfaces.ts naming convention (ButtonColor → BUTTON_COLORS)

Important Notes

JSDoc Comments: When adding or updating JSDoc comments for CSS variable properties in the SCSS file (@prop), 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)

See STYLE_GUIDE.md for component standards.

© 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 4 other files in .claude/skills/ds-lint-component of baloise/design-system.

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

Open the folder on GitHubat commit 19063c5

Compare with similar skills

Ds Lint 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 Lint Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ds Lint Component this skillbaloise/design-system114—~1.4kAutomated safety check: PassApache-2.0
React Render Types CompositionHorusGoul/eslint-plugin-react-render-types111—~1.1kAutomated safety check: PassMIT
Fallowfallow-rs/fallow-skills129—~8.2kAutomated safety check: PassMIT
Auteuragiwhitelist/auteur1k—~5kAutomated safety check: PassMIT
DaleuiDaleStudy/daleui119—~675Automated safety check: PassMIT
Spec Compliance ReviewJason904/ui-skill-lab144—~1.1kAutomated safety check: PassMIT

Similar skills

  • React Render Types Composition

    HorusGoul/eslint-plugin-react-render-types

    Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.

    111 GitHub stars~1.1k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Fallow

    fallow-rs/fallow-skills

    Codebase intelligence for TypeScript and JavaScript. An agent skill from fallow-rs/fallow-skills.

    129 GitHub stars~8.2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Auteur

    agiwhitelist/auteur

    Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…

    1k GitHub stars~5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Daleui

    DaleStudy/daleui

    Use the daleui React design system with semantic Panda CSS tokens and accessible components.

    119 GitHub stars~675 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Spec Compliance Review

    Jason904/ui-skill-lab

    This skill should be used after Codex implements a UI change and before visual acceptance review.

    144 GitHub stars~1.1k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • UI Lint

    sickn33/agentic-awesome-skills

    Quick automated lint — detects common design system violations in seconds

    47k GitHub starsUsed in 1 repo~853 tokens
    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 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 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 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

Categories

Questions about Ds Lint Component

What does Ds Lint Component do?

Lint and fix Helvetia Design System components for style guide compliance. Ds Lint Component is an agent skill from baloise/design-system. Lint and fix Helvetia Design System components for style guide compliance.

When should I use Ds Lint Component?

Ds Lint Component fits situations like: reviewing DS components; user asks to lint/check a component.

How do I install Ds Lint Component in Claude Code?

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

How do I install Ds Lint Component in Codex?

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

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

What does Ds Lint Component need to run?

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

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

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

About 1.4k tokens (SKILL.md is roughly 5.8k 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 Lint Component?

Skills that share tags, products or a category with Ds Lint Component: React Render Types Composition (HorusGoul/eslint-plugin-react-render-types, 111 stars), Fallow (fallow-rs/fallow-skills, 129 stars), Auteur (agiwhitelist/auteur, 1k stars) and Daleui (DaleStudy/daleui, 119 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

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