Build your first Claude Code app

free beta with Pawgrammer

Product Design & UX Review

Design user-centered software products and conduct thorough design reviews using industry-standard UX principles, usability heuristics, and accessibility guidelines.

development

Product Design & UX Review

A comprehensive skill for designing user-centered software products and conducting thorough design reviews using established UX frameworks and accessibility standards.

This skill is perfect for product teams, designers, and developers who want to ensure their interfaces follow industry best practices and accessibility standards.

Skill Structure

The repository is organized to provide comprehensive design guidance and resources:

Main Files:

  • SKILL.md - Main design framework and principles
  • README.md - Documentation

Resource Directories:

  • references/ - Detailed reference materials including:
    • usability-heuristics-detailed.md - Usability heuristics deep-dive
    • ui-patterns-library.md - UI patterns library
    • accessibility-guidelines.md - Accessibility guidelines
    • design-systems.md - Design systems best practices
    • interaction-design.md - Interaction design guidance
  • examples/ - Sample designs and reviews:
    • design-review-example.md - Example design review
    • component-examples.md - Component design examples
  • templates/ - Design review and component specification templates:
    • design-review-template.md - Design review template
    • component-spec-template.md - Component specification template

What This Skill Does

Core Capabilities

  • Design Reviews: Evaluate interfaces against Nielsen's 10 Usability Heuristics
  • Accessibility Audits: Check compliance with WCAG 2.1 AA guidelines
  • Design Systems: Create and maintain consistent design systems
  • Visual Design Analysis: Provide expert feedback on visual design choices
  • Interaction Design: Guide users through effective interaction patterns
  • User-Centered Design: Apply industry-standard UX principles from Nielsen Norman Group, Google Material Design, and Apple's Human Interface Guidelines

Core Frameworks

The skill is built on six foundational areas:

  1. Nielsen's 10 Usability Heuristics - Interaction design principles
  2. Design Process - Research → Define → Design → Test → Iterate
  3. Visual Design Principles - Typography, color, spacing, layout, iconography
  4. Interaction Design - Navigation, feedback, forms, buttons, modals
  5. Accessibility (WCAG 2.1 AA) - Contrast, keyboard navigation, screen readers
  6. Mobile-First Design - Touch targets, responsive design, platform conventions

How to Use

You can request assistance with:

  • General design tasks ("Design a user dashboard")
  • Focused reviews using specific frameworks
  • Design creation for specific components
  • Accessibility audits and compliance checks

The skill provides structured output including executive summaries, heuristics reviews, visual design analysis, accessibility audits, and prioritized recommendations organized by severity level.

Example Use Cases

  1. "Design a user dashboard for this app"
  2. "Review this design using Nielsen's heuristics"
  3. "Check this interface for WCAG 2.1 AA compliance"
  4. "Create a design system for my product"
  5. "Design an onboarding flow for new users"
  6. "Analyze the visual hierarchy of this page"

Nielsen's 10 Usability Heuristics

This skill evaluates designs against these foundational principles:

  1. Visibility of System Status - Keep users informed about what's happening
  2. Match Between System and Real World - Use familiar language and concepts
  3. User Control and Freedom - Provide clear ways to undo and exit
  4. Consistency and Standards - Follow platform conventions
  5. Error Prevention - Design to prevent problems before they occur
  6. Recognition Rather Than Recall - Minimize memory load
  7. Flexibility and Efficiency - Support both novice and expert users
  8. Aesthetic and Minimalist Design - Remove unnecessary elements
  9. Help Users Recognize and Recover from Errors - Clear error messages with solutions
  10. Help and Documentation - Provide searchable, contextual help

Design Process Flow

The skill guides you through a complete design process:

Research → Define → Design → Test → Iterate

Each phase builds on user insights and data to create validated, user-centered solutions.

Visual Design Principles

Typography

  • Clear hierarchy with appropriate font sizes
  • Readable line heights and letter spacing
  • Consistent font families across the interface

Color Systems

  • Accessible color contrast (4.5:1 for text)
  • Meaningful color usage
  • Support for color-blind users

Spacing & Layout

  • 8-point grid system for consistency
  • Responsive layouts that adapt to screen sizes
  • Proper whitespace for visual breathing room

Iconography

  • Consistent icon style and size
  • Clear, recognizable symbols
  • Proper labeling for accessibility

Accessibility Standards (WCAG 2.1 AA)

Accessibility isn't optional—it's essential for reaching all users and often required by law.

This skill ensures compliance with:

  • 4.5:1 contrast ratio for normal text
  • Complete keyboard navigation for all interactive elements
  • Screen reader compatibility with proper ARIA labels
  • Visible focus indicators for keyboard users
  • Meaningful alternative text for images and icons

Mobile-First Design

  • Touch targets: Minimum 44×44px for easy tapping
  • Responsive design: Progressive enhancement from mobile to desktop
  • Platform conventions: iOS and Android specific patterns
  • Performance: Optimized loading and interactions
  • Gesture support: Natural mobile interactions

Common Design Patterns

Navigation

  • Top navigation bars
  • Side navigation drawers
  • Bottom navigation
  • Tab navigation
  • Breadcrumb trails

Forms

  • Single-column layouts
  • Inline validation
  • Clear error messages
  • Progress indicators
  • Smart defaults

Feedback & Notifications

  • Toast messages
  • Modal dialogs
  • Inline alerts
  • Loading states
  • Empty states

Design Review Methodology

When you request a design review, you'll receive:

  1. Executive Summary

    • Critical issues identified
    • Key improvement opportunities
    • Overall assessment

  2. Heuristics Assessment

    • Evaluation against all 10 heuristics
    • Pass/Fail/Needs Improvement status for each
    • Specific examples and recommendations

  3. Visual Design Analysis

    • Typography review
    • Color system evaluation
    • Spacing and layout assessment
    • Visual hierarchy analysis

  4. Accessibility Audit

    • WCAG 2.1 AA compliance check
    • Keyboard navigation testing
    • Screen reader compatibility
    • Color contrast verification

  5. Interaction Design Review

    • User flow analysis
    • Interaction pattern evaluation
    • Feedback mechanism assessment

  6. Prioritized Recommendations

    • Critical: Must fix immediately
    • High: Important for user experience
    • Medium: Noticeable improvements
    • Low: Nice-to-have enhancements

Frameworks & Standards

  • Nielsen Norman Group's Usability Heuristics
  • Google Material Design
  • Apple Human Interface Guidelines
  • WCAG 2.1 AA Accessibility Standards