ui-design-guide
CommunityEnhance UI/UX with design principles.
AuthorsougetuOte
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: ui-design-guide Download link: https://github.com/sougetuOte/LivingArchitectModel/archive/main.zip#ui-design-guide Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.