@agentskillkit/agent-skills 1.0.1 → 3.2.2

package/.agent/skills/frontend-design/rules/ux-psychology.md

@@ -1,541 +0,0 @@
-# UX Psychology Reference
-
-> Deep dive into UX laws, emotional design, trust building, and behavioral psychology.
-
----
-
-## 1. Core UX Laws
-
-### Hick's Law
-
-**Principle:** The time to make a decision increases logarithmically with the number of choices.
-
-```
-Decision Time = a + b × log₂(n + 1)
-Where n = number of choices
-```
-
-**Application:**
-- Navigation: Max 5-7 top-level items
-- Forms: Break into steps (progressive disclosure)
-- Options: Default selections when possible
-- Filters: Prioritize most-used, hide advanced
-
-**Example:**
-```
-❌ Bad: 15 menu items in one nav
-✅ Good: 5 main categories + "More" 
-
-❌ Bad: 20 form fields at once
-✅ Good: 3-step wizard with 5-7 fields each
-```
-
----
-
-### Fitts' Law
-
-**Principle:** Time to reach a target = function of distance and size.
-
-```
-MT = a + b × log₂(1 + D/W)
-Where D = distance, W = width
-```
-
-**Application:**
-- CTAs: Make primary buttons larger (min 44px height)
-- Touch targets: 44×44px minimum on mobile
-- Placement: Important actions near natural cursor position
-- Corners: "Magic corners" (infinite edge = easy to hit)
-
-**Button Sizing:**
-```css
-/* Size by importance */
-.btn-primary { height: 48px; padding: 0 24px; }
-.btn-secondary { height: 40px; padding: 0 16px; }
-.btn-tertiary { height: 36px; padding: 0 12px; }
-
-/* Mobile touch targets */
-@media (hover: none) {
-  .btn { min-height: 44px; min-width: 44px; }
-}
-```
-
----
-
-### Miller's Law
-
-**Principle:** Average person can hold 7±2 chunks in working memory.
-
-**Application:**
-- Lists: Group into chunks of 5-7 items
-- Navigation: Max 7 menu items
-- Content: Break long content with headings
-- Phone numbers: 555-123-4567 (chunked)
-
-**Chunking Example:**
-```
-❌ 5551234567
-✅ 555-123-4567
-
-❌ Long paragraph of text without breaks
-✅ Short paragraphs
-   With bullet points
-   And subheadings
-```
-
----
-
-### Von Restorff Effect (Isolation Effect)
-
-**Principle:** An item that stands out is more likely to be remembered.
-
-**Application:**
-- CTA buttons: Distinct color from other elements
-- Pricing: Highlight recommended plan
-- Important info: Visual differentiation
-- New features: Badge or callout
-
-**Example:**
-```css
-/* All buttons gray, primary stands out */
-.btn { background: #E5E7EB; }
-.btn-primary { background: #3B82F6; }
-
-/* Recommended plan highlighted */
-.pricing-card { border: 1px solid #E5E7EB; }
-.pricing-card.popular { 
-  border: 2px solid #3B82F6;
-  box-shadow: var(--shadow-lg);
-}
-```
-
----
-
-### Serial Position Effect
-
-**Principle:** Items at the beginning (primacy) and end (recency) of a list are remembered best.
-
-**Application:**
-- Navigation: Most important items first and last
-- Lists: Key info at top and bottom
-- Forms: Most critical fields at start
-- CTAs: Repeat at top and bottom of long pages
-
-**Example:**
-```
-Navigation: Home | [key items] | Contact
-
-Long landing page:
-- CTA at hero (top)
-- Content sections
-- CTA repeated at bottom
-```
-
----
-
-## 2. Emotional Design (Don Norman)
-
-### Three Levels of Processing
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│  VISCERAL (Lizard Brain)                                    │
-│  ─────────────────────                                      │
-│  • Immediate, automatic reaction                            │
-│  • First impressions (first 50ms)                          │
-│  • Aesthetics: colors, shapes, imagery                      │
-│  • "Wow, this looks beautiful!"                            │
-├─────────────────────────────────────────────────────────────┤
-│  BEHAVIORAL (Functional Brain)                              │
-│  ─────────────────────────────                              │
-│  • Usability and function                                   │
-│  • Pleasure from effective use                              │
-│  • Performance, reliability, ease                           │
-│  • "This works exactly how I expected!"                    │
-├─────────────────────────────────────────────────────────────┤
-│  REFLECTIVE (Conscious Brain)                               │
-│  ─────────────────────────────                              │
-│  • Conscious thought and meaning                            │
-│  • Personal identity and values                             │
-│  • Long-term memory and loyalty                             │
-│  • "This brand represents who I am"                        │
-└─────────────────────────────────────────────────────────────┘
-```
-
-### Designing for Each Level
-
-**Visceral:**
-```css
-/* Beautiful first impression */
-.hero {
-  background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
-  color: white;
-}
-
-/* Pleasing microinteractions */
-.button:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg);
-}
-```
-
-**Behavioral:**
-```javascript
-// Instant feedback
-button.onclick = () => {
-  button.disabled = true;
-  button.textContent = 'Saving...';
-  
-  save().then(() => {
-    showSuccess('Saved!');  // Immediate confirmation
-  });
-};
-```
-
-**Reflective:**
-```html
-<!-- Brand story and values -->
-<section class="about">
-  <h2>Why We Exist</h2>
-  <p>We believe technology should empower, not complicate...</p>
-</section>
-
-<!-- Social proof connecting to identity -->
-<blockquote>
-  "This tool helped me become the designer I wanted to be."
-</blockquote>
-```
-
----
-
-## 3. Trust Building System
-
-### Trust Signal Categories
-
-| Category | Elements | Implementation |
-|----------|----------|----------------|
-| **Security** | SSL, badges, encryption | Visible padlock, security logos on forms |
-| **Social Proof** | Reviews, testimonials, logos | Star ratings, customer photos, brand logos |
-| **Transparency** | Policies, pricing, contact | Clear links, no hidden fees, real address |
-| **Professional** | Design quality, consistency | No broken elements, consistent branding |
-| **Authority** | Certifications, awards, media | "As seen in...", industry certifications |
-
-### Trust Signal Placement
-
-```
-┌────────────────────────────────────────────────────┐
-│  HEADER: Trust banner ("Free shipping | 30-day    │
-│          returns | Secure checkout")               │
-├────────────────────────────────────────────────────┤
-│  HERO: Social proof ("Trusted by 10,000+")        │
-├────────────────────────────────────────────────────┤
-│  PRODUCT: Reviews visible, security badges         │
-├────────────────────────────────────────────────────┤
-│  CHECKOUT: Payment icons, SSL badge, guarantee     │
-├────────────────────────────────────────────────────┤
-│  FOOTER: Contact info, policies, certifications    │
-└────────────────────────────────────────────────────┘
-```
-
-### Trust-Building CSS Patterns
-
-```css
-/* Trust badge styling */
-.trust-badge {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: #F0FDF4;  /* Light green = security */
-  border-radius: 2px; /* Sharp for trust = precision feel */
-  font-size: 14px;
-  color: #166534;
-}
-
-/* Secure form indicator */
-.secure-form::before {
-  content: '🔒 Secure form';
-  display: block;
-  font-size: 12px;
-  color: #166534;
-  margin-bottom: 8px;
-}
-
-/* Testimonial card */
-.testimonial {
-  display: flex;
-  gap: 16px;
-  padding: 24px;
-  background: white;
-  border-radius: 16px; /* Friendly = larger radius */
-  box-shadow: var(--shadow-sm);
-}
-
-.testimonial-avatar {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;  /* Real photos > initials */
-}
-```
-
----
-
-## 4. Cognitive Load Management
-
-### Three Types of Cognitive Load
-
-| Type | Definition | Designer's Role |
-|------|------------|-----------------|
-| **Intrinsic** | Inherent complexity of task | Break into smaller steps |
-| **Extraneous** | Load from poor design | Eliminate this! |
-| **Germane** | Effort for learning | Support and encourage |
-
-### Reduction Strategies
-
-**1. Simplify (Reduce Extraneous)**
-```css
-/* Visual noise → Clean */
-.card-busy {
-  border: 2px solid red;
-  background: linear-gradient(...);
-  box-shadow: 0 0 20px ...;
-  /* Too much! */
-}
-
-.card-clean {
-  background: white;
-  border-radius: 16px;
-  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
-  /* Calm, focused */
-}
-```
-
-**2. Chunk Information**
-```html
-<!-- Overwhelming -->
-<form>
-  <!-- 15 fields at once -->
-</form>
-
-<!-- Chunked -->
-<form>
-  <fieldset>
-    <legend>Step 1: Personal Info</legend>
-    <!-- 3-4 fields -->
-  </fieldset>
-  <fieldset>
-    <legend>Step 2: Shipping</legend>
-    <!-- 3-4 fields -->
-  </fieldset>
-</form>
-```
-
-**3. Progressive Disclosure**
-```html
-<!-- Hide complexity until needed -->
-<div class="filters">
-  <div class="filters-basic">
-    <!-- Common filters visible -->
-  </div>
-  <button onclick="toggleAdvanced()">
-    Advanced Options ▼
-  </button>
-  <div class="filters-advanced" hidden>
-    <!-- Complex filters hidden -->
-  </div>
-</div>
-```
-
-**4. Use Familiar Patterns**
-```
-✅ Standard navigation placement
-✅ Expected icon meanings (🔍 = search)
-✅ Conventional form layouts
-✅ Common gesture patterns (swipe, pinch)
-```
-
-**5. Offload Information**
-```html
-<!-- Don't make users remember -->
-<label>
-  Card Number
-  <input type="text" inputmode="numeric" 
-         autocomplete="cc-number" 
-         placeholder="1234 5678 9012 3456">
-</label>
-
-<!-- Show what they entered -->
-<div class="order-summary">
-  <p>Shipping to: <strong>John Doe, 123 Main St...</strong></p>
-  <a href="#">Edit</a>
-</div>
-```
-
----
-
-## 5. Persuasive Design (Ethical)
-
-### Ethical Persuasion Techniques
-
-| Technique | Ethical Use | Dark Pattern (Avoid) |
-|-----------|-------------|----------------------|
-| **Scarcity** | Real stock levels | Fake countdown timers |
-| **Social Proof** | Genuine reviews | Fake testimonials |
-| **Authority** | Real credentials | Misleading badges |
-| **Urgency** | Real deadlines | Manufactured FOMO |
-| **Commitment** | Progress saving | Guilt-tripping |
-
-### Nudge Patterns
-
-**Smart Defaults:**
-```html
-<!-- Pre-select the recommended option -->
-<input type="radio" name="plan" value="monthly">
-<input type="radio" name="plan" value="annual" checked>
-  Annual (Save 20%)
-```
-
-**Anchoring:**
-```html
-<!-- Show original price to frame discount -->
-<div class="price">
-  <span class="original">$99</span>
-  <span class="current">$79</span>
-  <span class="savings">Save 20%</span>
-</div>
-```
-
-**Social Proof:**
-```html
-<!-- Real-time activity -->
-<div class="activity">
-  <span class="avatar">👤</span>
-  <span>Sarah from NYC just purchased</span>
-</div>
-
-<!-- Aggregate proof -->
-<p>Join 50,000+ designers who use our tool</p>
-```
-
-**Progress & Commitment:**
-```html
-<!-- Show progress to encourage completion -->
-<div class="progress">
-  <div class="progress-bar" style="width: 60%"></div>
-  <span>60% complete - almost there!</span>
-</div>
-```
-
----
-
-## 6. User Persona Quick Reference
-
-### Gen Z (Born 1997-2012)
-
-```
-CHARACTERISTICS:
-- Digital natives, mobile-first
-- Value authenticity, diversity
-- Short attention spans
-- Visual learners
-
-DESIGN APPROACH:
-├── Colors: Vibrant, hypercolor, bold gradients
-├── Typography: Large, variable, experimental
-├── Layout: Vertical scroll, mobile-native
-├── Interactions: Fast, gamified, gesture-based
-├── Content: Short-form video, memes, stories
-└── Trust: Peer reviews > authority
-```
-
-### Millennials (Born 1981-1996)
-
-```
-CHARACTERISTICS:
-- Value experiences over things
-- Research before buying
-- Socially conscious
-- Price-sensitive but quality-aware
-
-DESIGN APPROACH:
-├── Colors: Muted pastels, earth tones
-├── Typography: Clean, readable sans-serif
-├── Layout: Responsive, card-based
-├── Interactions: Smooth, purposeful animations
-├── Content: Value-driven, transparent
-└── Trust: Reviews, sustainability, values
-```
-
-### Gen X (Born 1965-1980)
-
-```
-CHARACTERISTICS:
-- Independent, self-reliant
-- Value efficiency
-- Skeptical of marketing
-- Balanced tech comfort
-
-DESIGN APPROACH:
-├── Colors: Professional, trustworthy
-├── Typography: Familiar, conservative
-├── Layout: Clear hierarchy, traditional
-├── Interactions: Functional, not flashy
-├── Content: Direct, fact-based
-└── Trust: Expertise, track record
-```
-
-### Baby Boomers (Born 1946-1964)
-
-```
-CHARACTERISTICS:
-- Detail-oriented
-- Loyal when trusted
-- Value personal service
-- Less tech-confident
-
-DESIGN APPROACH:
-├── Colors: High contrast, simple palette
-├── Typography: Large (18px+), high contrast
-├── Layout: Simple, linear, spacious
-├── Interactions: Minimal, clear feedback
-├── Content: Comprehensive, detailed
-└── Trust: Phone numbers, real people
-```
-
----
-
-## 7. Emotion Color Mapping
-
-```
-┌────────────────────────────────────────────────────┐
-│  EMOTION          │  COLORS           │  USE       │
-├───────────────────┼───────────────────┼────────────┤
-│  Trust            │  Blue, Green      │  Finance   │
-│  Excitement       │  Red, Orange      │  Sales     │
-│  Calm             │  Blue, Soft green │  Wellness  │
-│  Luxury           │  Black, Gold      │  Premium   │
-│  Creativity       │  Teal, Pink       │  Art       │
-│  Energy           │  Yellow, Orange   │  Sports    │
-│  Nature           │  Green, Brown     │  Eco       │
-│  Happiness        │  Yellow, Orange   │  Kids      │
-│  Sophistication   │  Gray, Navy       │  Corporate │
-│  Urgency          │  Red              │  Errors    │
-└───────────────────┴───────────────────┴────────────┘
-```
-
----
-
-## 8. Psychology Checklist
-
-### Before Launch
-
-- [ ] **Hick's Law:** No more than 7 choices in navigation
-- [ ] **Fitts' Law:** Primary CTAs are large and reachable
-- [ ] **Miller's Law:** Content is chunked appropriately
-- [ ] **Von Restorff:** CTAs stand out from surroundings
-- [ ] **Trust:** Security badges, reviews, policies visible
-- [ ] **Emotional:** Design evokes intended feeling
-- [ ] **Cognitive Load:** Interface is clean, not overwhelming
-- [ ] **Familiar Patterns:** Standard conventions used
-- [ ] **Feedback:** All actions have clear responses
-- [ ] **Accessibility:** Inclusive for all users