ds

Validate design-system conformance across codebases in CI/CD workflows.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/strongerDeer/stronger-dotfiles --skill ds-strongerdeer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ds
Source: https://github.com/strongerDeer/stronger-dotfiles/tree/main/claude/skills/ds
Command: npx skills add https://github.com/strongerDeer/stronger-dotfiles --skill ds-strongerdeer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to keep UI components, tokens, and docs in sync across codebases; this Skill automates conformance validation and proactive documentation updates.

Core Features & Use Cases

  • UI conformity checks: validate component usage, color tokens, spacing, and typography against the design-system specs.
  • Accessibility verification: perform WCAG 2.1 AA checks for semantic HTML, ARIA usage, keyboard navigation, and color contrast.
  • Documentation automation: auto-update SKILLDocs and developer docs when the design-system package changes, and generate reports.
  • CI/CD integration: produce reproducible validation pipelines and reports for PR checks and nightly runs.
  • Usage scenarios: ensure new components conform before merge, and keep project docs up-to-date automatically.

Quick Start

Run the DS validator on a project to verify conformance and trigger automatic documentation updates.

Frequently Asked Questions about ds

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate design-system validation across codebases?

Design-system validation is automated by checking component usage, color tokens, spacing, and typography rules against project specs. This Skill runs conformance checks within CI/CD pipelines to ensure UI components match your design system before merge.

How do I check WCAG 2.1 AA accessibility compliance in a CI/CD pipeline?

WCAG 2.1 AA accessibility checks are performed by validating semantic HTML, ARIA usage, keyboard navigation, and color contrast. This Skill integrates these verification steps into CI/CD workflows to catch accessibility issues during development.

Can I automatically update developer documentation when design tokens change?

Documentation updates are generated automatically when the design-system package changes. This Skill auto-updates SKILLDocs and developer docs to keep project documentation in sync with the latest design token and component specifications.

What's the best way to enforce UI conformity for new components before merge?

UI conformity is enforced by running validation pipelines as PR checks in CI/CD. This Skill verifies that new components conform to design-system specs for spacing, typography, and color tokens, producing reproducible reports for nightly runs and pull requests.

Does this design-system validator require specific component dependencies to run?

No specific dependencies are required to run this design-system validator. It operates over your existing codebase using a frontmatter-driven approach with optional resource directories and built-in safety checks including toxicity evaluation.

Why does design-system documentation drift out of sync with component code?

Documentation drifts when UI components and tokens are updated manually without automated documentation updates. This Skill solves the problem by syncing SKILLDocs and developer docs automatically whenever design-system package changes occur.