ui-design

Name: ui-design
Availability: InStock
Author: ashesoftheundead

Provide web interface design guidance for layout, typography, color, spacing, and accessibility.

Updated Jul 9, 2026

Search Tags:#typography #design #ui #accessibility #layout #frontend #css

Ready to run

npx skills add https://github.com/AshesOfTheUndead/rezurxlib --skill ui-design-ashesoftheundead

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/AshesOfTheUndead/rezurxlib/tree/main/skills/ui-design
Command: npx skills add https://github.com/AshesOfTheUndead/rezurxlib --skill ui-design-ashesoftheundead

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the challenge of creating consistent, accessible, and visually polished web interfaces by providing a structured framework for design decisions.

Core Features & Use Cases

Design System Architecture: Implements a three-layer token system for scalable theming and maintenance.
Accessibility & Motion: Provides actionable guidelines for WCAG compliance, focus management, and reduced-motion safety.
Use Case: Use this skill when building a new dashboard to ensure your layout, typography, and color palette meet professional standards while maintaining a cohesive visual hierarchy.

Quick Start

Use the ui-design skill to audit the current layout and accessibility of my web application.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I build a responsive web interface layout that meets accessibility standards?▼

To build an accessible web interface layout, apply systematic design tokens for spacing and typography while enforcing WCAG compliance. This ensures your responsive components maintain a consistent visual hierarchy and proper focus management.

What is a design token system and how does it work for frontend UI?▼

A design token system for frontend UI is a three-layer architecture that stores visual design attributes as variables. It enables scalable theming and consistent maintenance across production-grade components.

How do I ensure my web typography and color palette pass WCAG accessibility requirements?▼

To ensure your web typography and color palette pass WCAG accessibility requirements, audit your interface against established contrast and motion safety guidelines. This process verifies focus management and visual hierarchy.

Does this UI design approach work for building a new production-grade dashboard?▼

Yes, this UI design approach works for building a production-grade dashboard by providing structured guidance for layout, typography, and color. It ensures professional standards and cohesive visual hierarchy across various project types.

What is the best way to audit my current web application for accessibility and layout issues?▼

The best way to audit your current web application for accessibility and layout issues is to evaluate its visual hierarchy against WCAG requirements and motion safety rules. This identifies gaps in focus management and responsive design.

How do I implement reduced-motion safety in my frontend CSS design?▼

To implement reduced-motion safety in your frontend CSS design, apply actionable motion guidelines that accommodate user sensitivity preferences. This ensures your web interface adheres to strict accessibility compliance.