ui-design

Evaluate user interface designs across web, mobile, and desktop surfaces.

Updated May 4, 2026
One-click install
npx skills add https://github.com/xaionaro/.config-codex --skill ui-design-xaionaro
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/xaionaro/.config-codex/tree/main/skills/ui-design
Command: npx skills add https://github.com/xaionaro/.config-codex --skill ui-design-xaionaro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps designers and teams ensure usable, accessible, and responsive UI surfaces across platforms by enforcing universal design principles and best practices.

Core Features & Use Cases

  • Clear guidelines: consistency, affordance, feedback, forgiveness, hierarchy, progressive disclosure, single primary action, sensible defaults, platform conventions.
  • States and responsiveness: covering empty/loading/partial/error/success/offline for each view; responsive layouts; accessibility.
  • QML/UI specifics: structural rules, patterns, and anti-patterns. Use cases include designing for QML, web, Android, and iOS UIs.

Quick Start

Apply the universal UI design principles to your next interface review or project.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I evaluate UI design for accessibility and responsiveness across web and mobile?

To evaluate UI design for accessibility and responsiveness, apply universal principles like consistency, affordance, and feedback to enforce best practices across web, mobile, and desktop surfaces. This ensures usable interfaces by providing actionable checks for each view.

Does this UI design guidance work with QML, SwiftUI, and Android XML?

Yes, this UI design guidance works with QML, SwiftUI, and Android XML. It applies structural rules, patterns, and anti-patterns across multiple platforms including Qt Widgets, HTML/CSS/JSX/TSX/Vue/Svelte, ensuring platform conventions are satisfied.

What are the best practices for designing empty, loading, and error states in an interface?

Best practices for designing empty, loading, and error states involve covering empty, loading, partial, error, success, and offline conditions for each view. This comprehensive state coverage improves interface forgiveness, feedback, and overall usability.

How do I automate UI review tasks for consistency and hierarchy?

Automate UI review tasks for consistency and hierarchy by applying universal design guidelines during the evaluation process. This enforces clarity, progressive disclosure, and single primary action rules, delivering actionable checks for interface redesign or creation.

When do I need to apply platform conventions and sensible defaults in UI redesign?

You need to apply platform conventions and sensible defaults in UI redesign whenever creating or reviewing interfaces across web, mobile, or desktop environments. This ensures the design satisfies core UI-UX criteria and improves overall usability and accessibility.

Why does my responsive layout fail to provide clear feedback and affordance?

A responsive layout fails to provide clear feedback and affordance when it ignores universal design principles like consistency and progressive disclosure. Applying explicit guidelines and structural rules during UI evaluation identifies these anti-patterns and restores usability.