ux-design

Codifies design system guidance for unified web app UX patterns.

Updated May 9, 2020
One-click install
npx skills add https://github.com/Fenntasy/dotfiles --skill ux-design-fenntasy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-design
Source: https://github.com/Fenntasy/dotfiles/tree/main/claude/skills/ux-design
Command: npx skills add https://github.com/Fenntasy/dotfiles --skill ux-design-fenntasy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design system engineering, accessibility, and UX patterns consolidated into a single reference, streamlining component design, form handling, and accessibility guidance for production-ready apps.

Core Features & Use Cases

Comprehensive guidance covering design tokens, visual hierarchy, accessibility patterns, and component API design, enabling teams to build cohesive experiences across products; use cases include establishing token scales, auditing accessibility conformance, and implementing consistent form UX; for more concrete references, see the related pattern libraries under /css-responsive, /saas-product, and /react.

Quick Start

Audit your current design system and token architecture to establish a scalable foundation.

Frequently Asked Questions about ux-design

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

FAQPage Schema
How do I build a design system with consistent UX patterns across multiple web apps?

To build a design system with consistent UX patterns, codify guidance into a canonical reference structure covering philosophy, token architecture, and visual hierarchy to unify component design across products.

What are design tokens and how do I establish a scalable token architecture?

Design tokens are codified design decisions that establish a scalable foundation. Audit your current design system to define token scales, ensuring consistent visual hierarchy and unified UX patterns across responsive layouts.

How do I audit accessibility conformance for my component APIs and form UX?

To audit accessibility conformance, evaluate your component APIs and form UX against established accessibility patterns. Apply consolidated guidance to ensure production-ready apps meet visual hierarchy and interaction standards.

What's the best way to structure component API guidance for a unified design system?

The best way to structure component API guidance is using a canonical reference with dedicated sections for philosophy, token architecture, and detailed guidance, plus cross-linkable subdirectories for related UX patterns.

Do I need a specific framework to implement design tokens and responsive layout patterns?

No specific framework is required, but implementation references are available for related pattern libraries under css-responsive, saas-product, and react to help apply design tokens and accessibility patterns effectively.

When should I not use a centralized design system reference for my product?

Avoid using a centralized design system reference if your project lacks recurring component patterns or requires highly bespoke visual hierarchy, as the overhead of maintaining token architecture outweighs the unification benefits.