authoring-design-system

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

Updated Sep 5, 2026
One-click install
npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill authoring-design-system-pohlai88
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: authoring-design-system
Source: https://github.com/pohlai88/afenda-xforge-v5/tree/main/.agents/skills/authoring-design-system
Command: npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill authoring-design-system-pohlai88

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing a design-system document that a designer and engineer can actually build from requires grounding tokens, components, and accessibility thresholds in established practice rather than generic boilerplate. This Skill supplies the method and quality bar for producing (or amending) a complete, consistent, accessible design-system document from a product's direction. ## Core Features & Use Cases - Token architecture in W3C DTCG format: Three-tier primitive/semantic/component tokens named by intent, with alias-swap theming for light/dark and multi-brand, plus modern color spaces (Oklch, Display-P3). - Full component catalog method: Sizes the catalog to the product archetype and specs every component with anatomy, states, variants, usage, and accessibility under one API vocabulary. - Numeric accessibility to WCAG 2.2 AA: Contrast ratios, focus appearance, target size, keyboard operability, and reduced-motion baked into token and component specs. - Amend mode: Edits an existing system as a scoped, semver-versioned delta with deprecate-then-migrate handling instead of regenerating. - Use Case: Given a product PRD and user-flows, produce a markdown design-system document covering principles, tokens, component catalog, patterns, layout/i18n conventions, accessibility, voice, and governance. ## Quick Start Use the authoring-design-system skill to produce a design-system document from the attached product direction and user-flows.

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?

Start from a design-system template's section structure, identify the product archetype from the PRD and user-flows, then fill each section with researched, decision-complete content. Define intent-named DTCG tokens, spec every component with six parts, and set numeric WCAG 2.2 AA accessibility thresholds.

What is the W3C DTCG design token format?

DTCG is the W3C Design Tokens Community Group format expressing tokens as typed JSON with $type and $value fields plus curly-brace aliasing. It organizes tokens into primitive, semantic, and component tiers so theming works by re-pointing semantic aliases rather than forking components.

How do I update an existing design system without breaking it?

Amend it as a scoped, versioned delta: make the minimal in-place edit to the affected tokens or components plus their ripple, bump semver, and add a changelog entry. Deprecate breaking changes in a minor release before removing them in a major, never regenerate the whole system.

What accessibility standard should a design system target?

Target WCAG 2.2 Level AA with numeric thresholds: text contrast at least 4.5:1, UI contrast at least 3:1, visible and unobscured focus indicators, 24x24 pixel target sizes, full keyboard operability, and reduced-motion support. Bake these into token and component specs rather than auditing later.

When should a design system omit governance documentation?

Governance can be fully omitted only when the system has a single maintainer, a single consumer, and no versioned external release. Above that threshold, document versioning, changelog, deprecation and migration policy, contribution model, ownership, and adoption guidance.

When should I not use this design-system authoring skill?

Do not use it to review a finished design system, define per-screen wireframe layouts, produce high-fidelity coded prototypes, or ship a coded component library. It produces the textual design-system document that precedes those downstream activities.