skills.rest
bm629
bm629COMMUNITY
Explore all skills by this author →
GitHub

authoring-design-system

Guides authoring of design-system documents with DTCG tokens, component specs, and WCAG 2.2 AA accessibility.

1|1|Updated May 24, 2026
Search Tags:#theming#documentation#design system#design tokens#component catalog#dtcg#wcag accessibility
One-click install
npx skills add https://github.com/bm629/agent-skills --skill authoring-design-system-bm629
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: authoring-design-system
Source: https://github.com/bm629/agent-skills/tree/main/skills/authoring-design-system
Command: npx skills add https://github.com/bm629/agent-skills --skill authoring-design-system-bm629

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing a design-system document from scratch often produces generic boilerplate, half-specified components, and vague accessibility claims that designers and engineers cannot build from. This Skill supplies the method and quality bar for producing a complete, grounded design-system document from a product's direction. ## Core Features & Use Cases - DTCG token architecture: Defines design tokens in the W3C DTCG format across primitive, semantic, and component tiers, with intent-based naming and alias-swap theming for light/dark and multi-brand. - Full component catalog: Sizes the catalog to the product archetype and specs every component with anatomy, states, variants, usage rules, and accessibility under one consistent API vocabulary. - Numeric accessibility: Bakes WCAG 2.2 AA thresholds (contrast ratios, focus appearance, target size, keyboard support) directly into token and component specs. - Amend mode: Edits an existing design system as a scoped, semver-versioned delta with deprecate-then-migrate handling instead of regenerating the whole document. - Use Case: Given a PRD for a new SaaS product, produce a markdown design-system document covering principles, tokens, a component catalog, patterns, i18n conventions, voice, and governance that a UI engineer can implement directly. ## Quick Start Use authoring-design-system to create a design-system document from my product PRD, covering tokens, components, and WCAG 2.2 AA accessibility.

Frequently Asked Questions about authoring-design-system

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

FAQPage Schema
How do I write a design system document from a product PRD?▼

Provide the product direction or PRD (and user-flows if available) and the Skill fills a template structure with researched content: principles, DTCG tokens, a component catalog sized to the product archetype, patterns, accessibility standards, voice, and governance.

What is the W3C DTCG design token format?▼

DTCG is the W3C Design Tokens Community Group format using typed $value fields and curly-brace aliasing in JSON. The Skill requires it at any system size, organizing tokens into primitive, semantic, and component tiers with intent-based naming.

How do I update an existing design system without rewriting it?▼

Use amend mode: scope the change and its ripple across referencing components, make the minimal in-place edit, bump semver, add a changelog entry, and deprecate-then-migrate breaking changes rather than regenerating the document.

Does this Skill produce a coded component library or Figma file?▼

No. The output is a textual markdown document with token values and component spec tables, not rendered swatches, a Figma file, or a compiled CSS/React component library. It precedes wireframing and hi-fi implementation.

What accessibility standard does the design system target?▼

WCAG 2.2 AA with numeric thresholds: 4.5:1 text contrast, 3:1 for large text and UI components, visible and unobscured focus indicators, 24px minimum target size, full keyboard operability, and reduced-motion support.

When should I not use this Skill?▼

Do not use it to review a finished design system (use reviewing-design-system), to define per-screen layouts (use authoring-wireframes), or to ship a coded component library. It produces the document, not the implementation.

Related Skills

Explore More Design & Creative Skills→
saranskumarsaranskumar

screen-planner

Plan screens and page responsibilities from existing user journeys.

Community
Intermediate
zeenie-aizeenie-ai
356

opencompany-design

Design OpenCompany-branded interfaces, mockups, and UI assets with consistent visual fidelity.

Community
Advanced
pohlai88pohlai88

authoring-design-system

Guides authoring of design-system documents with DTCG tokens, component specs, and WCAG 2.2 AA standards.

Community
Advanced
deepparserdeepparser

design-ibm

Apply IBM Carbon Design System tokens and component styles to UI generation.

Official
Intermediate