uiux

Generate design system documentation with tokens and WCAG AA accessibility criteria.

4|2|Updated Sep 17, 2025
One-click install
npx skills add https://github.com/SylphxAI/flow --skill uiux
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: uiux
Source: https://github.com/SylphxAI/flow/tree/main/.claude/skills/uiux
Command: npx skills add https://github.com/SylphxAI/flow --skill uiux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI/UX consistency and accessibility are often fragmented across products. This Skill provides a standardized design system plus evaluation criteria to unify interfaces and ensure inclusive experiences.

Core Features & Use Cases

  • Design System Documentation: Define tokens, components, typography, color, spacing, and interaction guidelines to create a cohesive UI language.
  • Accessibility Review: Evaluate interfaces against WCAG AA criteria and propose inclusive improvements.
  • Guideline Generation: Produce developer-ready design guidelines and tokens that streamline handoffs and implementation.

Quick Start

Create a UI/UX guideline for a new dashboard, including typography, color tokens, spacing, component patterns, and accessibility considerations.

Frequently Asked Questions about uiux

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

FAQPage Schema
How do I create a design system with tokens and guidelines for my product team?

A design system with tokens unifies UI elements across products by defining reusable typography, color, spacing, and component patterns. This Skill generates developer-ready tokens and guidelines that standardize interfaces, reduce inconsistency, and accelerate handoffs between design and engineering teams.

What does it mean to audit interfaces against WCAG AA accessibility standards?

WCAG AA accessibility review evaluates interfaces against established inclusive design criteria to identify barriers for users with disabilities. This Skill assesses your UI against WCAG AA requirements and recommends improvements to ensure compliant, accessible experiences.

Can I use this to document component guidelines and design tokens for my framework?

Yes. This Skill produces framework-aligned design documentation that includes component patterns, token specifications, and interaction guidelines. Output is structured for developers to implement consistently across web and mobile interfaces.

Do I need an existing design system to start, or can I build one from scratch?

You need a cohesive design foundation—tokens, color palette, typography, and spacing rules—before using this Skill. It standardizes and documents what you have; it doesn't generate initial design decisions. Start with your design direction and framework choice.

How does design system consistency reduce UI/UX fragmentation across products?

Fragmented interfaces result when teams build without shared standards. A unified design system enforces consistent tokens, components, and patterns across all products, eliminating redundant work, improving maintainability, and delivering cohesive user experiences.

What's the difference between this and manual accessibility testing?

Manual testing checks individual pages; systematic accessibility review applies standardized WCAG AA criteria across your entire interface architecture. This Skill provides structured evaluation and improvement guidance to ensure accessibility is built into design, not patched afterward.