ux-principles

Provide UX design principles and code examples for web and mobile interfaces.

20|5|Updated Jan 5, 2026
One-click install
npx skills add https://github.com/miles990/claude-software-skills --skill ux-principles-miles990
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-principles
Source: https://github.com/miles990/claude-software-skills/tree/main/software-design/ux-principles
Command: npx skills add https://github.com/miles990/claude-software-skills --skill ux-principles-miles990

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides developers with essential user experience (UX) principles and practical code examples to ensure the interfaces they build are intuitive, accessible, and efficient for all users.

Core Features & Use Cases

  • Nielsen's Heuristics: Understand and apply fundamental usability principles.
  • Accessibility (WCAG): Implement semantic HTML, ARIA attributes, and keyboard navigation for inclusivity.
  • Responsive Design: Adopt mobile-first strategies and ensure proper touch targets.
  • Performance as UX: Optimize perceived performance with techniques like optimistic updates and skeleton screens.
  • Forms UX: Design user-friendly forms with clear validation and error handling.
  • Empty States: Create helpful empty states for better user guidance.
  • Use Case: When designing a new feature, consult this Skill to ensure it adheres to best practices for usability and accessibility, preventing common user frustrations and improving adoption rates.

Quick Start

Apply Nielsen's 10 Usability Heuristics to improve the user experience of the current interface.

Frequently Asked Questions about ux-principles

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

FAQPage Schema
How do I apply usability heuristics to improve frontend user interface design?

To improve frontend user interface design, apply Nielsen's 10 usability heuristics to evaluate and refine interaction patterns. This ensures interfaces remain intuitive, efficient, and aligned with established user experience principles.

What are the best practices for implementing accessibility and WCAG standards in web and mobile platforms?

Implement accessibility and WCAG standards by using semantic HTML, ARIA attributes, and keyboard navigation. These practices ensure interfaces are inclusive and navigable for all users across web and mobile platforms.

How do I design responsive interfaces with proper touch targets using a mobile-first strategy?

Design responsive interfaces using a mobile-first strategy by prioritizing essential content and ensuring proper touch target sizing. This approach guarantees usability and efficient layout adaptation across varying screen dimensions.

How do I optimize perceived performance and UX using skeleton screens and optimistic updates?

Optimize perceived performance by implementing skeleton screens and optimistic updates to provide immediate visual feedback. This technique minimizes perceived waiting time and creates a smoother user experience during data loading.

What is the best way to handle form validation and empty states in UX design?

Handle form validation by providing clear error messages and inline feedback, and design empty states to offer user guidance. These UX practices prevent user frustration and improve overall form completion rates.