ADHD-Friendly Design Expert

When to Use This Skill

• Designing apps/websites for ADHD users
• Reducing cognitive load in interfaces
• Time blindness solutions (timers, progress bars)
• Dopamine-driven engagement patterns
• Compassionate, non-shaming UX copy
• Gamification that respects ADHD

• General WCAG accessibility (different domain)
• Neurotypical UX design
• Simple UI styling without ADHD context

ADHD Neuroscience Quick Reference

Core Design Principles

1. Reduce Cognitive Load (Ruthlessly)

❌ BAD: "Choose your settings" [50 checkboxes]

✅ GOOD: "Let's set this up in 3 quick steps"
         Step 1: [One clear choice] → [Next]

• One primary action per screen
• Wizard/stepped flows over complex forms
• Progressive disclosure
• Sensible defaults pre-selected
• Persistent "You are here" indicators

2. Make Time Concrete

❌ BAD: "This will take a few minutes..."

✅ GOOD: ┌─────────────────────────┐
         │ ⏱️  2:47 remaining       │
         │ ████████░░░░░░░  45%     │
         │ 📦 Enough time to:       │
         │ • Make coffee ☕          │
         └─────────────────────────┘

• Always show timers for long operations
• Progress bars with percentage
• Break tasks into time chunks ("3 × 5min sessions")
• Show elapsed AND remaining time

3. Celebrate Everything

❌ BAD: [Task completed] [Next task]

✅ GOOD: ┌──────────────────────┐
         │   🎉 Nice work!      │
         │   [Streak: 3 days!]  │
         │   [+5 XP]            │
         └──────────────────────┘
         [Satisfying animation]

• Immediate visual/sound feedback
• Progress tracking with milestones
• Streak counters (but forgiving of breaks)
• Achievement badges (even for small wins)
• Confetti/animation for completions

4. Visible State & Memory

❌ BAD: [Hamburger Menu] → Tasks (12 hidden)

✅ GOOD: ┌─────────────────────────────┐
         │ TODAY                       │
         │ ☑️ Morning routine    Done  │
         │ 🔲 Write report      2h est │
         │ 🔲 Call dentist      5m est │
         └─────────────────────────────┘

• Persistent navigation (no hiding critical info)
• Status always visible
• Recent items easily accessible
• Preview/thumbnails over text lists
• Spatial layouts (consistent positions)

5. Forgiveness & Recovery

❌ BAD: ⚠️ You missed your goal!
        💔 Streak broken: 0 days

✅ GOOD: 🌱 Almost there!
         You completed 6/7 days
         [That's still 86%!]

• Streak freeze/protection options
• "Life happens" acknowledgment
• Flexible goals (adjust difficulty)
• Focus on progress, not perfection
• No shame language ever

Anti-Patterns

Punishment Design

Information Hiding

Vague Time Language

Choice Overload

Design Workflow

1. Research:

   mcp__firecrawl__firecrawl_search

   for ADHD UX studies
2. Pattern Analysis: Read existing codebase
3. Component Generation:

   mcp__magic__21st_magic_component_builder

   with ADHD principles
4. Visual Assets:

   mcp__stability-ai

   for engaging illustrations
5. Refinement:

   mcp__magic__21st_magic_component_refiner

   for accessibility

Audit Checklist

• Can user complete task with ≤3 clicks?
• Is there a visible timer/progress indicator?
• Does completion trigger celebration?
• Is the primary action obvious?
• Can mistakes be undone?
• Is language compassionate (no shame)?
• Are notifications controllable?
• Is there visual interest (not boring gray)?

Integration with Other Skills

• project-management-guru-adhd: Task management patterns
• tech-entrepreneur-coach-adhd: MVP design constraints
• design-system-creator: ADHD tokens in design system
• vaporwave-glassomorphic-ui-designer: Engaging visual styles

Reference Files

• /references/patterns-and-components.md

  - Design patterns, SwiftUI components, testing checklists

The Golden Rule