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 Plan

by baloise in baloise/design-system

Generate phased implementation plans for design system components with adaptive scope, design decisions, and risk assessment

Apache-2.0Auto-check passedFrontend & Design

Install Ds Plan

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

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

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

At a glance

Generate phased implementation plans for design system components with adaptive scope, design decisions, and risk assessment

  • Works in 6 steps: Parse & Clarify → Critical Core (Always) → Contextual (If Relevant) → …
  • Tasks that involve Design systems
  • SKILL.md covers Quick Start, Behavior Overview, Interview Stages and Key Principles, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Ds Plan is an agent skill from baloise/design-system. Generate phased implementation plans for design system components with adaptive scope, design decisions, and risk assessment

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `README.md`).

It sits in Frontend & Design, covering Design systems, Architecture decision records and Planning. 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

  • Tasks that involve Design systems
  • Tasks that involve Architecture decision records
  • Tasks that involve Planning

Example prompts

  • “/ds-plan”

Workflow steps

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

  1. Parse & Clarify
  2. Critical Core (Always)
  3. Contextual (If Relevant)
  4. Auto-Detect & Propose
  5. Generate Plan
  6. Review & Approve

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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are bash).

    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 Plan loads about 1.6k tokens when it runs. Until then it costs about 33 tokens; SKILL.md has 708 words of instructions outside code blocks.

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

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). 708 words, ~1,576 tokens.

Download SKILL.mdSave it as .claude/skills/ds-plan/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
ds-plan
description
Generate phased implementation plans for design system components with adaptive scope, design decisions, and risk assessment

/ds-plan — Design System Component Planning Skill

Generate structured, phased implementation plans for design system components. The skill interviews you about component scope, detects the architecture type, proposes design decisions grounded in your design system patterns, surfaces conflicts with evidence-based suggestions, and creates a ready-to-implement plan.

Use /grill-with-docs to interview the user to have a complete understanding of the component requirements.

Quick Start

bash
/ds-plan Create a new navbar component with mobile menu
/ds-plan Add a size variant to the button component
/ds-plan Build a card component with slots for header, content, and footer

Behavior Overview

  1. Parse user input — Extract component name, purpose, and initial context
  2. Adaptive interview — Ask critical questions (purpose, API, scope) then contextual ones (responsive, accessibility, SEO)
  3. Auto-detect type — Determine if web-component-only, CSS-only, or hybrid based on context
  4. Propose decisions — Ground design decisions in ARCHITECTURE.md, CONTEXT.md, STYLE_GUIDE.md patterns
  5. Surface conflicts — Identify trade-offs (AA + Shadow DOM, SEO + encapsulation) with recommendations
  6. Generate plan — Adaptive phases, sections, and task granularity
  7. Review + save — Output to console, get user approval, write to docs/plan/NNN-kebab-case.md

Interview Stages

Stage 1: Parse & Clarify

Extract component name, purpose, and scope (new/update).

Stage 2: Critical Core (Always)

Ask: API, Slots & Parts, Dependencies, Out-of-scope.

Stage 3: Contextual (If Relevant)

Ask about: Responsive behavior, Accessibility, SEO crawling, Browser support (only if relevant to component type).

Stage 4: Auto-Detect & Propose
  • Detect component type (web-component, CSS-only, hybrid)
  • Propose design decisions from design system patterns
  • Surface conflicts with evidence-based suggestions
  • Recommend ADRs for hard-to-reverse decisions
Stage 5: Generate Plan
  • Determine phase count (4–10+ based on complexity)
  • Select relevant sections (adapt to component type)
  • Define phases with adaptive task granularity
  • Include concrete acceptance criteria
  • Reference downstream skills
Stage 6: Review & Approve
  • Output full plan to console
  • Ask for approval with suggested filename
  • Allow refinement iterations
  • On approval: auto-write to docs/plan/NNN-kebab-case.md

Key Principles

Mobile-First Styling

Always propose mobile-first SCSS per STYLE_GUIDE.md. Define base styles for 320px+, use @include media() for enhancements, never hardcode breakpoints.

Light DOM for Content

Place critical content in light DOM (slots), Shadow DOM for layout/styling only. Enables both AA compliance and SEO crawling.

Design Tokens Only

All colors, spacing, typography use --ds-* tokens from packages/tokens. Never hardcode values.

Semantic HTML

Use native elements: <nav>, <button>, <a>, <dialog>. Adds accessibility and SEO value automatically.

Context-Aware Criteria
  • Mobile-first: Always required
  • SEO crawling: Required if navigation; optional otherwise
  • Accessibility (WCAG 2.2 AA): Required if interactive; optional otherwise
  • Responsive behavior: Required if layout-dependent; optional otherwise

Output Structure

Generated plan includes: Overview, Design Decisions, Technical Decisions (if web-component), Accessibility Compliance (if interactive), Responsive Behavior (if layout-dependent), SEO Considerations (if navigation), Browser Support, Style Guide Alignment, Risks & Mitigations, Related Documentation, Phases (1–N with goals, tasks, dependencies, acceptance criteria).

Show full SKILL.md (292 more words)Show less

Integration

4-skill workflow:

  1. /ds-plan — Create implementation plan → docs/plan/NNN-component-scope.md
  2. /ds-create-component — Scaffold component files
  3. /ds-test-component — Generate test files
  4. /ds-document-component — Create Storybook docs

