Claude Code Plugins

Community-maintained marketplace

Feedback

software-ui-ux-design

@vasilyu1983/AI-Agents-public
22
1

UI/UX design principles, usability heuristics, accessibility standards, and design system patterns for creating user-centered interfaces.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name software-ui-ux-design
description UI/UX design principles, usability heuristics, accessibility standards, and design system patterns for creating user-centered interfaces.

Software UI/UX Principles Skill — Quick Reference

Use this skill when the primary focus is designing intuitive, accessible, and user-centered interfaces rather than implementing technical features.

When to Use This Skill

Invoke when users ask for:

  • UI/UX design patterns and best practices
  • Usability evaluation and improvement recommendations
  • Accessibility compliance (WCAG, ARIA)
  • Design system setup and component libraries
  • User-centered design methodologies
  • Information architecture and navigation design
  • Mobile-first and responsive design patterns
  • Form design and input validation UX
  • Pattern selection based on user pain points (from software-ux-research analysis)
  • UI fixes for feedback-identified issues (navigation, onboarding, performance, forms)

Quick Reference Table

UX Task Pattern/Tool Implementation When to Use
Distinctive Aesthetics Creative typography, bold color Avoid Inter/Roboto, commit to theme Prevent generic AI aesthetics
Pain Point → Pattern Feedback-driven design Use software-ux-research first When you have user feedback to act on
Cognitive Load & Cues Gestalt grouping, preattentive cues Chunk info, align, use contrast/weight/icons Dense data, complex flows; reduce working-memory load
Signifiers & Mappings Visible affordances, natural layouts Show clickable states, map controls to outputs Any interactive element; prevent slips/mistakes
Loading States Skeleton screens Shimmer placeholders All async data (preferred over spinners)
User Feedback Toast notifications 3-5 sec auto-dismiss Non-blocking confirmations
Form Validation Inline validation Validate on blur Real-time feedback without annoyance
Navigation Breadcrumbs + tabs Hierarchical + contextual Multi-level content (max 3 clicks)
Empty States Action-oriented prompts "Create your first..." Never show blank pages
Accessibility WCAG 2.2 AA 4.5:1 contrast, keyboard nav All production apps (legal requirement)
Component Library shadcn/ui or MUI Copy-paste or npm install Design system foundation
Micro-interactions 200-400ms animations CSS transitions/Framer Motion Button states, hover, loading

Decision Tree: UI/UX Design Approach

Design challenge: [Feature Type]
    ├─ Building from scratch?
    │   ├─ Need full control? → shadcn/ui (copy-paste, Tailwind)
    │   ├─ Need speed? → MUI (comprehensive, out-of-the-box)
    │   └─ Accessibility priority? → Chakra UI (best-in-class a11y)
    │
    ├─ Improving existing UI?
    │   ├─ Usability issues? → Nielsen heuristics evaluation (resources/nielsen-heuristics.md)
    │   ├─ Accessibility gaps? → WCAG 2.2 audit (resources/wcag-accessibility.md)
    │   └─ Visual inconsistency? → Design system setup (resources/design-systems.md)
    │
    ├─ Loading/feedback states?
    │   ├─ Data loading? → Skeleton screens (not spinners)
    │   ├─ User action? → Optimistic UI + toast notifications
    │   └─ Form submission? → Inline validation + progress indicators
    │
    ├─ Complex form?
    │   ├─ Multi-step? → Progress bar + save drafts
    │   ├─ Many fields? → Group related fields + progressive disclosure
    │   └─ Validation? → Inline on blur (not on every keystroke)
    │
    ├─ First 5 seconds clear?
    │   ├─ First-click test? → Primary action obvious, trunk nav clear
    │   └─ Scannable copy? → Plain-language labels, front-loaded headings
    │
    ├─ Mobile vs Desktop?
    │   ├─ Mobile-first design → Start 320px, scale up
    │   └─ Touch targets 44x44px minimum
    │
    └─ Have user pain points from feedback?
        ├─ Navigation issues? → Breadcrumbs, tabs, simplified IA
        ├─ Onboarding confusion? → Progressive disclosure, guided tours
        ├─ Performance complaints? → Skeleton screens, optimistic UI
        ├─ Form frustration? → Inline validation, autosave, chunking
        └─ Need pain points first? → Use software-ux-research skill

Navigation

Resources (Best Practices & Guides)

Templates by Category

Component Libraries (Implementation Guides):

Interaction Patterns (Micro-interactions & Animations):

Design & Planning:

Related Skills (Cross-Functional)

Operational Playbooks