design-system-patterns

Guide interface development and auditing with WCAG 2.2 compliance standards.

2|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/alex-voloshin-dev/ai-skills --skill design-system-patterns-alex-voloshin-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/alex-voloshin-dev/ai-skills/tree/main/plugin/skills/design-system-patterns
Command: npx skills add https://github.com/alex-voloshin-dev/ai-skills --skill design-system-patterns-alex-voloshin-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the inconsistency and cognitive load inherent in designing complex interfaces by providing a centralized, expert-vetted knowledge base for UI/UX, accessibility, and design systems.

Core Features & Use Cases

  • Design System Governance: Provides atomic design principles, token management, and component specification guidelines to ensure scalable, maintainable UI.
  • UX Rigor & Accessibility: Integrates WCAG 2.2 standards, Nielsen heuristics, and cognitive psychology principles to ensure interfaces are inclusive and conversion-optimized.
  • Use Case: Use this skill when auditing a component library for accessibility compliance or when defining the visual hierarchy and interaction states for a new feature to ensure it aligns with platform-specific guidelines like Material 3 or Apple HIG.

Quick Start

Apply the design-system-patterns skill to audit the current component library for WCAG 2.2 accessibility compliance and suggest necessary improvements.

Frequently Asked Questions about design-system-patterns

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

FAQPage Schema
How do I audit a component library for WCAG 2.2 accessibility compliance?

Auditing a component library for WCAG 2.2 accessibility compliance involves evaluating interaction states and visual hierarchy against inclusive design standards. This process identifies specification gaps and suggests necessary improvements to ensure platform-specific guideline adherence.

What are atomic design principles and when do I need them for UI development?

Atomic design principles structure interfaces from basic elements to complex templates to ensure scalable, maintainable UI. You need them when establishing design system governance, managing design tokens, and defining component specifications for consistent visual hierarchy implementation.

Can I use Nielsen heuristics to improve conversion optimization for new features?

Yes, you can use Nielsen heuristics and cognitive psychology principles to improve conversion optimization for new features. Integrating these UX heuristics ensures interfaces are intuitive, reducing cognitive load and aligning interaction design with user expectations.

Does this design system knowledge support design-to-code handoff for Material 3 and Apple HIG?

Yes, this design system knowledge supports design-to-code handoff by providing component specifications and interaction design guidelines that align with platform-specific guidelines like Material 3 and Apple HIG. This ensures consistent visual hierarchy implementation across different development environments.

What is the best way to standardize UI/UX patterns across a complex interface?

The best way to standardize UI/UX patterns across a complex interface is to implement a centralized design system with atomic design principles and token management. This approach ensures consistent visual hierarchy, scalable component specification, and reduced cognitive load.