skills.rest
virajp
virajpCOMMUNITY
Explore all skills by this author →
𝕏@askvirajGitHub

design-system-authoring

Define product design system contracts for semantic tokens, typography, spacing, motion, and accessibility.

1|Updated May 26, 2026
Search Tags:#accessibility#design system#design tokens#ux#visual language#component behavior
One-click install
npx skills add https://github.com/virajp/ai-plugins --skill design-system-authoring
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-authoring
Source: https://github.com/virajp/ai-plugins/tree/main/plugins/vwf/skills/design-system-authoring
Command: npx skills add https://github.com/virajp/ai-plugins --skill design-system-authoring

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams define a consistent product-wide UX and visual contract so screens do not repeatedly reinvent colors, typography, spacing, motion, accessibility, and component behaviors.

Core Features & Use Cases

  • Design System Foundations: Establish semantic tokens, typography scales, spacing rules, motion principles, and accessibility standards independent of implementation frameworks.
  • Component Behavior Guidance: Define reusable interaction patterns, states, and anti-patterns for buttons, forms, overlays, feedback, and navigation.
  • Use Case: When building a product blueprint, use this Skill to author a design-system document that keeps every screen aligned with shared UX decisions.

Quick Start

Ask the AI to create or update the product design system document with semantic tokens, accessibility requirements, and component behavior rules.

Frequently Asked Questions about design-system-authoring

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

FAQPage Schema
How do I create a design system with semantic tokens and accessibility standards?▼

Defining reusable interaction patterns in a design system involves specifying component states, behaviors, and anti-patterns for elements like buttons, forms, and overlays to enforce consistent UX decisions across all product screens.

What is the best way to document UX standards separate from implementation frameworks?▼

The best way to document framework-independent UX standards is to author a product design system contract that separates visual language decisions from implementation details, ensuring shared design decisions apply across all product screens.

Can I use this design system authoring approach to define component behavior rules for forms and overlays?▼

Yes, design system authoring applies to defining reusable interaction patterns, states, and anti-patterns for buttons, forms, overlays, feedback, and navigation to maintain consistent component behavior guidelines.

Does a design system contract require structured decisions for motion and spacing rules?▼

Yes, a design system contract requires structured design decisions to establish semantic tokens, typography scales, spacing rules, motion principles, and accessibility standards so teams avoid reinventing visual language for each screen.

When do I need to author a product blueprint with a formal design system document?▼

You need to author a product blueprint with a formal design system document when building or maintaining a product-wide UX standard to keep every screen aligned with shared visual language, accessibility, and component behavior decisions.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
PosteriotPosteriot

design-system

Translate design specifications into structured CSS variables and Tailwind tokens.

Community
Intermediate
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
v1nizxv1nizx

stitch::extract-design-md

Extract color palettes, typography scales, and component styling patterns from frontend source code.

Community
Advanced