Scope

Out of Scope
  • Test automation (unit/E2E test code — handled by /ds-test-component)
  • Storybook stories (handled by /ds-document-component)
  • MDX documentation
In Scope
  • Component architecture
  • Design decisions with rationale
  • Technical decisions
  • Accessibility compliance approach
  • Responsive behavior definition
  • Risk identification and mitigation
  • Phased tasks with acceptance criteria
  • Final phase: Manual testing checklist (user verifies by running app)

Testing Phase (Final Phase)

The final phase focuses on manual testing, not test automation:

  • Purpose: User verifies implementation works as intended by running the app and observing behavior
  • Not included: Writing unit tests, E2E tests, or test automation (use /ds-test-component for that)
  • Method: User navigates to localhost, interacts with the component, checks accessibility, verifies responsive behavior
  • Checklist: Includes all acceptance criteria as manual test items (click this, verify that, check console, etc.)
  • Documentation: Lists ARIA attributes, keyboard shortcuts, responsive rules to verify

This ensures the implementation is validated at runtime before test suite creation.

Pro Tips

  1. Be specific: "Create navbar with mobile menu" not "Create navigation"
  2. Mention constraints: "Internal use only (no SEO needs)" or "Support IE11"
  3. Refer to patterns: "Similar to ds-navbar" or "Like snackbar breakpoint handling"
  4. Refine interactively: "Add detail to Phase 4" or "Remove SEO section"
  5. Create ADRs: If plan recommends one, create during interview while context is fresh

Questions Answered

  • What's the scope? → Interview + plan define MVP and phases
  • Web component or CSS-only? → Skill auto-detects and proposes
  • How handle trade-offs? → Skill surfaces conflicts with design system solutions
  • What's in each phase? → Adaptive task breakdown with acceptance criteria
  • Ensure compliance? → Specific criteria for accessibility, SEO, mobile-first, style guide

See README.md for team guidance and implementation notes.

© 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 1 other file in .claude/skills/ds-plan of baloise/design-system.

  • SKILL.md
  • README.md

Open the folder on GitHubat commit 19063c5

Compare with similar skills

Ds Plan 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 Plan compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ds Plan this skillbaloise/design-system114—~1.6kAutomated safety check: PassApache-2.0
Improve UI Audit and Plansibelick/ui-skills9.4k—~2kAutomated safety check: PassMIT
Typeui Fundamentalsbergside/typeui2k—~861Automated safety check: PassMIT
Visualizedisplay-dev/visualize131—~7.4kAutomated safety check: PassMIT
Design Standardsrampstackco/claude-skills935—~2.4kAutomated safety check: PassMIT
Design System ContextHermeticOrmus/LibreUIUX-Claude-Code111—~5kAutomated safety check: PassMIT

Similar skills

  • Improve UI Audit and Plans

    ibelick/ui-skills

    Audits one product surface against its own design evidence and writes self-contained implementation plans for another agent, without touching product source.

    9.4k GitHub stars~2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Typeui Fundamentals

    bergside/typeui

    Universal UI/UX design principles covering visual hierarchy, interaction laws, typography foundations, and WCAG accessibility requirements.

    2k GitHub stars~861 tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Visualize

    display-dev/visualize

    Generate beautiful, on-brand HTML artifacts — reports, diagrams, diff reviews, slide decks, plans, recaps, dashboards.

    131 GitHub stars~7.4k tokensUpdated 21 days ago
    Frontend & DesignAuto-check passed

  • Design Standards

    rampstackco/claude-skills

    Apply production-grade design standards when building or reviewing pages, components, or UI.

    935 GitHub stars~2.4k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Design System Context

    HermeticOrmus/LibreUIUX-Claude-Code

    Keeping a design system in an LLM's context: loading tokens compactly, persisting design decisions across sessions, handling multiple variants, and budgeting the context window.

    111 GitHub stars~5k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Decision Record

    murphytrueman/design-system-ops

    Write a narrative decision record (ADR) for a design system choice: context, options, trade-offs, consequences, including declined proposals.

    201 GitHub stars~2.8k tokensUpdated 13 days 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

Categories

Questions about Ds Plan

What does Ds Plan do?

Generate phased implementation plans for design system components with adaptive scope, design decisions, and risk assessment. Ds Plan is an agent skill from baloise/design-system.

When should I use Ds Plan?

Ds Plan fits situations like: tasks that involve Design systems; tasks that involve Architecture decision records; tasks that involve Planning.

How do I install Ds Plan in Claude Code?

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

How do I install Ds Plan in Codex?

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

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

What does Ds Plan need to run?

SKILL.md names no scripts, command-line tools or credentials: Ds Plan is instructions for the agent only.

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

Ds Plan 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 Plan use?

About 1.6k tokens (SKILL.md is roughly 6.3k 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 Plan?

Skills that share tags, products or a category with Ds Plan: Improve UI Audit and Plans (ibelick/ui-skills, 9.4k stars), Typeui Fundamentals (bergside/typeui, 2k stars), Visualize (display-dev/visualize, 131 stars) and Design Standards (rampstackco/claude-skills, 935 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ds Plan?

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.