ui-design-guide

Apply a UI/UX design checklist covering WCAG 2.1 AA, responsive design, and state management during UI specification drafting.

3|Updated Nov 20, 2025
One-click install
npx skills add https://github.com/sougetuOte/LivingArchitectModel --skill ui-design-guide
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-design-guide
Source: https://github.com/sougetuOte/LivingArchitectModel/tree/main/.claude/skills/ui-design-guide
Command: npx skills add https://github.com/sougetuOte/LivingArchitectModel --skill ui-design-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that UI/UX specifications adhere to fundamental design principles, preventing common oversights in accessibility, responsiveness, and user experience during the planning phase.

Core Features & Use Cases

  • Accessibility Checklist: Verifies adherence to WCAG 2.1 AA standards.
  • State Design Guidance: Prompts for the design of all necessary UI states (Empty, Loading, Error, etc.).
  • Responsive Design Strategy: Ensures a clear breakpoint strategy is defined.
  • Form UX Best Practices: Guides on effective form design and validation.
  • Performance Considerations: Highlights performance implications at the design stage.
  • Use Case: When drafting a new user registration form, this skill will prompt the developer to consider keyboard navigation, error message clarity, and mobile responsiveness before any code is written.

Quick Start

Apply the ui-design-guide skill to review the UI specifications for the new user profile page.

Frequently Asked Questions about ui-design-guide

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

FAQPage Schema
How do I ensure my UI design meets accessibility standards during the planning phase?

To ensure UI design meets accessibility standards, apply a planning checklist that verifies adherence to WCAG 2.1 AA criteria before development begins. This prevents common oversights in user experience and accessibility.

What is the best way to manage UI states like empty, loading, and error in UX specifications?

The best way to manage UI states in UX specifications is to apply a design checklist during the planning phase that explicitly prompts for empty, loading, and error state designs before any code is written.

How do I incorporate responsive design and breakpoint strategies into UI specifications?

To incorporate responsive design into UI specifications, use a planning checklist that ensures a clear breakpoint strategy is defined. This guarantees mobile responsiveness is considered early in the design stage.

Do I need a specific framework to validate form UX and performance considerations?

You do not need a specific framework to validate form UX and performance considerations. This design checklist operates independently of frameworks, guiding effective form validation and performance during UI specification drafting.

When should I use a UI design checklist instead of directly coding the interface?

You should use a UI design checklist during the planning phase before coding the interface. It highlights performance implications and prevents common oversights in accessibility, responsiveness, and user experience early on.