Initial commit

skills/cognitive-design/SKILL.md

@@ -0,0 +1,350 @@
+---
+name: cognitive-design
+description: Use when designing visual interfaces, data visualizations, educational content, or presentations and need to ensure they align with how humans naturally perceive, process, and remember information. Invoke when user mentions cognitive load, visual hierarchy, dashboard design, form design, e-learning, infographics, or wants to improve clarity and reduce user confusion. Also applies when evaluating existing designs for cognitive alignment or choosing between design alternatives.
+---
+
+# Cognitive Design Principles
+
+## Table of Contents
+
+- [Read This First](#read-this-first)
+- [How to Use This Skill](#how-to-use-this-skill)
+- [Workflows](#workflows)
+  - [New Design Workflow](#new-design-workflow)
+  - [Design Review Workflow](#design-review-workflow)
+  - [Quick Validation Workflow](#quick-validation-workflow)
+- [Path Selection Menu](#path-selection-menu)
+  - [Path 1: Understand Cognitive Foundations](#path-1-understand-cognitive-foundations)
+  - [Path 2: Apply Design Frameworks](#path-2-apply-design-frameworks)
+  - [Path 3: Evaluate Existing Designs](#path-3-evaluate-existing-designs)
+  - [Path 4: Get Domain-Specific Guidance](#path-4-get-domain-specific-guidance)
+  - [Path 5: Avoid Common Mistakes](#path-5-avoid-common-mistakes)
+  - [Path 6: Access Quick Reference](#path-6-access-quick-reference)
+  - [Path 7: Exit](#path-7-exit)
+
+---
+
+## Read This First
+
+### What This Skill Does
+
+This skill helps you create **cognitively aligned designs** - visual interfaces, data visualizations, educational content, and presentations that work with (not against) human perception, attention, memory, and decision-making.
+
+**Core principle:** Effective design aligns with how people think, not just how things look.
+
+### Why Cognitive Design Matters
+
+**Common problems this addresses:**
+- Users miss critical information in dashboards
+- Complex interfaces cause cognitive overload and abandonment
+- Data visualizations are misinterpreted or misleading
+- Educational materials aren't retained
+- Form completion rates are low
+- Error messages are confusing
+
+**How this helps:**
+- Ground design decisions in cognitive psychology research
+- Apply systematic frameworks (Cognitive Design Pyramid, Design Feedback Loop, Three-Layer Model)
+- Evaluate designs against objective cognitive criteria
+- Choose appropriate visual encodings based on perceptual hierarchy
+- Manage attention, memory limits, and cognitive load
+
+### When to Use This Skill
+
+**Use this skill when:**
+- ✓ Designing new interfaces, dashboards, visualizations, or educational content
+- ✓ Users report confusion, overwhelm, or missing information
+- ✓ Improving designs with poor metrics (low completion rates, high bounce rates)
+- ✓ Conducting design reviews and need systematic evaluation
+- ✓ Choosing between design alternatives with cognitive rationale
+- ✓ Advocating for design decisions to stakeholders
+- ✓ Designing high-stakes interfaces where cognitive failure has consequences
+
+**Do NOT use for:**
+- ✗ Pure aesthetic/brand identity decisions unrelated to cognition
+- ✗ Technical implementation (coding, databases)
+- ✗ Business strategy (feature prioritization, pricing)
+- ✗ Tool-specific training (how to use Figma, Tableau, etc.)
+
+### How This Skill Works
+
+This is an **interactive hub** - you choose your path based on current need:
+
+1. **Learning mode:** Start with Path 1 (Cognitive Foundations) to understand principles
+2. **Application mode:** Jump to Path 2 (Frameworks) or Path 4 (Domain Guidance) to apply to specific design
+3. **Evaluation mode:** Use Path 3 (Evaluation Tools) to assess existing designs
+4. **Quick mode:** Use Path 6 (Quick Reference) for rapid decision-making
+
+**After completing any path, return to the menu to select another or exit.**
+
+### Collaborative Nature
+
+I'll guide you through cognitive design principles by:
+- Explaining WHY certain designs work (cognitive foundations)
+- Providing HOW to apply principles (frameworks and workflows)
+- Offering domain-specific guidance (data viz, UX, education, storytelling)
+- Evaluating designs systematically (checklists and audits)
+
+You bring domain expertise and context; I provide cognitive science grounding.
+
+---
+
+## How to Use This Skill
+
+### Prerequisites
+
+- Basic design literacy (familiarity with UI terminology, common chart types)
+- Understanding of user tasks and context (from user research, stories, or brief)
+- Access to design being created or evaluated
+
+### Expected Outcomes
+
+**Immediate:**
+- Designs with clear visual hierarchy
+- Reduced cognitive load (fewer overwhelm complaints)
+- Systematic evaluation process
+
+**Short-term (weeks):**
+- Improved usability metrics (completion rates, time-on-task)
+- Fewer user support requests
+- More defensible design decisions
+
+**Long-term (months):**
+- Internalized cognitive principles
+- Team shared vocabulary
+- Measurable business impact
+
+---
+
+## Workflows
+
+Choose a workflow based on your current situation:
+
+### New Design Workflow
+
+**Use when:** Creating a new interface, dashboard, visualization, or educational content from scratch
+
+**Time:** 2-4 hours
+
+**Copy this checklist and track your progress:**
+
+```
+New Design Progress:
+- [ ] Step 1: Orient to cognitive principles
+- [ ] Step 2: Structure design thinking with frameworks
+- [ ] Step 3: Apply domain-specific guidance
+- [ ] Step 4: Evaluate design for cognitive alignment
+- [ ] Step 5: Check for common mistakes
+- [ ] Step 6: Iterate based on findings
+```
+
+**Step 1: Orient to cognitive principles**
+
+Start with [Cognitive Foundations](resources/cognitive-foundations.md) for deep understanding of WHY designs work (perception, memory, Gestalt principles) OR use [Quick Reference](resources/quick-reference.md) for rapid orientation (20 core principles, decision rules). Foundations give you theoretical grounding; Quick Reference gets you started faster.
+
+**Step 2: Structure design thinking with frameworks**
+
+Use [Design Frameworks](resources/frameworks.md) to apply systematic approaches: Cognitive Design Pyramid (4-tier quality assessment), Design Feedback Loop (interaction cycles), and Three-Layer Visualization Model (data communication fidelity). These provide repeatable structure for design decisions.
+
+**Step 3: Apply domain-specific guidance**
+
+Choose your domain: [Data Visualization](resources/data-visualization.md) for charts/dashboards, [UX Product Design](resources/ux-product-design.md) for interfaces/apps, [Educational Design](resources/educational-design.md) for e-learning/training, or [Storytelling & Journalism](resources/storytelling-journalism.md) for data journalism/presentations. Apply tailored cognitive principles for your specific context.
+
+**Step 4: Evaluate design for cognitive alignment**
+
+Use [Evaluation Tools](resources/evaluation-tools.md) to assess systematically: Cognitive Design Checklist (8 dimensions including visibility, hierarchy, chunking) and Visualization Audit Framework (4 criteria: Clarity, Efficiency, Integrity, Aesthetics). Identify weaknesses and prioritize fixes.
+
+**Step 5: Check for common mistakes**
+
+Review [Cognitive Fallacies](resources/cognitive-fallacies.md) to prevent failures: chartjunk, truncated axes, 3D distortion, cognitive biases, data integrity violations. Ensure your design avoids misleading patterns.
+
+**Step 6: Iterate based on findings**
+
+Return to domain guidance or frameworks as needed. Fix issues identified in evaluation. Re-evaluate until design passes cognitive alignment criteria (avg score ≥3.5 on rubric).
+
+---
+
+### Design Review Workflow
+
+**Use when:** Evaluating existing designs for cognitive alignment, conducting design critiques, or diagnosing usability issues
+
+**Time:** 30-60 minutes
+
+**Copy this checklist and track your progress:**
+
+```
+Design Review Progress:
+- [ ] Step 1: Systematic assessment with evaluation tools
+- [ ] Step 2: Quick checks for common mistakes
+- [ ] Step 3: Rapid validation against core principles
+- [ ] Step 4: Note issues and prioritize fixes
+```
+
+**Step 1: Systematic assessment with evaluation tools**
+
+Start with [Evaluation Tools](resources/evaluation-tools.md) for comprehensive review: Apply Cognitive Design Checklist (visibility, hierarchy, chunking, simplicity, memory support, feedback, consistency, scanning) and Visualization Audit Framework (score Clarity, Efficiency, Integrity, Aesthetics 1-5). Identify failing dimensions.
+
+**Step 2: Quick checks for common mistakes**
+
+Reference [Cognitive Fallacies](resources/cognitive-fallacies.md) for rapid diagnosis: Look for chartjunk, truncated axes, 3D effects, misleading colors, data integrity violations. These are common culprits in cognitive failures.
+
+**Step 3: Rapid validation against core principles**
+
+Use [Quick Reference](resources/quick-reference.md) for fast validation: Apply 3-question check (Attention? Memory? Clarity?), verify chart selection matches task, check color usage, confirm chunking fits working memory. Catches major issues quickly.
+
+**Step 4: Note issues and prioritize fixes**
+
+Document findings with severity: CRITICAL (integrity violations, accessibility failures), HIGH (clarity/efficiency issues preventing use), MEDIUM (suboptimal patterns, aesthetic issues), LOW (minor optimizations). Prioritize fixes foundation-first (perception → coherence → engagement → behavior).
+
+---
+
+### Quick Validation Workflow
+
+**Use when:** Need rapid go/no-go decision, spot-checking changes, or validating against cognitive basics during active design work
+
+**Time:** 5-10 minutes
+
+**Copy this checklist and track your progress:**
+
+```
+Quick Validation Progress:
+- [ ] Step 1: Three-question rapid check
+- [ ] Step 2: Spot checks if issues found
+```
+
+**Step 1: Three-question rapid check**
+
+Use [Quick Reference](resources/quick-reference.md) and apply: (1) Attention - "Is it obvious what to look at first?" (visual hierarchy clear, primary elements salient, predictable scanning), (2) Memory - "Is user required to remember anything that could be shown?" (state visible, options presented, fits 4±1 chunks), (3) Clarity - "Can someone unfamiliar understand in 5 seconds?" (purpose graspable, no unnecessary decoration, familiar terminology). If all YES → likely cognitively sound.
+
+**Step 2: Spot checks if issues found**
+
+If any question fails, use [Evaluation Tools](resources/evaluation-tools.md) for targeted diagnosis: Failed attention? Check hierarchy and visual salience sections. Failed memory? Check chunking and memory support sections. Failed clarity? Check simplicity and labeling sections. Apply specific fixes from relevant section.
+
+---
+
+## Path Selection Menu
+
+**Choose your path based on current need:**
+
+### Path 1: Understand Cognitive Foundations
+
+**Choose this when:** You want to learn the core cognitive psychology principles underlying effective design (attention, memory, perception, Gestalt grouping, visual encoding hierarchy).
+
+**What you'll get:** Deep understanding of WHY certain designs work, grounded in research from Tufte, Norman, Ware, Cleveland & McGill, Mayer, and others.
+
+**Time:** 20-40 minutes
+
+**→ [Go to Cognitive Foundations resource](resources/cognitive-foundations.md)**
+
+---
+
+### Path 2: Apply Design Frameworks
+
+**Choose this when:** You want systematic frameworks to structure your design thinking and decision-making.
+
+**What you'll get:** Three complementary frameworks:
+- **Cognitive Design Pyramid** (4 tiers: Perceptual Efficiency → Cognitive Coherence → Emotional Engagement → Behavioral Alignment)
+- **Design Feedback Loop** (Perceive → Interpret → Decide → Act → Learn)
+- **Three-Layer Visualization Model** (Data → Visual Encoding → Cognitive Interpretation)
+
+**Time:** 30-45 minutes
+
+**→ [Go to Frameworks resource](resources/frameworks.md)**
+
+---
+
+### Path 3: Evaluate Existing Designs
+
+**Choose this when:** You need to assess a design systematically for cognitive alignment, or conducting a design review/critique.
+
+**What you'll get:**
+- **Cognitive Design Checklist** (visibility, hierarchy, chunking, consistency, feedback, memory support)
+- **Visualization Audit Framework** (4 criteria: Clarity, Efficiency, Integrity, Aesthetics)
+- Examples of evaluation in practice
+
+**Time:** 30-60 minutes (depending on design complexity)
+
+**→ [Go to Evaluation Tools resource](resources/evaluation-tools.md)**
+
+---
+
+### Path 4: Get Domain-Specific Guidance
+
+**Choose this when:** You're working on a specific type of design and want tailored cognitive principles for that context.
+
+**Choose your domain:**
+
+#### 4a. Data Visualization (Charts, Dashboards, Analytics)
+
+**→ [Go to Data Visualization resource](resources/data-visualization.md)**
+
+**Covers:** Chart selection via task-encoding alignment, dashboard hierarchy and grouping, progressive disclosure for exploration, narrative data visualization
+
+---
+
+#### 4b. Product/UX Design (Interfaces, Mobile Apps, Web Applications)
+
+**→ [Go to UX Product Design resource](resources/ux-product-design.md)**
+
+**Covers:** Learnability via familiar patterns, task flow efficiency, cognitive load management, onboarding design, error handling
+
+---
+
+#### 4c. Educational Design (E-Learning, Training, Instructional Materials)
+
+**→ [Go to Educational Design resource](resources/educational-design.md)**
+
+**Covers:** Multimedia learning principles, dual coding, worked examples, retrieval practice, segmenting, coherence principle
+
+---
+
+#### 4d. Storytelling/Journalism (Data Journalism, Presentations, Infographics)
+
+**→ [Go to Storytelling & Journalism resource](resources/storytelling-journalism.md)**
+
+**Covers:** Visual narrative structure, annotation strategies, scrollytelling, framing and context, visual metaphors
+
+---
+
+### Path 5: Avoid Common Mistakes
+
+**Choose this when:** You want to prevent or diagnose cognitive design failures - chartjunk, misleading visualizations, cognitive biases, data integrity violations.
+
+**What you'll get:**
+- Common cognitive fallacies explained (WHY they fail)
+- Visual misleads and how to avoid them
+- Integrity principles for trustworthy design
+
+**Time:** 15-25 minutes
+
+**→ [Go to Cognitive Fallacies resource](resources/cognitive-fallacies.md)**
+
+---
+
+### Path 6: Access Quick Reference
+
+**Choose this when:** You need rapid design guidance, core principles summary, or quick validation checks.
+
+**What you'll get:**
+- 20 core actionable principles (one-sentence summaries)
+- 3-question quick check (Attention, Memory, Clarity)
+- Common decision rules (when to use bar vs pie charts, how to chunk information, etc.)
+- Design heuristics at a glance
+
+**Time:** 5-15 minutes
+
+**→ [Go to Quick Reference resource](resources/quick-reference.md)**
+
+---
+
+### Path 7: Exit
+
+**Choose this when:** You've completed your design work or gathered the information you need.
+
+**Before you exit:**
+- Have you achieved your goal for this session?
+- Do you need to return to any path for deeper exploration?
+- Have you documented key design decisions and cognitive rationale?
+
+**Thank you for using the Cognitive Design skill. Your designs are now more cognitively aligned!**
+

skills/cognitive-design/resources/cognitive-fallacies.md

@@ -0,0 +1,488 @@
+# Cognitive Fallacies & Visual Misleads
+
+This resource covers common design failures that confuse or mislead users - what NOT to do and how to avoid cognitive pitfalls.
+
+**Covered topics:**
+1. Chartjunk and data-ink ratio violations
+2. Misleading visualizations (truncated axes, 3D distortion)
+3. Cognitive biases in interpretation
+4. Data integrity violations
+5. Integrity principles and solutions
+
+---
+
+## Why Avoid Cognitive Fallacies
+
+### WHY This Matters
+
+**Core insight:** Common visualization mistakes aren't just aesthetic failures - they cause systematic cognitive misinterpretation and damage trust.
+
+**Problems caused by fallacies:**
+- **Chartjunk:** Consumes working memory without conveying data
+- **Truncated axes:** Exaggerates differences, misleads comparison
+- **3D effects:** Distorts perception through volume illusions
+- **Cherry-picking:** Misleads by omitting contradictory context
+- **Spurious correlations:** Implies false causation
+
+**Why designers commit fallacies:**
+- Aesthetic appeal prioritized over clarity
+- Unaware of cognitive impacts
+- Intentional manipulation (sometimes)
+- Following bad examples
+
+**Ethical obligation:** Visualizations are persuasive - designers have responsibility to communicate honestly.
+
+---
+
+## What You'll Learn
+
+**Five categories of failures:**
+
+1. **Visual Noise:** Chartjunk, low data-ink ratio, clutter
+2. **Perceptual Distortions:** 3D effects, volume illusions, inappropriate chart types
+3. **Cognitive Biases:** Confirmation bias, anchoring, framing effects
+4. **Data Integrity Violations:** Truncated axes, cherry-picking, non-uniform scales
+5. **Misleading Correlations:** Spurious correlations, false causation
+
+---
+
+## Why Chartjunk Impairs Comprehension
+
+### WHY This Matters
+
+**Definition:** Gratuitous visual decorations that obscure data without adding information (Tufte).
+
+**Cognitive mechanism:**
+- Working memory limited to 4±1 chunks
+- Every visual element consumes attentional resources
+- Decorative elements compete with data for attention
+- Resources spent on decoration unavailable for comprehension
+
+**Result:** Slower comprehension, higher cognitive load, missed insights
+
+---
+
+### WHAT to Avoid
+
+#### Common Chartjunk
+
+**Avoid:** Heavy backgrounds (gradients/textures), excessive gridlines, 3D effects for decoration, decorative icons replacing data, ornamental elements (borders/fancy fonts)
+**Why problematic:** Reduces contrast, creates visual noise, distorts perception, competes with data
+**Solution:** White/light background, minimal gray gridlines, flat 2D design, simple bars, minimal decoration
+
+---
+
+#### Data-Ink Ratio
+
+**Tufte's principle:** Maximize proportion of ink showing data, minimize non-data ink
+
+**Application:**
+```
+Audit every element: "Does this convey data or improve comprehension?"
+If NO → remove it
+If YES → keep it minimal
+```
+
+**Example optimization:**
+```
+Before:
+- Heavy gridlines: 30% ink
+- 3D effects: 20% ink
+- Decorative borders: 10% ink
+- Actual data: 40% ink
+Data-ink ratio: 40%
+
+After:
+- Minimal axis: 5% ink
+- Simple bars: 95% ink
+Data-ink ratio: 95%
+
+Result: Faster comprehension, clearer message
+```
+
+---
+
+## Why Truncated Axes Mislead
+
+### WHY This Matters
+
+**Definition:** Axes that don't start at zero, cutting off the baseline
+
+**Cognitive issue:** Viewers assume bar length is proportional to value - truncation breaks this assumption
+
+**Effect:** Small absolute differences appear dramatically large
+
+---
+
+### WHAT to Avoid
+
+#### Truncated Bar Charts
+
+**Problem example:**
+```
+Sales comparison:
+Company A: $80M (bar shows from $70M)
+Company B: $85M (bar shows from $70M)
+
+Visual: Company B's bar looks 5x larger than A
+Reality: Only 6.25% difference ($5M on $80M base)
+
+Mislead mechanism: Truncated y-axis starting at $70M instead of $0M
+```
+
+**Solutions:**
+```
+Option 1: Start y-axis at zero (honest proportional representation)
+Option 2: Use line chart instead (focuses on change, zero baseline less critical)
+Option 3: If truncating necessary, add clear axis break symbol and annotation
+Option 4: Show absolute numbers directly on bars to provide context
+```
+
+---
+
+#### When Truncation is Acceptable
+
+**Line charts:**
+```
+✓ Showing stock price changes over time
+✓ Temperature trends
+✓ Focus is on pattern/trend, not absolute magnitude comparison
+
+Requirement: Still note scale clearly, provide context
+```
+
+**Small multiples with consistent truncation:**
+```
+✓ Comparing trend patterns across categories
+✓ All charts use same y-axis range (fair comparison)
+✓ Clearly labeled
+
+Purpose: See shape differences, not magnitude
+```
+
+---
+
+## Why 3D Effects Distort
+
+### WHY This Matters
+
+**Cognitive issue:** Human visual system estimates 3D volumes and angles imprecisely
+
+**Mechanisms:**
+- **Perspective foreshortening:** Elements at front appear larger than identical elements at back
+- **Volume scaling:** Doubling height and width octuples volume, but may be perceived linearly
+- **Angle distortion:** 3D pie slices at different positions appear different sizes even when equal
+
+---
+
+### WHAT to Avoid
+
+#### 3D Bar Charts
+
+**Problem:**
+```
+3D bars with depth dimension:
+- Harder to judge bar height (top surface not aligned with axis)
+- Perspective makes back bars look smaller
+- Depth adds no information, only distortion
+
+Solution: Use simple 2D bars
+```
+
+---
+
+#### 3D Pie Charts
+
+**Problem:**
+```
+3D pie with perspective:
+- Slices at front appear larger than equal slices at back
+- Angles further distorted by tilt
+- Already-poor angle perception made worse
+
+Solution: If pie necessary, use flat 2D; better yet, use bar chart
+```
+
+---
+
+#### Volume Illusions
+
+**Problem:**
+```
+Scaling icons in multiple dimensions:
+Person icon twice as tall to represent 2x data
+Visual result: 4x area (height × width)
+Viewer perception: May see as 2x, 4x, or even 8x (volume)
+
+Solution: Scale only one dimension (height), or use simple bars
+```
+
+---
+
+## Why Cognitive Biases Affect Interpretation
+
+### WHY This Matters
+
+**Core insight:** Viewers bring cognitive biases to data interpretation - design can either reinforce or mitigate these biases.
+
+**Key biases:**
+- **Confirmation bias:** See what confirms existing beliefs
+- **Anchoring:** First number sets benchmark for all subsequent
+- **Framing effects:** How data is presented influences emotional response
+
+**Designer responsibility:** Present data neutrally, provide full context, enable exploration
+
+---
+
+### WHAT to Avoid
+
+#### Reinforcing Confirmation Bias
+
+**Problem:**
+```
+Dashboard highlighting data supporting desired conclusion
+- Only positive metrics prominent
+- Contradictory data hidden or small
+- Selective time periods
+
+Result: Viewers who want to believe conclusion find easy support
+```
+
+**Solutions:**
+```
+✓ Present full context, not cherry-picked subset
+✓ Enable filtering/exploration (users can challenge assumptions)
+✓ Show multiple viewpoints or comparisons
+✓ Note data limitations and contradictions
+```
+
+---
+
+#### Anchoring Effects
+
+**Problem:**
+```
+Leading with dramatic statistic:
+"Sales increased 500%!" (from $10k to $50k, absolute small)
+Then: "Annual revenue $2M" (anchored to 500%, seems disappointing)
+
+First number anchors perception of all subsequent numbers
+```
+
+**Solutions:**
+```
+✓ Provide baseline context upfront
+✓ Show absolute and relative numbers together
+✓ Be mindful of what's shown first in presentations
+✓ Use neutral sorting (alphabetical, not "best first")
+```
+
+---
+
+#### Framing Effects
+
+**Problem:**
+```
+Same data, different frames:
+"10% unemployment" vs "90% employed"
+"1 in 10 fail" vs "90% success rate"
+"50 new cases today" vs "Cumulative 5,000 cases"
+
+Same numbers, different emotional impact
+```
+
+**Solutions:**
+```
+✓ Acknowledge framing choice
+✓ Provide multiple views (daily AND cumulative)
+✓ Show absolute AND relative (percentages + actual numbers)
+✓ Consider audience and choose frame ethically
+```
+
+**Note:** Framing isn't inherently wrong, but it's powerful - use responsibly
+
+---
+
+## Why Data Integrity Violations Damage Trust
+
+### WHY This Matters
+
+**Tufte's Graphical Integrity:** Visual representation should be proportional to numerical quantities
+
+**Components:**
+- Honest axes (zero baseline or marked truncation)
+- Fair comparisons (same scale)
+- Complete context (full time period, baselines)
+- Clear labeling (sources, methodology)
+
+**Why it matters:** Trust is fragile - one misleading visualization damages credibility long-term
+
+---
+
+### WHAT to Avoid
+
+#### Cherry-Picking Time Periods
+
+**Problem:**
+```
+"Revenue grew 30% in Q4!"
+...omitting that it declined 40% over full year
+
+Mislead mechanism: Showing only favorable subset
+```
+
+**Solutions:**
+```
+✓ Show full relevant time period
+✓ If focusing on segment, show it IN CONTEXT of whole
+✓ Note data selection criteria ("Q4 only shown because...")
+✓ Provide historical comparison (vs same quarter previous year)
+```
+
+---
+
+#### Non-Uniform Scales
+
+**Problem:**
+```
+X-axis intervals:
+0, 10, 20, 50, 100 (not uniform increments)
+
+Effect: Trend appears to accelerate or decelerate artificially
+```
+
+**Solutions:**
+```
+✓ Use uniform scale intervals
+✓ If log scale needed, clearly label as such
+✓ If breaks necessary, mark with axis break symbol
+```
+
+---
+
+#### Missing Context
+
+**Problem:**
+```
+"50% increase!" without denominator
+50% of what? 2 to 3? 1000 to 1500?
+
+"Highest level in 6 months!" without historical context
+What was level 7 months ago? 1 year ago? Historical average?
+```
+
+**Solutions:**
+```
+✓ Show absolute numbers + percentages
+✓ Provide historical context (historical average, benchmarks)
+✓ Include comparison baselines (previous period, peer comparison)
+✓ Note sample size and data source
+```
+
+---
+
+## Why Spurious Correlations Mislead
+
+### WHY This Matters
+
+**Definition:** Statistical relationship between variables with no causal connection
+
+**Classic example:** Ice cream sales vs shark attacks (both increase in summer, no causal link)
+
+**Cognitive bias:** Correlation looks like causation when visualized together
+
+**Designer responsibility:** Clarify when relationships are correlational vs causal
+
+---
+
+### WHAT to Avoid
+
+#### Dual-Axis Manipulation
+
+**Problem:**
+```
+Dual-axis chart with independent scales:
+Left axis: Metric A (scaled 0-100)
+Right axis: Metric B (scaled 0-10)
+
+By adjusting scales, can make ANY two metrics appear correlated
+Viewer sees: Lines moving together, assumes relationship
+Reality: Scales manipulated to create visual similarity
+```
+
+**Solutions:**
+```
+✓ Use dual-axis only when relationship is justified (not arbitrary)
+✓ Clearly label both axes
+✓ Explain WHY two metrics are shown together
+✓ Consider separate charts if relationship unclear
+```
+
+---
+
+#### Implying Causation
+
+**Problem:**
+```
+Chart showing two rising trends:
+"Social media usage and depression rates both rising"
+
+Visual implication: One causes the other
+Reality: Could be correlation only, common cause, or coincidence
+```
+
+**Solutions:**
+```
+✓ Explicitly state "correlation, not proven causation"
+✓ Note other possible explanations
+✓ If causal claim, cite research supporting it
+✓ Provide mechanism explanation if causal
+```
+
+---
+
+## Integrity Principles
+
+### What to Apply
+
+**Honest Axes:**
+```
+✓ Start bars at zero or clearly mark truncation
+✓ Use uniform scale intervals
+✓ Label clearly with units
+✓ If log scale, label as such
+```
+
+**Fair Comparisons:**
+```
+✓ Use same scale for items being compared
+✓ Don't manipulate dual-axis to force visual correlation
+✓ Show data for same time periods
+✓ Include all relevant data points (not selective)
+```
+
+**Complete Context:**
+```
+✓ Show full time period or note selection
+✓ Include baselines (previous year, average, benchmark)
+✓ Provide denominator for percentages
+✓ Note when data is projected/estimated vs actual
+```
+
+**Accurate Encoding:**
+```
+✓ Match visual scaling to data scaling
+✓ Avoid volume illusions (icon sizing)
+✓ Use 2D representations for accuracy
+✓ Ensure color encoding matches meaning (red=negative convention)
+```
+
+**Transparency:**
+```
+✓ Note data sources
+✓ Mention sample sizes
+✓ State selection criteria if data is subset
+✓ Acknowledge limitations
+✓ Provide access to full dataset when possible
+```
+

skills/cognitive-design/resources/cognitive-foundations.md

@@ -0,0 +1,490 @@
+# Cognitive Foundations
+
+This resource explains the core cognitive psychology principles underlying effective visual design.
+
+**Foundation for:** All other paths in this skill
+
+---
+
+## Why Learn Cognitive Foundations
+
+### WHY This Matters
+
+Understanding how humans perceive, attend, remember, and process information enables you to:
+- **Predict user behavior:** Know what users will notice, understand, and remember
+- **Design with confidence:** Ground decisions in research, not guesswork
+- **Diagnose problems:** Identify why designs fail cognitively
+- **Advocate effectively:** Explain design rationale with scientific backing
+
+**Mental model:** Like a doctor needs anatomy to diagnose illness, designers need cognitive psychology to diagnose interface problems.
+
+**Research foundation:** Tufte (data visualization), Norman (interaction design), Ware (visual perception), Cleveland & McGill (graphical perception), Miller/Cowan (working memory), Gestalt psychology (perceptual grouping), Mayer (multimedia learning).
+
+Without cognitive foundations: design by intuition alone, inconsistent decisions, inability to explain why designs work or fail.
+
+---
+
+## What You'll Learn
+
+### Core Cognitive Concepts
+
+This section covers 5 foundational areas:
+1. **Perception & Attention** - What users notice first, visual search, preattentive processing
+2. **Memory & Cognition** - Working memory limits, chunking, cognitive load
+3. **Gestalt & Grouping** - Automatic perceptual organization patterns
+4. **Visual Encoding** - Hierarchy of perceptual accuracy for different chart types
+5. **Mental Models & Mapping** - How prior experience shapes expectations
+
+---
+
+## Why Perception & Attention
+
+### WHY This Matters
+
+**Core insight:** Attention is limited and selective like a spotlight - you can only focus on one thing at high resolution while periphery remains blurry.
+
+**Implications:**
+- Visual design controls where attention goes
+- Competing elements dilute attention
+- Critical information must be made salient
+- Users scan, they don't read everything thoroughly
+
+**Mental model:** Human vision is like a camera with a tiny high-resolution center (fovea covers ~1-2° of visual field) and low-resolution periphery. We rapidly move attention spotlight to important areas.
+
+---
+
+### WHAT to Know
+
+#### Preattentive Processing
+
+**Definition:** Detection of basic visual features in under 500ms before conscious attention.
+
+**Preattentive Features:**
+- **Color:** A single red item among gray pops out instantly
+- **Form:** Unique shapes stand out (circle among squares)
+- **Motion:** Moving elements grab attention automatically
+- **Position:** Spatial outliers noticed quickly
+- **Size:** Largest/smallest items detected fast
+
+**Application Rule:**
+```
+Use preattentive features sparingly for 1-3 critical elements only.
+Too many salient elements = visual noise = nothing stands out.
+```
+
+**Example:** Dashboard alert in red among gray metrics → immediate attention
+
+**Anti-pattern:** Everything in bright colors → overwhelm, nothing prioritized
+
+---
+
+#### Visual Search
+
+**Definition:** After preattentive pop-out, users engage in serial visual search - scanning one area at a time with high acuity.
+
+**Predictable Patterns:**
+- **F-pattern:** Text-heavy content (read top-left to top-right, then down left side, short horizontal scan middle)
+- **Z-pattern:** Visual-heavy content (top-left to top-right, diagonal to bottom-left, then bottom-right)
+- **Gutenberg Diagram:** Primary optical area top-left, terminal area bottom-right
+
+**Application Rule:**
+```
+Position most important elements along scanning path:
+- Top-left for primary content (both patterns start here)
+- Top-right for secondary actions
+- Bottom-right for terminal actions (next/submit)
+```
+
+**Example:** Dashboard KPIs top-left, details below, "Export" button bottom-right
+
+---
+
+#### Attention Spotlight Trade-offs
+
+**Attention is zero-sum:** Effort spent on decorations is unavailable for data comprehension.
+
+**Rule:** Maximize attention on task-relevant elements, minimize on decorative elements.
+
+**Squint Test:** Blur design (squint or Gaussian blur) - can you still identify what's important? If hierarchy disappears when blurred, it's too subtle.
+
+---
+
+## Why Memory & Cognition
+
+### WHY This Matters
+
+**Core insight:** Working memory can hold only ~4±1 meaningful chunks of information, and items fade within seconds unless rehearsed.
+
+**Implications:**
+- Interfaces must be designed to fit memory limits
+- Information must be chunked into groups
+- State should be externalized to interface, not user's memory
+- Recognition is vastly easier than recall
+
+**Mental model:** Working memory is like juggling - you can keep 3-5 balls in the air, but adding more causes you to drop them all.
+
+**Updated understanding:** Miller (1956) proposed 7±2 chunks, but Cowan (2001) showed actual capacity is 4±1 for most people.
+
+---
+
+### WHAT to Know
+
+#### Working Memory Capacity
+
+**Definition:** "Mental scratchpad" holding active information temporarily (seconds) before transfer to long-term memory or loss.
+
+**Capacity:** **4±1 chunks** for most people
+
+**Chunk:** Meaningful unit of information
+- Expert: "555-123-4567" = 1 chunk (phone number)
+- Novice: "555-123-4567" = 10 chunks (each digit separate)
+
+**Application Rule:**
+```
+Design within 4±1 constraint:
+- Navigation: ≤7 top-level categories
+- Forms: 4-6 fields per screen without wizard
+- Dashboards: Group metrics into 3-5 categories
+- Choices: Limit concurrent options to ≤7
+```
+
+**Example:** Registration wizard with 4 steps (personal info, account, preferences, review) vs single 30-field page
+
+**Why it works:** Each step fits in working memory; progress indicator externalizes "where am I"
+
+---
+
+#### Cognitive Load Types
+
+**Intrinsic Load:** Inherent complexity of the task itself (can't change)
+
+**Extraneous Load:** Mental effort from poor design - confusing interfaces, unclear icons, missing context
+→ **MINIMIZE THIS**
+
+**Germane Load:** Meaningful mental effort contributing to learning or understanding
+→ **Support this, don't eliminate**
+
+**Application Rule:**
+```
+Reduce extraneous load to free capacity for germane load:
+- Remove decorative elements (chartjunk)
+- Simplify workflows (fewer steps, fewer choices)
+- Provide memory aids (breadcrumbs, visible state, tooltips)
+- Use familiar patterns (standard UI conventions)
+```
+
+**Example:** E-learning slide with audio narration + diagram (germane load) vs text + diagram + background music (extraneous load from competing visual text and irrelevant music)
+
+---
+
+#### Recognition vs. Recall
+
+**Recall:** Retrieve from memory without cues (hard, error-prone, slow)
+- "What was the error code?"
+- "Which menu has the export function?"
+
+**Recognition:** Identify among presented options (easy, fast, accurate)
+- Error message shown in context
+- Menu items visible
+
+**Application Rule:**
+```
+Design for recognition over recall:
+- Show available options (dropdown) vs requiring typed command
+- Display current filters as visible chips vs requiring memory
+- Provide breadcrumbs vs expecting user to remember navigation path
+- Use icons WITH labels vs icons alone
+```
+
+**Example:** File menu with visible "Save" option vs command-line requiring user to remember "save" command
+
+---
+
+#### Chunking Strategy
+
+**Definition:** Grouping related information into single meaningful units to overcome working memory limits.
+
+**Application Patterns:**
+- **Lists:** Break into categories (❌ 20 ungrouped nav items → ✓ 5 categories × 4 items)
+- **Forms:** Group fields (❌ 30 sequential fields → ✓ 4-step wizard with grouped fields)
+- **Phone numbers:** Use conventional chunking (555-123-4567 = 3 chunks vs 5551234567 = 10 chunks)
+- **Dashboards:** Group metrics by category (Traffic panel, Conversion panel, Error panel)
+
+---
+
+## Why Gestalt & Grouping
+
+### WHY This Matters
+
+**Core insight:** The brain automatically organizes visual elements based on proximity, similarity, continuity, and other principles - this happens preconsciously before you think about it.
+
+**Implications:**
+- Layout directly creates perceived meaning
+- Whitespace is not "empty" - it shows separation
+- Consistent styling shows relationships
+- Alignment implies connection
+
+**Mental model:** Gestalt principles are like visual grammar - rules the brain applies automatically to make sense of what it sees.
+
+**Historical note:** Gestalt psychology (1910s-1920s) discovered these principles, and they remain validated by modern neuroscience.
+
+---
+
+### WHAT to Know
+
+#### Proximity
+
+**Principle:** Items close together are perceived as belonging to the same group.
+
+**Application Rule:**
+```
+Use spatial grouping to show relationships:
+- Related form fields adjacent with minimal spacing
+- Unrelated groups separated by whitespace
+- Label next to corresponding graphic (not across page)
+```
+
+**Example:** Dashboard with 3 panels (traffic, conversions, errors) separated by whitespace → automatically perceived as 3 distinct groups
+
+**Anti-pattern:** Even spacing everywhere → no perceived structure
+
+---
+
+#### Similarity
+
+**Principle:** Elements that look similar (shape, color, size, style) are seen as related or part of a pattern.
+
+**Application Rule:**
+```
+Use consistent styling for related elements:
+- All primary CTAs same color/style
+- All error messages same red + icon treatment
+- All headings same font/size per level
+```
+
+**Example:** All "delete" actions red across interface → users learn "red = destructive action"
+
+**Anti-pattern:** Inconsistent button styles → users can't predict function from appearance
+
+---
+
+#### Continuity
+
+**Principle:** Elements arranged on a line or curve are perceived as more related than elements not aligned.
+
+**Application Rule:**
+```
+Use alignment to show structure:
+- Left-align related items (form fields, list items)
+- Grid layouts imply equal status
+- Flowing lines guide eye through narrative
+```
+
+**Example:** Infographic with visual flow from top to bottom, numbered steps along continuous path
+
+**Anti-pattern:** Haphazard placement → no clear reading order
+
+---
+
+#### Closure
+
+**Principle:** Mind perceives complete figures even when parts are missing, filling gaps mentally.
+
+**Application Rule:**
+```
+Leverage closure for simplified designs:
+- Dotted lines imply connection without solid line visual weight
+- Incomplete circles/shapes still recognized (reduce ink)
+- Implied boundaries via alignment without explicit borders
+```
+
+**Example:** Dashboard cards separated by whitespace only (no borders) → still perceived as distinct containers
+
+---
+
+#### Figure-Ground Segregation
+
+**Principle:** We instinctively separate scene into "figure" (foreground object of focus) and "ground" (background).
+
+**Application Rule:**
+```
+Ensure clear figure-ground distinction:
+- Modal dialogs: dim background, brighten foreground
+- Highlighted content: stronger contrast than surroundings
+- Active state: clearly differentiated from inactive
+```
+
+**Example:** Popup form with darkened background overlay → form is clearly the figure
+
+**Anti-pattern:** Insufficient contrast → users can't distinguish what's active
+
+---
+
+## Why Visual Encoding Hierarchy
+
+### WHY This Matters
+
+**Core insight:** Not all visual encodings are equally effective for human perception - some enable precise comparisons, others make them nearly impossible.
+
+**Cleveland & McGill's Hierarchy (most to least accurate):**
+1. Position along common scale (bar chart)
+2. Position along non-aligned scales
+3. Length
+4. Angle/slope
+5. Area
+6. Volume
+7. Color hue (categorical only)
+8. Color saturation
+
+**Implications:**
+- Chart type choice directly determines user accuracy
+- Bar charts enable 5-10x more precise comparison than pie charts
+- Color hue has no inherent ordering (don't use for quantities)
+
+**Mental model:** Human visual system is like a measurement tool - some encodings are precision instruments (position), others are crude estimates (area).
+
+---
+
+### WHAT to Know
+
+#### Task-Encoding Matching
+
+**Match encoding to user task:**
+- **Compare values:** Bar chart (position/length 5-10x more accurate than pie angle/area)
+- **See trend:** Line chart (continuous line shows temporal progression, slope changes visible)
+- **Understand distribution:** Histogram/box plot (shape visible, outliers apparent)
+- **Part-to-whole:** Stacked bar/treemap (avoid pie >5 slices - angles hard to judge)
+- **Find outliers/clusters:** Scatterplot (2D position enables pattern detection)
+
+---
+
+#### Color Encoding Rules
+
+- **Categorical:** Distinct hues (red, blue, green). Limit 5-7 categories. Hue lacks ordering.
+- **Quantitative:** Lightness gradient (light→dark). Avoid rainbow (misleading peaks). Darkness = more.
+- **Diverging:** Two-hue gradient through neutral (blue←gray→orange). Shows direction/magnitude.
+- **Accessible:** Redundant coding (color + icon + label). 8% males colorblind.
+
+---
+
+#### Perceptually Uniform Colormaps
+
+**Problem:** Rainbow spectrum has non-uniform perceptual steps - equal data differences don't produce equal perceived color differences. Can hide or exaggerate patterns.
+
+**Solution:** Use perceptually uniform colormaps:
+- **Viridis** (yellow→green→blue)
+- **Magma** (purple→red→yellow)
+- **Plasma** (purple→orange→yellow)
+
+**Why:** Equal data steps = equal perceived color steps = honest representation
+
+**Application:** Any heatmap, choropleth map, or continuous quantitative color scale
+
+---
+
+## Why Mental Models & Mapping
+
+### WHY This Matters
+
+**Core insight:** Users approach interfaces with preconceived notions (mental models) from past experiences. Designs that violate these models require re-learning and cause confusion.
+
+**Implications:**
+- Familiarity reduces cognitive load (System 1 processing)
+- Deviation from standards forces conscious thought (System 2 processing)
+- Consistent patterns become automatic
+- Natural mappings feel intuitive
+
+**Mental model:** Like driving a car - once you've learned, you don't consciously think about pedals. New car with reversed pedals would be dangerous because it violates your mental model.
+
+---
+
+### WHAT to Know
+
+#### Mental Models (User Expectations)
+
+**Definition:** Internal representations of how things work based on prior experience and analogy.
+
+**Sources:**
+- **Platform conventions:** iOS vs Android interaction patterns
+- **Cultural patterns:** Left-to-right reading in Western contexts
+- **Physical world:** Skeuomorphic metaphors (trash can for delete)
+- **Other applications:** "Most apps work this way" (Jakob's Law)
+
+**Application Rule:**
+```
+Use standard UI patterns to leverage existing mental models:
+- Hamburger menu for navigation (mobile)
+- Magnifying glass for search
+- Shopping cart for e-commerce
+- Standard keyboard shortcuts (Ctrl+C/V)
+```
+
+**When to deviate:** Only when standard pattern demonstrably fails for your use case AND you provide clear onboarding
+
+**Example:** File system trash can - users understand "throw away to delete" from physical world metaphor
+
+---
+
+#### Affordances & Signifiers
+
+**Affordance:** Properties suggesting how to interact (button affords clicking, slider affords dragging)
+
+**Signifier:** Visual cues indicating affordance (button looks raised/has shadow to signal "press me")
+
+**Application Rule:**
+```
+Design controls to signal their function:
+- Buttons: raised appearance, hover state, cursor change
+- Text inputs: rectangular field with border, cursor appears on click
+- Sliders: handle that looks draggable
+- Links: underlined or colored text, cursor changes to pointer
+```
+
+**Example:** Flat button vs raised button - raised appearance signals "I'm interactive" without user experimentation
+
+**Anti-pattern:** Everything looks flat and identical → user must experiment to discover what's clickable
+
+---
+
+#### Natural Mapping
+
+**Definition:** Relationship between controls and effects that mirrors spatial/conceptual relationships in intuitive way.
+
+**Application Patterns:**
+- **Spatial:** Stove knob layout mirrors burner layout (front-left knob → front-left burner)
+- **Directional:** Volume up = move up, zoom in = pinch outward, scroll down = swipe up (matches physical)
+- **Conceptual:** Green = go/good/success, Red = stop/bad/error (culturally learned, widely understood)
+
+**Rule:** Align control layout/direction with effect for instant comprehension
+
+---
+
+## Application: Putting Foundations Together
+
+### Dashboard Design Example
+
+**Problem:** 20 equal-weight metrics → cognitive overload
+
+**Applied Principles:**
+- **Attention:** 3-4 primary KPIs top-left (large), smaller secondary below, red for violations only
+- **Memory:** Group into 3-4 panels (Traffic, Conversions, Errors) = fits 4±1 chunks
+- **Gestalt:** Proximity (related metrics within panel), similarity (consistent colors), whitespace (panel separation)
+- **Encoding:** Bar charts (comparisons), line charts (trends), avoid pies (poor angle perception)
+- **Mental Models:** Standard chart types, conventional axes (time left-to-right), familiar icons + labels
+
+**Result:** 5-second comprehension vs 60-second confusion
+
+---
+
+### Form Wizard Example
+
+**Problem:** 30-field form → 60% abandonment
+
+**Applied Principles:**
+- **Attention:** 4 steps revealed gradually, current step prominent
+- **Memory:** 4-6 fields per step (fits 4±1 capacity), progress indicator visible (externalizes state)
+- **Gestalt:** Related fields grouped (name, address), whitespace between groups
+- **Recognition over Recall:** Show step names ("Personal Info" → "Account" → "Preferences" → "Review"), display entered info in review, enable back navigation
+- **Natural Mapping:** Linear flow left-to-right/top-to-bottom, "Next" button bottom-right consistently
+
+**Result:** 75% completion, faster task time

skills/cognitive-design/resources/data-visualization.md

@@ -0,0 +1,497 @@
+# Data Visualization
+
+This resource provides cognitive design principles specifically for charts, dashboards, and data-driven presentations.
+
+**Covered topics:**
+1. Chart selection via task-encoding alignment
+2. Dashboard hierarchy and grouping
+3. Progressive disclosure for interactive exploration
+4. Narrative data visualization
+
+---
+
+## Why Data Visualization Needs Cognitive Design
+
+### WHY This Matters
+
+**Core insight:** Data visualization is cognitive communication - the goal is insight transfer from data to human understanding. Success requires matching visual encodings to human perceptual strengths.
+
+**Common problems:**
+- Wrong chart type chosen (pie when bar would be clearer)
+- Dashboards overwhelming users with too many metrics
+- Interactive tools causing anxiety (users fear getting lost)
+- Data stories lacking clear narrative guidance
+
+**How cognitive principles help:**
+- Choose encodings that exploit perceptual accuracy (Cleveland & McGill hierarchy)
+- Design dashboards within working memory limits (chunking, hierarchy)
+- Structure exploration to reduce cognitive load (progressive disclosure, visible state)
+- Guide interpretation through annotations and narrative flow
+
+**Mental model:** Data visualization is a translation problem - translating abstract data into visual form that human perception can process efficiently.
+
+---
+
+## What You'll Learn
+
+**Four key areas:**
+
+1. **Chart Selection:** Match visualization type to user task and perceptual capabilities
+2. **Dashboard Design:** Organize multiple visualizations for at-a-glance comprehension
+3. **Interactive Exploration:** Enable data investigation without overwhelming or losing users
+4. **Narrative Visualization:** Tell data stories with clear flow and guided interpretation
+
+---
+
+## Why Chart Selection Matters
+
+### WHY This Matters
+
+**Core insight:** Not all visual encodings serve all tasks equally well - position/length enable 5-10x more accurate comparison than angle/area.
+
+**Cleveland & McGill's Perceptual Hierarchy (most to least accurate):**
+1. Position along common scale
+2. Position along non-aligned scales
+3. Length
+4. Angle/Slope
+5. Area
+6. Volume
+7. Color hue
+8. Color saturation
+
+**Implication:** Chart type choice directly determines user accuracy in extracting insights.
+
+**Mental model:** Different charts are tools for different jobs - bar chart is like precision calipers (accurate comparison), pie chart is like eyeballing (rough proportion sense).
+
+---
+
+### WHAT to Apply
+
+#### Task-to-Chart Mapping
+
+**User Task: Compare Values**
+
+**Best choice:** Bar chart (horizontal or vertical)
+- **Why:** Position/length encoding (top of hierarchy)
+- **Enables:** Precise magnitude comparison, easy ranking
+- **Example:** Comparing sales across 6 regions
+
+**Avoid:** Pie chart
+- **Why:** Angle/area encoding (lower accuracy)
+- **Problem:** Difficult to judge which slice is larger when differences are subtle
+
+**Application rule:**
+```
+For precise comparison → bar chart with common baseline
+Sort descending for easy ranking
+Add data labels for exact values (dual coding)
+```
+
+---
+
+**User Task: Show Trend Over Time**
+
+**Best choice:** Line chart
+- **Why:** Position along time axis shows progression naturally
+- **Enables:** Pattern detection (rising, falling, cyclical), slope perception
+- **Example:** Monthly revenue over 2 years
+
+**Avoid:** Bar chart for trends (acceptable but line is clearer), stacked area (hard to compare non-bottom series)
+
+**Application rule:**
+```
+Time always on x-axis (left to right)
+Use line for continuous data, bar for discrete periods
+Limit to 5-7 lines max (more becomes tangled mess)
+Annotate significant events ("Product launch Q2")
+```
+
+---
+
+**User Task: Understand Distribution**
+
+**Best choice:** Histogram or box plot
+- **Why:** Shows shape (normal, skewed, bimodal), spread, outliers
+- **Enables:** Pattern recognition (is data normally distributed?), outlier identification
+- **Example:** Distribution of customer order values
+
+**Avoid:** Pie charts (can't show distribution), bar charts of individual values (too granular)
+
+**Application rule:**
+```
+Histogram: Choose appropriate bin width (too narrow = noise, too wide = hide patterns)
+Box plot: Shows median, quartiles, outliers clearly
+Include sample size in label for context
+```
+
+---
+
+**User Task: Show Part-to-Whole Relationship**
+
+**Acceptable choice:** Pie chart (BUT only if ≤5 slices and differences clear)
+- **Why:** Circular metaphor intuitive for "whole"
+- **Limitations:** Hard to judge angles, tiny slices unreadable
+
+**Better choice:** Stacked bar chart or treemap
+- **Why:** Position/length still more accurate than angle
+- **Enables:** Easier comparison of parts
+
+**Application rule:**
+```
+If using pie: ≤5 slices, sort descending, label percentages directly
+Better: Stacked bar (compare lengths) or treemap (hierarchical parts)
+Always ask: "Do users need precise comparison?" → If yes, avoid pie
+```
+
+---
+
+**User Task: Find Outliers or Clusters**
+
+**Best choice:** Scatterplot
+- **Why:** 2D position enables pattern detection, outliers pop out preattentively
+- **Enables:** Correlation visualization, cluster identification
+- **Example:** Relationship between marketing spend and revenue by product
+
+**Application rule:**
+```
+Add trend line if correlation expected
+Use color/shape for categorical third variable (max 5-7 categories)
+Label outliers with annotations
+Consider log scale if data spans orders of magnitude
+```
+
+---
+
+**User Task: Compare Multiple Variables**
+
+**Best choice:** Small multiples (repeated chart structure)
+- **Why:** Consistent structure enables pattern comparison across conditions
+- **Enables:** Seeing how patterns change by category
+- **Example:** Monthly sales trends for each product category (separate line chart per category)
+
+**Application rule:**
+```
+Keep axes consistent across multiples for fair comparison
+Arrange in logical order (by average, alphabetically, geographically)
+Limit to 6-12 multiples (more requires pagination)
+Highlight one for focus if needed
+```
+
+---
+
+## Why Dashboard Design Matters
+
+### WHY This Matters
+
+**Core insight:** Dashboards combine many visualizations competing for limited attention - without clear hierarchy and grouping, users experience cognitive overload.
+
+**Problems dashboards solve:**
+- At-a-glance status monitoring
+- Quick decision-making
+- Pattern detection across metrics
+
+**Cognitive challenges:**
+- Information density overwhelming working memory
+- No clear entry point (where to look first?)
+- Related metrics not visually grouped
+- Excessive scrolling breaks mental model
+
+**Mental model:** Dashboard is like airplane cockpit - instruments grouped by system, critical alerts preattentively salient, most important gauges in pilot's direct view.
+
+---
+
+### WHAT to Apply
+
+#### Visual Hierarchy for Dashboards
+
+**Principle:** Establish clear focal point with size, position, and contrast
+
+**Application pattern:**
+
+**Primary KPIs (3-4 max):**
+```
+- Position: Top-left (F-pattern start)
+- Size: Large numbers (36-48px)
+- Style: Bold, high contrast
+- Purpose: "What's the current status?" answered in 5 seconds
+```
+
+**Secondary Metrics (5-10):**
+```
+- Position: Below or right of primary KPIs
+- Size: Medium (18-24px)
+- Grouping: Clustered by relationship (all conversion metrics together)
+- Purpose: Supporting detail for primary KPIs
+```
+
+**Tertiary/Details:**
+```
+- Position: Lower sections or drill-down
+- Size: Smaller (12-16px)
+- Access: Details on demand (click to expand)
+- Purpose: Deep investigation, not monitoring
+```
+
+**Example:** E-commerce dashboard - Primary KPIs top-left (revenue, conversion, users), secondary metrics mid (channels, products), tertiary bottom (details, history).
+
+---
+
+#### Gestalt Grouping for Clarity
+
+**Principle:** Use proximity, similarity, and whitespace to show relationships
+
+**Proximity:** Related metrics close, unrelated separated by whitespace
+**Similarity:** Consistent styling (same charts styled same way, color encoding consistent)
+**Example:** Traffic panel (sessions, pageviews, bounce), Conversion panel (rate, revenue, AOV) separated by whitespace, red for errors throughout
+
+---
+
+#### Chunking for Working Memory
+
+**Principle:** Limit concurrent visualizations to 4±1 major groups
+
+**Application rule:** Group >15 metrics into 3-5 categories, each with 3-5 metrics max = 9-25 metrics organized into 4±1 chunks (fits working memory).
+
+---
+
+#### Preattentive Salience for Alerts
+
+**Principle:** Use red color ONLY for threshold violations requiring immediate action
+
+**Application rule:** Normal = gray, alert = red (critical only). Avoid red for all negatives (causes alert fatigue). Example: Revenue down 2% = gray, down 15% = red threshold violation.
+
+---
+
+#### Data-Ink Ratio Maximization
+
+**Principle:** Remove decorative elements; maximize ink showing actual data
+
+**Remove:** Heavy gridlines, 3D effects, gradients, excessive decimals, decorative icons, chart borders
+**Keep:** Data (points/lines/bars), minimal axes, direct labels, meaningful annotations
+
+---
+
+## Why Progressive Disclosure Matters
+
+### WHY This Matters
+
+**Core insight:** Users fear getting lost in complex data exploration - progressive disclosure (overview first, zoom/filter, then details) provides safety net and reduces cognitive load.
+
+**Shneiderman's Mantra:** "Overview first, zoom and filter, then details on demand"
+
+**Benefits:**
+- Reduces initial cognitive load (don't show everything at once)
+- Provides context before detail (prevents disorientation)
+- Enables personalized investigation (users drill into what they care about)
+- Lowers anxiety (visible state shows "where am I", undo provides safety)
+
+**Mental model:** Like Google Maps - start with full map view (overview), zoom to neighborhood (filter), click building for details (details on demand).
+
+---
+
+### WHAT to Apply
+
+#### Overview Level
+
+**Purpose:** Provide context and entry point
+
+**Design principles:**
+```
+Show: Overall pattern, main trends, big picture
+Hide: Granular details, outliers (show in drill-down)
+Enable: Quick understanding of "what's the story here?"
+```
+
+**Example:**
+```
+Sales Dashboard Overview:
+- Total sales number (aggregated)
+- Trend line (last 90 days)
+- Top 3 performing regions (summary)
+User understands: "Sales are up 12% this quarter, West region leading"
+```
+
+---
+
+#### Filter/Zoom Level
+
+**Purpose:** Focus on subset of interest
+
+**Design principles:**
+```
+Show: Filtered results clearly
+Externalize: Active filters as visible chips/tags (recognition, not recall)
+Enable: Easy modification (click chip to remove filter)
+Provide: Clear "Reset all filters" option
+```
+
+**Example:**
+```
+User clicks "West region" from overview:
+- Dashboard updates to show only West region data
+- Visible chip at top: "Region: West" with X to remove
+- Breadcrumb: "All Regions > West"
+- "Reset" button returns to overview
+User sees: "I'm viewing West region data, can easily get back"
+```
+
+---
+
+#### Details on Demand Level
+
+**Purpose:** Reveal specifics only when needed
+
+**Design principles:**
+```
+Trigger: Hover, click, or expand action (not visible by default)
+Show: Granular data, additional metrics, raw numbers
+Position: Tooltip, modal, or expandable section (doesn't disrupt main view)
+```
+
+**Example:**
+```
+User hovers over data point on trend line:
+- Tooltip appears: "June 15, 2024: $45,234 sales, 234 orders, $193 AOV"
+- User moves mouse away: Tooltip disappears
+- Main chart unchanged (not cluttered with all this detail by default)
+```
+
+---
+
+#### State Visibility
+
+**Principle:** Always show current navigation state - don't make users remember
+
+**Critical state to externalize:**
+```
+✓ Active filters (as removable chips)
+✓ Current zoom level or time range
+✓ Drilled-down path (breadcrumbs)
+✓ Sorting/grouping applied
+✓ Comparison baseline (if comparing to previous period)
+```
+
+**Example implementation:**
+```
+Dashboard header always shows:
+- Time range: "Last 30 days" (clickable to change)
+- Filters: [Region: West] [Product: Widget] (each with X to remove)
+- Comparison: "vs. previous 30 days" (toggle on/off)
+- Breadcrumb: "Overview > West > Widget Sales"
+
+User never wonders: "What am I looking at? How did I get here?"
+```
+
+---
+
+## Why Narrative Visualization Matters
+
+### WHY This Matters
+
+**Core insight:** People naturally seek stories with cause-effect and chronology - structuring data as narrative chunks information meaningfully and aids retention.
+
+**Benefits of narrative structure:**
+- Easier to process (story arc vs heap of facts)
+- Better retention (narrative = memorable)
+- Guided interpretation (annotations prevent misunderstanding)
+- Emotional engagement (storytelling activates empathy)
+
+**Mental model:** Data journalism isn't a data dump - it's a guided tour where the designer leads readers to insights.
+
+---
+
+### WHAT to Apply
+
+#### Narrative Structure
+
+**Classic arc:** Context → Problem/Question → Data/Evidence → Resolution/Insight
+
+**Application to visualization:**
+
+**Context (What's the situation?):**
+```
+- Title that sets stage: "U.S. Solar Energy Adoption 2010-2024"
+- Subtitle: "How policy changes drove growth"
+- Brief intro text or annotation providing background
+```
+
+**Problem/Question (What are we investigating?):**
+```
+- Visual question posed: "Did tax incentives accelerate adoption?"
+- Annotation highlighting the question point on chart
+```
+
+**Data/Evidence (What does data show?):**
+```
+- Chart showing trend with clear inflection point
+- Annotation: "Tax credit introduced 2015" with arrow to spike
+- Supporting data: % increase after policy vs before
+```
+
+**Resolution/Insight (What did we learn?):**
+```
+- Conclusion annotation: "Adoption rate tripled post-incentive"
+- Implications: "States with stronger incentives saw faster growth"
+- Call-to-action or next question (optional)
+```
+
+---
+
+#### Annotation Strategy
+
+**Principle:** Guide attention to key insights; prevent misinterpretation
+
+**Types of annotations:**
+
+**Callout boxes:**
+```
+Purpose: Highlight main insight
+Position: Near relevant data point
+Style: Contrasting color or background
+Content: 1-2 sentences max ("Sales spiked 45% after campaign launch")
+```
+
+**Arrows/Lines:**
+```
+Purpose: Connect explanation to data
+Use: Point from text to specific data element
+Example: Arrow from "Product launch" text to spike in line chart
+```
+
+**Shaded regions:**
+```
+Purpose: Mark time periods or ranges
+Use: Highlight recession periods, policy changes, events
+Example: Gray shaded region "COVID-19 lockdown Mar-May 2020"
+```
+
+**Direct labels:**
+```
+Purpose: Replace legend lookups
+Use: Label lines/bars directly instead of requiring legend
+Example: Line chart with "North region" text next to the line (not legend box)
+```
+
+**Application rule:**
+```
+Annotate: Main insight (what users should notice)
+Annotate: Unusual events (explain outliers/anomalies)
+Don't annotate: Obvious patterns (if trend is clear, don't state "going up")
+Test: Can user grasp message without annotations? If not, add guidance
+```
+
+---
+
+#### Scrollytelling
+
+**Definition:** Visualization that updates or highlights aspects as user scrolls
+
+**Benefits:**
+- Maintains context (chart stays visible while story progresses)
+- Reveals complexity gradually (progressive disclosure in narrative form)
+- Engaging (interactive storytelling)
+
+**Application pattern:**
+
+**Example progression:** Start with full context (0%) → Highlight specific periods as user scrolls (33%, 66%) → End with full picture + projection (100%). Chart stays visible, smooth transitions, user can scroll back, provide skip option.
+

skills/cognitive-design/resources/educational-design.md

@@ -0,0 +1,424 @@
+# Educational Design
+
+This resource provides cognitive design principles for instructional materials, e-learning courses, and educational software.
+
+**Covered topics:**
+1. Multimedia learning principles (Mayer's principles)
+2. Dual coding theory
+3. Worked examples for skill acquisition
+4. Retrieval practice for retention
+5. Segmenting and coherence
+
+---
+
+## Why Educational Design Needs Cognitive Principles
+
+### WHY This Matters
+
+**Core insight:** Human learning is constrained by working memory limits and processing channels - instructional design must align with these cognitive realities.
+
+**Common problems:**
+- Dense slides with text paragraphs + complex diagrams (split attention)
+- Passive reading/watching (weak memory traces)
+- Decorative graphics competing with instructional content
+- Information overload (exceeds working memory)
+- No active recall opportunities (retrieval practice missing)
+
+**How cognitive principles help:**
+- **Dual coding:** Combine relevant visuals + words (two memory traces)
+- **Modalities principle:** Audio narration + visuals (splits load across channels)
+- **Coherence:** Remove extraneous content (frees working memory)
+- **Segmenting:** Break into chunks (fits working memory)
+- **Retrieval practice:** Active recall strengthens retention
+
+**Research foundation:** Richard Mayer's multimedia learning principles, John Sweller's cognitive load theory, Paivio's dual coding theory
+
+---
+
+## What You'll Learn
+
+**Five key areas:**
+
+1. **Multimedia Principles:** How to combine words, pictures, and audio effectively
+2. **Dual Coding:** Leveraging visual and verbal processing channels
+3. **Worked Examples:** Teaching complex procedures efficiently
+4. **Retrieval Practice:** Active recall for long-term retention
+5. **Segmenting & Coherence:** Chunking content and removing noise
+
+---
+
+## Why Multimedia Principles Matter
+
+### WHY This Matters
+
+**Core insight:** People have separate processing channels for visual and verbal information (Baddeley's working memory model) - proper multimedia design leverages both without overloading either.
+
+**Baddeley's Model:**
+- **Phonological loop:** Processes spoken/written words
+- **Visuospatial sketchpad:** Processes images/spatial information
+- **Central executive:** Coordinates both channels
+
+**Implication:** You can split cognitive load across channels, but wrong combinations cause interference.
+
+---
+
+### WHAT to Apply
+
+#### Multimedia Principle
+
+**Principle:** People learn better from words + pictures than words alone
+
+**Evidence:** Dual coding creates two memory traces instead of one (Paivio 1971, Mayer 2001)
+
+**Application:**
+```
+❌ Text-only explanation of process
+✓ Diagram showing process + text labels
+✓ Video demonstrating concept + verbal explanation
+
+Example: Teaching how heart pumps blood
+❌ Text description only
+✓ Animated diagram of heart + narration
+Result: 50-100% better retention with multimedia
+```
+
+**Caution:** Pictures must be RELEVANT to content
+```
+❌ Decorative stock photo of "learning" (generic student at desk)
+✓ Annotated diagram directly supporting concept
+```
+
+---
+
+#### Modality Principle
+
+**Principle:** Audio narration + visuals better than on-screen text + visuals
+
+**Why:** On-screen text + complex visual both compete for visual channel (overload)
+
+**Application:**
+```
+For animations or complex diagrams:
+❌ Dense on-screen text + diagram (visual channel overloaded)
+✓ Audio narration + diagram (splits load across channels)
+
+Example: Explaining software interface
+❌ Screenshot with text callouts explaining every feature
+✓ Screenshot + voiceover explaining each feature
+Result: Reduces cognitive load, improves comprehension
+```
+
+**Exception:** For static text-heavy content (articles, code), on-screen text is fine
+- Reader controls pace
+- Can re-read as needed
+- Narration unnecessary
+
+---
+
+#### Spatial Contiguity Principle
+
+**Principle:** Place text near corresponding graphics, not separated
+
+**Why:** Prevents holding one in memory while searching for the other (split attention)
+
+**Application:**
+```
+Diagram with labels:
+❌ Diagram on left, labels in legend/list on right (requires visual search + memory)
+✓ Labels directly ON or immediately adjacent to diagram parts
+
+Example: Anatomy diagram
+❌ Numbered diagram + separate key (1. Heart, 2. Lungs...)
+✓ Direct labels on organs + leader lines
+Result: Instant association, no memory burden
+```
+
+---
+
+#### Temporal Contiguity Principle
+
+**Principle:** Present corresponding narration and animation simultaneously, not sequentially
+
+**Why:** Holding one in memory while waiting for the other adds cognitive load
+
+**Application:**
+```
+Video lesson:
+❌ Show full animation, then explain what happened (requires remembering animation)
+✓ Narrate while animation plays (synchronized)
+
+Example: Chemistry reaction
+❌ Play full reaction animation → then explain
+✓ Narrate each step as it's happening
+Result: Immediate connection between visual and explanation
+```
+
+---
+
+#### Coherence Principle
+
+**Principle:** Exclude extraneous material - every element should support learning goal
+
+**What to remove:**
+```
+❌ Decorative graphics unrelated to content
+❌ Background music during instruction
+❌ Tangential interesting stories (if they don't support main point)
+❌ Excessive detail beyond learning objective
+
+✓ Keep: Relevant diagrams, supporting examples, meaningful practice
+```
+
+**Application:**
+```
+Slide design:
+Before (violates coherence):
+- Stock photo of "teamwork" (decorative)
+- Background music playing
+- Tangent about company history
+- Dense paragraph with extra details
+→ Cognitive overload from extraneous content
+
+After (coherent):
+- Diagram directly illustrating concept
+- No background music
+- Focus only on learning objective
+- Concise explanation
+→ All working memory devoted to learning
+```
+
+**Evidence:** Extraneous content can reduce learning by 30-50% (Mayer)
+
+---
+
+#### Signaling Principle
+
+**Principle:** Highlight essential material to guide attention
+
+**Application:**
+```
+✓ Bold key terms first time introduced
+✓ Headings/subheadings show structure
+✓ Arrows/circles on diagrams highlighting key elements
+✓ Verbal cues: "The most important point is..."
+✓ Color highlighting for critical information (use sparingly)
+
+Example: Complex diagram
+Without signaling: User must determine what's important
+With signaling: Arrows point to key mechanism, key part highlighted
+Result: Attention directed to essentials
+```
+
+---
+
+#### Segmenting Principle
+
+**Principle:** Break lessons into user-paced segments rather than continuous presentation
+
+**Why:** Fits working memory limits, allows consolidation before next chunk
+
+**Application:**
+```
+❌ 30-minute continuous lecture video (cognitive overload)
+✓ 6 segments × 5 minutes each, user clicks "Next" to continue
+
+Benefits:
+- Fits attention span
+- User controls pace (can pause/replay)
+- Breaks between segments allow consolidation
+- Can skip ahead if already know topic
+```
+
+**Optimal segment length:** 3-7 minutes per concept
+
+---
+
+## Why Dual Coding Matters
+
+### WHY This Matters
+
+**Dual Coding Theory (Paivio):** Humans process visual and verbal information through separate channels that can reinforce each other.
+
+**Benefits:**
+- Two memory traces instead of one (redundancy aids recall)
+- Visual channel good for spatial/concrete concepts
+- Verbal channel good for abstract/sequential concepts
+- Combined = stronger encoding
+
+---
+
+### WHAT to Apply
+
+**Application patterns:**
+
+**Text + Diagram:**
+```
+Example: Explaining data structure
+✓ Code snippet (verbal) + visual diagram of structure
+Result: Can recall via either channel
+```
+
+**Narration + Illustration:**
+```
+Example: Historical event
+✓ Illustrated timeline + audio story
+Result: Visual spatial memory + verbal narrative memory
+```
+
+**Caution - Avoid Redundant Text:**
+```
+❌ On-screen text identical to audio narration (doesn't add channel, just duplicates)
+✓ On-screen keywords/outline + audio detailed explanation
+```
+
+---
+
+## Why Worked Examples Matter
+
+### WHY This Matters
+
+**Core insight:** For novices learning procedures, worked examples reduce extraneous cognitive load and allow focus on solution patterns.
+
+**Problem-solving (novice):**
+- High cognitive load (exploring solution space)
+- Many wrong paths taken
+- Limited capacity for noticing patterns
+
+**Worked example (novice):**
+- Low extraneous load (no exploring)
+- All capacity devoted to understanding steps
+- Can study solution pattern
+
+**Application:** Transition from worked examples → partially completed examples → full problems
+
+---
+
+### WHAT to Apply
+
+**Worked Example Structure:**
+
+```
+Step 1: Problem statement
+Step 2: Solution shown with explanation of each step
+Step 3: Principle highlighted: "Notice how we..."
+
+Example: Math problem
+Instead of: "Solve this equation: 3x + 7 = 19"
+Better:
+  Problem: 3x + 7 = 19
+  Solution:
+    3x + 7 = 19
+    3x = 12       (subtract 7 from both sides - inverse operation)
+    x = 4         (divide both sides by 3 - inverse operation)
+  Principle: Use inverse operations to isolate variable
+```
+
+**Fading:**
+```
+Start: Full worked example
+Next: Partially worked (complete last step)
+Then: Start provided, learner completes middle + end
+Finally: Full problem-solving
+```
+
+---
+
+## Why Retrieval Practice Matters
+
+### WHY This Matters
+
+**Testing effect:** Practicing retrieval (active recall) creates stronger memory traces than passive re-reading.
+
+**Evidence:** Retrieval practice improves long-term retention by 30-50% vs passive study (Roediger & Karpicke)
+
+**Why it works:**
+- Active recall strengthens memory pathways
+- Identifies gaps in knowledge (metacognitive benefit)
+- Desirable difficulty (requires effort = better encoding)
+
+---
+
+### WHAT to Apply
+
+**Application patterns:**
+
+**Embedded quizzes:**
+```
+After each segment: 2-3 questions testing key concepts
+✓ Multiple choice (forces retrieval)
+✓ Short answer (even better - must generate answer)
+✓ Immediate explanatory feedback (not just "correct/incorrect")
+
+Example:
+After video on Gestalt principles:
+Q: "Which principle explains why we see related items as grouped when they're placed close together?"
+A: Proximity principle
+Feedback: "Correct! Proximity is the tendency to group nearby elements. This is why we use whitespace to separate unrelated content."
+```
+
+**Spaced repetition:**
+```
+Immediate: Quiz at end of lesson
+1 day later: Review quiz
+1 week later: Cumulative quiz
+1 month later: Final assessment
+
+Spacing effect: Distributed practice beats massed practice
+```
+
+**Low-stakes practice:**
+```
+✓ Formative quizzes don't count toward grade (reduces anxiety)
+✓ Unlimited attempts (learning goal, not evaluation)
+✓ Explanatory feedback (teaching moment)
+```
+
+---
+
+## Why Segmenting & Coherence Matter
+
+### WHY This Matters
+
+**Segmenting:** Prevents cognitive overload by chunking within working memory limits
+
+**Coherence:** Eliminates extraneous load so all capacity devoted to learning
+
+**Together:** Essential for managing cognitive load in complex material
+
+---
+
+### WHAT to Apply
+
+**Segmenting strategies:**
+
+```
+30-minute topic divided into:
+- Segment 1 (5 min): Concept introduction + first example
+- Pause (user clicks next)
+- Segment 2 (5 min): Second example + principle
+- Pause
+- Segment 3 (5 min): Practice problem
+- Pause
+- Segment 4 (5 min): Application to real scenario
+- Pause
+- Segment 5 (5 min): Summary + quiz
+
+Benefits: Working memory not overloaded, consolidation between segments
+```
+
+**Coherence strategies:**
+
+```
+Remove:
+❌ Decorative stock photos
+❌ Background music
+❌ Tangential fun facts (if they don't support learning objective)
+❌ Overly detailed explanations beyond scope
+
+Keep:
+✓ Relevant diagrams supporting concept
+✓ Concrete examples illustrating principle
+✓ Practice problems applying knowledge
+✓ Summaries reinforcing key points
+```
+

skills/cognitive-design/resources/evaluation-rubric.json

@@ -0,0 +1,83 @@
+{
+  "criteria": [
+    {
+      "name": "Completeness",
+      "description": "Are all required components present and comprehensive?",
+      "scores": {
+        "1": "Major components missing - skill has significant gaps in coverage",
+        "2": "Several important components missing or incomplete - limited utility",
+        "3": "Core components present but some supporting elements missing - adequate coverage",
+        "4": "Nearly complete with only minor gaps - good comprehensive coverage",
+        "5": "Exceptionally complete - all core and supporting components present with depth"
+      }
+    },
+    {
+      "name": "Clarity",
+      "description": "Are instructions clear, unambiguous, and easy to understand?",
+      "scores": {
+        "1": "Instructions confusing or ambiguous - difficult to follow",
+        "2": "Some clarity but significant ambiguity remains - requires interpretation",
+        "3": "Generally clear with occasional ambiguity - mostly understandable",
+        "4": "Clear and well-explained with minimal ambiguity - easy to follow",
+        "5": "Crystal clear with excellent explanations and examples - no ambiguity"
+      }
+    },
+    {
+      "name": "Actionability",
+      "description": "Can the skill be followed step-by-step and applied in practice?",
+      "scores": {
+        "1": "Theoretical only - no actionable steps or practical guidance",
+        "2": "Limited actionability - some steps but difficult to apply",
+        "3": "Adequately actionable - can be followed with some effort",
+        "4": "Highly actionable - clear steps and practical application guidance",
+        "5": "Exceptionally actionable - detailed steps, examples, and immediate applicability"
+      }
+    },
+    {
+      "name": "Structure",
+      "description": "Is the skill logically organized with clear navigation?",
+      "scores": {
+        "1": "Poorly organized - difficult to navigate, no clear structure",
+        "2": "Weak organization - some structure but hard to find information",
+        "3": "Adequately organized - logical structure, acceptable navigation",
+        "4": "Well organized - clear structure and easy navigation",
+        "5": "Exceptionally organized - intuitive structure, excellent navigation, linked resources"
+      }
+    },
+    {
+      "name": "Examples",
+      "description": "Are sufficient concrete examples provided to illustrate concepts?",
+      "scores": {
+        "1": "No examples provided - purely theoretical",
+        "2": "Minimal examples - insufficient to illustrate concepts clearly",
+        "3": "Adequate examples - covers main concepts with at least one example each",
+        "4": "Good examples - multiple concrete illustrations across most concepts",
+        "5": "Excellent examples - comprehensive concrete illustrations for all major concepts"
+      }
+    },
+    {
+      "name": "Triggers",
+      "description": "Is 'when to use' clearly defined with specific trigger conditions?",
+      "scores": {
+        "1": "No trigger conditions specified - unclear when to use",
+        "2": "Vague triggers - difficult to know when skill applies",
+        "3": "Adequate triggers - general guidance on when to use",
+        "4": "Clear triggers - specific conditions and scenarios well-defined",
+        "5": "Excellent triggers - comprehensive when/when-not guidance with concrete scenarios"
+      }
+    },
+    {
+      "name": "Cognitive Foundation",
+      "description": "Are cognitive psychology principles well-explained and properly applied?",
+      "scores": {
+        "1": "No cognitive foundation - purely prescriptive rules without explanation",
+        "2": "Weak cognitive foundation - limited explanation of underlying principles",
+        "3": "Adequate cognitive foundation - basic principles explained",
+        "4": "Strong cognitive foundation - principles well-explained with research backing",
+        "5": "Exceptional cognitive foundation - deep principles, research citations, WHY clearly explained"
+      }
+    }
+  ],
+  "threshold": 3.5,
+  "passing_note": "Average score must be ≥ 3.5 for skill to be considered production-ready. Scores below 3 in any individual criterion require revision before deployment."
+}

skills/cognitive-design/resources/evaluation-tools.md

@@ -0,0 +1,411 @@
+# Evaluation Tools
+
+This resource provides systematic checklists and frameworks for evaluating designs against cognitive principles.
+
+**Tools covered:**
+1. Cognitive Design Checklist (general interface/visualization evaluation)
+2. Visualization Audit Framework (4-criteria data visualization quality assessment)
+
+---
+
+## Why Systematic Evaluation
+
+### WHY This Matters
+
+**Core insight:** Cognitive design has multiple dimensions - visibility, hierarchy, chunking, consistency, feedback, memory support, integrity. Ad-hoc review often misses issues in one or more dimensions.
+
+**Benefits of systematic evaluation:**
+- **Comprehensive coverage:** Ensures all cognitive principles checked
+- **Objective assessment:** Reduces subjective bias
+- **Catches issues early:** Before launch or during design critiques
+- **Team alignment:** Shared criteria for quality
+- **Measurable improvement:** Track fixes over time
+
+**Mental model:** Like a pre-flight checklist for pilots - systematically verify all critical systems before takeoff.
+
+Without systematic evaluation: missed cognitive issues, inconsistent quality, user confusion that could have been prevented.
+
+**Use when:**
+- Conducting design reviews/critiques
+- Evaluating existing designs for improvement
+- Quality assurance before launch
+- Diagnosing why design feels "off"
+- Teaching/mentoring cognitive design
+
+---
+
+## What You'll Learn
+
+**Two complementary tools:**
+
+**Cognitive Design Checklist:** General-purpose evaluation for any interface, visualization, or content
+- Quick questions across 6 dimensions
+- Suitable for any design context
+- 10-15 minutes for thorough review
+
+**Visualization Audit Framework:** Specialized 4-criteria assessment for data visualizations
+- Clarity, Efficiency, Integrity, Aesthetics
+- Systematic quality scoring
+- 15-30 minutes depending on complexity
+
+---
+
+## Why Cognitive Design Checklist
+
+### WHY This Matters
+
+**Purpose:** Catch glaring cognitive problems before they reach users.
+
+**Coverage areas:**
+1. Visibility & Comprehension (can users see and understand?)
+2. Visual Hierarchy (what gets noticed first?)
+3. Chunking & Organization (fits working memory?)
+4. Simplicity & Clarity (extraneous elements removed?)
+5. Memory Support (state externalized?)
+6. Feedback & Interaction (immediate responses?)
+7. Consistency (patterns maintained?)
+8. Scanning Patterns (layout leverages F/Z-pattern?)
+
+**Mental model:** Like a doctor's diagnostic checklist - systematically check each vital sign.
+
+---
+
+### WHAT to Check
+
+#### 1. Visibility & Immediate Comprehension
+
+**Goal:** Core message/purpose graspable in ≤5 seconds
+
+**Checklist:**
+- [ ] Can users identify the purpose/main message within 5 seconds? (5-second test)
+- [ ] Is important information visible without scrolling (above fold)?
+- [ ] Is text/content legible? (sufficient size, contrast, line length)
+- [ ] Are interactive elements distinguishable from static content?
+
+**Test:** 5-second test (show design, ask what they remember). **Pass:** Identify purpose. **Fail:** Remember decoration or miss point.
+**Common failures:** Cluttered layout, poor contrast, content buried below fold.
+**Fix priorities:** CRITICAL (contrast), HIGH (5-second clarity), MEDIUM (hierarchy)
+
+---
+
+#### 2. Visual Hierarchy
+
+**Goal:** Users can distinguish primary vs secondary vs tertiary content
+
+**Checklist:**
+- [ ] Is visual hierarchy clear? (size, contrast, position differentiate importance)
+- [ ] Do headings/labels form clear levels? (H1 > H2 > H3 > body)
+- [ ] Does design pass "squint test"? (important elements still visible when blurred)
+- [ ] Are calls-to-action visually prominent?
+
+**Test:** Squint test (blur design). **Pass:** Important elements visible when blurred. **Fail:** Everything same weight.
+**Common failures:** Everything same size, primary CTA not distinguished, decoration more prominent than data.
+**Fix priorities:** HIGH (primary not prominent), MEDIUM (heading hierarchy), LOW (minor adjustments)
+
+---
+
+#### 3. Chunking & Organization
+
+**Goal:** Information grouped to fit working memory capacity (4±1 chunks, max 7)
+
+**Checklist:**
+- [ ] Are long lists broken into categories? (≤7 items per unbroken list)
+- [ ] Are related items visually grouped? (proximity, backgrounds, whitespace)
+- [ ] Is navigation organized into logical categories? (≤7 top-level items)
+- [ ] Are form fields grouped by relationship? (personal info, account, preferences)
+
+**Test:** Count ungrouped items. **Pass:** ≤7 items or clear grouping. **Fail:** >7 items ungrouped.
+**Common failures:** 15+ flat navigation, 30-field ungrouped form, 20 equal-weight metrics.
+**Fix priorities:** CRITICAL (>10 ungrouped), HIGH (7-10 ungrouped), MEDIUM (clearer groups)
+
+---
+
+#### 4. Simplicity & Clarity
+
+**Goal:** Every element serves user goal; extraneous elements removed
+
+**Checklist:**
+- [ ] Can you justify every visual element? (Does it convey information or improve usability?)
+- [ ] Is data-ink ratio high? (maximize ink showing data, minimize decoration)
+- [ ] Are decorative elements eliminated? (chartjunk, unnecessary lines, ornaments)
+- [ ] Is terminology familiar or explained? (no unexplained jargon)
+
+**Test:** Point to each element, ask "What purpose?" **Pass:** Every element justified. **Fail:** Decorative/unclear elements.
+**Common failures:** Chartjunk (3D, backgrounds, excess gridlines), jargon, redundant elements.
+**Fix priorities:** HIGH (decoration competing with data), MEDIUM (unexplained terms), LOW (minor simplification)
+
+---
+
+#### 5. Memory Support
+
+**Goal:** Users don't need to remember what could be shown (recognition over recall)
+
+**Checklist:**
+- [ ] Is current system state visible? (active filters, current page, progress through flow)
+- [ ] Are navigation breadcrumbs provided? (where am I, how did I get here)
+- [ ] For multi-step processes, is progress shown? (wizard step X of Y)
+- [ ] Are options presented rather than requiring recall? (dropdowns vs typed commands)
+
+**Test:** Identify what users must remember. Ask "Could this be shown?" **Pass:** State visible. **Fail:** Relying on memory.
+**Common failures:** No active filter indication, no progress indicator, hidden state.
+**Fix priorities:** CRITICAL (lost in flow), HIGH (critical state invisible), MEDIUM (minor memory aids)
+
+---
+
+#### 6. Feedback & Interaction
+
+**Goal:** Every action gets immediate, clear feedback
+
+**Checklist:**
+- [ ] Do all interactive elements provide immediate feedback? (hover states, click feedback)
+- [ ] Are loading states shown? (spinners, progress bars for waits >1 second)
+- [ ] Do form fields validate inline? (immediate feedback, not after submit)
+- [ ] Are error messages contextual? (next to problem, not top of page)
+- [ ] Are success confirmations shown? ("Saved", checkmarks)
+
+**Test:** Click/interact. **Pass:** Feedback within 100ms. **Fail:** No feedback or delayed >1s without indicator.
+**Common failures:** No hover states, no loading indicator, errors not contextual, no success confirmation.
+**Fix priorities:** CRITICAL (no feedback for critical actions), HIGH (delayed without loading), MEDIUM (missing hover)
+
+---
+
+#### 7. Consistency
+
+**Goal:** Repeated patterns throughout (terminology, layout, interactions, visual style)
+
+**Checklist:**
+- [ ] Is terminology consistent? (same words for same concepts)
+- [ ] Are UI patterns consistent? (buttons, links, inputs styled uniformly)
+- [ ] Is color usage consistent? (red = error, green = success throughout)
+- [ ] Are interaction patterns predictable? (click/tap behavior consistent)
+
+**Test:** List similar elements, check consistency. **Pass:** Identical styling/behavior. **Fail:** Unjustified variations.
+**Common failures:** Inconsistent terminology ("Email" vs "E-mail"), visual inconsistency (button styles vary), semantic inconsistency (red means error and negative).
+**Fix priorities:** HIGH (terminology), MEDIUM (visual styling), LOW (minor patterns)
+
+---
+
+#### 8. Scanning Patterns
+
+**Goal:** Layout leverages predictable F-pattern or Z-pattern scanning
+
+**Checklist:**
+- [ ] Is primary content positioned top-left? (where scanning starts)
+- [ ] For text-heavy content, does layout follow F-pattern? (top horizontal, then down left, short mid horizontal)
+- [ ] For visual-heavy content, does layout follow Z-pattern? (top-left to top-right, diagonal to bottom-left, then bottom-right)
+- [ ] Are terminal actions positioned bottom-right? (where scanning ends)
+
+**Test:** Trace eye movement (F/Z pattern). **Pass:** Critical elements on path. **Fail:** Important content off path.
+**Common failures:** Primary CTA bottom-left (off Z-pattern), key info middle-right (off F-pattern), patterns ignored.
+**Fix priorities:** MEDIUM (CTA off path), LOW (secondary optimization)
+
+---
+
+## Why Visualization Audit Framework
+
+### WHY This Matters
+
+**Purpose:** Comprehensive quality assessment for data visualizations across four independent dimensions.
+
+**Key insight:** Visualization quality requires success on ALL four criteria - high score on one doesn't compensate for failure on another.
+
+**Four Criteria:**
+1. **Clarity:** Immediately understandable and unambiguous
+2. **Efficiency:** Minimal cognitive effort to extract information
+3. **Integrity:** Truthful and free from misleading distortions
+4. **Aesthetics:** Visually pleasing and appropriate
+
+**Mental model:** Like evaluating a car - needs to be safe (integrity), functional (efficiency), easy to use (clarity), and pleasant (aesthetics). Missing any dimension makes it poor overall.
+
+**Use when:**
+- Evaluating data visualizations (charts, dashboards, infographics)
+- Choosing between visualization alternatives
+- Quality assurance before publication
+- Diagnosing why visualization isn't working
+
+---
+
+### WHAT to Audit
+
+#### Criterion 1: Clarity
+
+**Question:** Is visualization immediately understandable and unambiguous?
+
+**Checklist:**
+- [ ] Is main message obvious or clearly annotated?
+- [ ] Are axes labeled with units?
+- [ ] Is legend clear and necessary? (or use direct labels if possible)
+- [ ] Is title descriptive? (conveys what's being shown)
+- [ ] Are annotations used to guide interpretation?
+- [ ] Is chart type appropriate for message?
+
+**5-Second Test:**
+- Show visualization for 5 seconds
+- Ask: "What's the main point?"
+  - **Pass:** Correctly identify main insight
+  - **Fail:** Confused or remember decorative elements instead
+
+**Scoring:**
+- **5 (Excellent):** Main message graspable in <5 seconds, perfectly labeled
+- **4 (Good):** Clear with minor improvements needed (e.g., better title)
+- **3 (Adequate):** Understandable but requires effort
+- **2 (Needs work):** Ambiguous or missing critical labels
+- **1 (Poor):** Incomprehensible
+
+---
+
+#### Criterion 2: Efficiency
+
+**Question:** Can users extract information with minimal cognitive effort?
+
+**Checklist:**
+- [ ] Are encodings appropriate for task? (position/length for comparison, not angle/area)
+- [ ] Is chart type matched to user task? (compare → bar, trend → line, distribution → histogram)
+- [ ] Is comparison easy? (common baseline, aligned scales)
+- [ ] Is cross-referencing minimized? (direct labels instead of legend lookups)
+- [ ] Are cognitive shortcuts enabled? (sorting by value, highlighting key points)
+
+**Encoding Check:**
+- Identify user task (compare, see trend, find outliers)
+- Check encoding against Cleveland & McGill hierarchy
+  - **Pass:** Position/length used for precise comparisons
+  - **Fail:** Angle/area/color used when position would work better
+
+**Scoring:**
+- **5 (Excellent):** Optimal encoding, zero wasted cognitive effort
+- **4 (Good):** Appropriate with minor inefficiencies
+- **3 (Adequate):** Works but more effort than necessary
+- **2 (Needs work):** Poor encoding choice (pie when bar would be better)
+- **1 (Poor):** Wrong chart type for task
+
+---
+
+#### Criterion 3: Integrity
+
+**Question:** Is visualization truthful and free from misleading distortions?
+
+**Checklist:**
+- [ ] Do axes start at zero (or clearly note truncation)?
+- [ ] Are scale intervals uniform?
+- [ ] Is data complete? (not cherry-picked dates hiding context)
+- [ ] Are comparisons fair? (same scale for compared items)
+- [ ] Is context provided? (baselines, historical comparison, benchmarks)
+- [ ] Are limitations noted? (sample size, data source, margin of error)
+
+**Integrity Tests:**
+1. **Axis test:** Does y-axis start at zero for bar charts? If not, is truncation clearly noted?
+   - **Pass:** Zero baseline or explicit truncation note
+   - **Fail:** Truncated axis exaggerating differences without disclosure
+
+2. **Completeness test:** Is full relevant time period shown? Or cherry-picked subset?
+   - **Pass:** Complete data with context
+   - **Fail:** Selective dates hiding broader trend
+
+3. **Fairness test:** Are compared items on same scale?
+   - **Pass:** Common scale enables fair comparison
+   - **Fail:** Dual-axis manipulation creates false correlation
+
+**Scoring:**
+- **5 (Excellent):** Completely honest, full context provided
+- **4 (Good):** Honest with minor context improvements possible
+- **3 (Adequate):** Not misleading but could provide more context
+- **2 (Needs work):** Distortions present (truncated axis, cherry-picked data)
+- **1 (Poor):** Actively misleading (severe distortions, no context)
+
+**CRITICAL:** Scores below 3 on integrity are unacceptable - fix immediately
+
+---
+
+#### Criterion 4: Aesthetics
+
+**Question:** Is visualization visually pleasing and appropriate for context?
+
+**Checklist:**
+- [ ] Is visual design professional and polished?
+- [ ] Is color palette appropriate? (not garish, suits content tone)
+- [ ] Is whitespace used effectively? (not cramped, not wasteful)
+- [ ] Are typography choices appropriate? (readable, professional)
+- [ ] Does style match context? (serious for finance, friendly for consumer)
+
+**Important:** Aesthetics should NEVER undermine clarity or integrity
+
+**Scoring:**
+- **5 (Excellent):** Beautiful and appropriate, enhances engagement
+- **4 (Good):** Pleasant and professional
+- **3 (Adequate):** Acceptable, not ugly but not polished
+- **2 (Needs work):** Amateurish or inappropriate style
+- **1 (Poor):** Ugly or completely inappropriate
+
+**Trade-off Note:** If forced to choose, prioritize Clarity and Integrity over Aesthetics
+
+---
+
+#### Using the 4-Criteria Framework
+
+**Process:**
+
+**Step 1: Evaluate each criterion independently**
+- Score Clarity (1-5)
+- Score Efficiency (1-5)
+- Score Integrity (1-5)
+- Score Aesthetics (1-5)
+
+**Step 2: Calculate average**
+- Average score = (Clarity + Efficiency + Integrity + Aesthetics) / 4
+- **Pass threshold:** ≥3.5 average
+- **Critical failures:** Any individual score <3 requires attention
+
+**Step 3: Identify weakest dimension**
+- Which criterion has lowest score?
+- This is your primary improvement target
+
+**Step 4: Prioritize fixes**
+1. **CRITICAL:** Integrity < 3 (fix immediately - misleading is unacceptable)
+2. **HIGH:** Clarity or Efficiency < 3 (users can't understand or use it)
+3. **MEDIUM:** Aesthetics < 3 (affects engagement)
+4. **LOW:** Scores 3-4 (optimization, not critical)
+
+**Step 5: Verify fixes don't harm other dimensions**
+- Example: Improving aesthetics shouldn't reduce clarity
+- Example: Improving efficiency shouldn't compromise integrity
+
+---
+
+## Examples of Evaluation in Practice
+
+### Example 1: Dashboard Review Using Checklist
+
+**Context:** Team dashboard with 20 metrics, users overwhelmed and missing alerts
+
+**Checklist Results:**
+- ❌ **Visibility:** Too cluttered, 20 equal-weight metrics
+- ❌ **Hierarchy:** Everything same size, alerts not prominent
+- ❌ **Chunking:** 15 ungrouped metrics (exceeds working memory)
+- ❌ **Simplicity:** Chartjunk (gridlines, 3D, gradients)
+- ❌ **Memory:** No active filter indication
+- ✓ **Feedback:** Hover states, loading indicators present
+- ⚠️ **Consistency:** Mostly consistent, minor button variations
+- ❌ **Scanning:** Key KPI bottom-right (off F-pattern)
+
+**Fixes:** (1) Reduce to 3-4 primary KPIs top-left, group others. (2) Remove chartjunk, establish hierarchy. (3) Show active filters as chips. (4) Standardize buttons.
+
+**Outcome:** Users grasp status in 5 seconds, find alerts immediately
+
+---
+
+### Example 2: Bar Chart Audit Using 4 Criteria
+
+**Context:** Q4 sales bar chart for presentation
+
+**Audit Scores:**
+- **Clarity (4/5):** Clear title/labels, direct bar labels. Minor: Could annotate top performer.
+- **Efficiency (5/5):** Optimal position/length encoding, sorted descending, common baseline.
+- **Integrity (2/5 - CRITICAL):** ❌ Y-axis starts at 80 (exaggerates differences), ❌ No historical context.
+- **Aesthetics (4/5):** Clean, professional. Minor: Could use brand colors.
+
+**Average:** 3.75/5 (barely passes). **Critical issue:** Integrity <3 unacceptable.
+
+**Fixes:** (1) Start y-axis at zero or add break symbol + "Axis truncated" note. (2) Add Q3 baseline for context. (3) Annotate: "West region led Q4 with 23% increase."
+
+**After fixes:** Clarity 5/5, Efficiency 5/5, Integrity 5/5, Aesthetics 4/5 = **4.75/5 Excellent**
+

skills/cognitive-design/resources/frameworks.md

@@ -0,0 +1,479 @@
+# Design Frameworks
+
+This resource provides three systematic frameworks for structuring cognitive design thinking and decision-making.
+
+**Frameworks covered:**
+1. Cognitive Design Pyramid (hierarchical quality assessment)
+2. Design Feedback Loop (interaction cycles)
+3. Three-Layer Visualization Model (data communication fidelity)
+
+---
+
+## Why Use Frameworks
+
+### WHY This Matters
+
+Frameworks provide:
+- **Systematic structure** for design thinking (not ad-hoc)
+- **Complete coverage** across multiple dimensions
+- **Prioritization guidance** (what to fix first)
+- **Shared vocabulary** for team communication
+- **Repeatable process** applicable across projects
+
+**Mental model:** Like architectural blueprints - frameworks give structure to design decisions so nothing critical is forgotten.
+
+Without frameworks: inconsistent application of principles, missed dimensions, unclear priorities, reinventing approach each time.
+
+---
+
+##What You'll Learn
+
+Three complementary frameworks, each suited for different contexts:
+
+**Cognitive Design Pyramid:** When you need comprehensive multi-dimensional quality assessment
+
+**Design Feedback Loop:** When you're designing interactive interfaces and need to support user perception-action cycles
+
+**Three-Layer Visualization Model:** When you're creating data visualizations and need to ensure fidelity from data through interpretation
+
+---
+
+## Why Cognitive Design Pyramid
+
+### WHY This Matters
+
+**Core insight:** Design effectiveness depends on satisfying multiple needs in hierarchical sequence - perceptual clarity is foundation, enabling cognitive coherence, which enables emotional engagement, which enables behavioral outcomes.
+
+**Key principle:** Lower levels are prerequisites for higher levels:
+- If users can't perceive elements clearly → coherence impossible
+- If design isn't coherent → engagement suffers
+- If not engaging → behavior change fails
+
+**Mental model:** Like Maslow's hierarchy of needs - must satisfy foundational needs before higher-level needs matter.
+
+**Use when:**
+- Comprehensive design quality check needed
+- Diagnosing what level is failing
+- Prioritizing improvements (fix foundation first)
+- Evaluating entire user experience holistically
+
+---
+
+### WHAT to Apply
+
+#### The Pyramid (4 Tiers)
+
+```
+        ┌─────────────────────────┐
+        │ BEHAVIORAL ALIGNMENT    │ ← Peak: Guides actual user behavior
+        ├─────────────────────────┤
+        │ EMOTIONAL ENGAGEMENT    │ ← Higher: Motivates and doesn't frustrate
+        ├─────────────────────────┤
+        │ COGNITIVE COHERENCE     │ ← Middle: Makes logical sense
+        ├─────────────────────────┤
+        │ PERCEPTUAL EFFICIENCY   │ ← Base: Seen and registered correctly
+        └─────────────────────────┘
+```
+
+---
+
+#### Tier 1: Perceptual Efficiency (Foundation)
+
+**Goal:** Users can see and register all necessary elements clearly.
+
+**Checkpoints:**
+- [ ] Sufficient contrast for all text and key elements (WCAG AA minimum: 4.5:1 for body text, 3:1 for large text)
+- [ ] Visual hierarchy obvious (squint test - primary elements still visible when blurred)
+- [ ] No overwhelming clutter or visual noise (data-ink ratio high)
+- [ ] Typography legible (appropriate size, line height, line length)
+- [ ] Color distinguishable (not relying solely on hue for colorblind users)
+- [ ] Grouping perceivable (Gestalt principles applied)
+
+**Common failures:**
+- Low contrast text (gray on light gray)
+- Everything same visual weight (no hierarchy)
+- Chartjunk obscuring data
+- Text too small or lines too long
+
+**Fix priority:** HIGHEST - without perception, nothing else works
+
+**Example:** ❌ All metrics gray 12px → ✓ Primary KPIs 36px bold, secondary 18px gray
+
+---
+
+#### Tier 2: Cognitive Coherence (Comprehension)
+
+**Goal:** Information is organized to align with how users think and expect.
+
+**Checkpoints:**
+- [ ] Layout matches mental models and familiar patterns (standard UI conventions)
+- [ ] Terminology consistent throughout (same words for same concepts)
+- [ ] Navigation/flow logical and predictable (no mystery meat navigation)
+- [ ] Memory aids present (breadcrumbs, state indicators, progress bars)
+- [ ] Chunking within working memory capacity (≤7 items per group, ideally 4±1)
+- [ ] Recognition over recall (show options, don't require memorization)
+
+**Common failures:**
+- Inconsistent terminology confusing users
+- Non-standard UI patterns requiring re-learning
+- Hidden navigation or state
+- Unchunked long lists overwhelming memory
+
+**Fix priority:** HIGH - enables users to understand and navigate
+
+**Example:** ❌ 30 ungrouped fields, inconsistent labels → ✓ 4-step wizard, grouped fields, consistent terms, progress visible
+
+---
+
+#### Tier 3: Emotional Engagement (Motivation)
+
+**Goal:** Design feels pleasant and motivating, not frustrating or anxiety-inducing.
+
+**Checkpoints:**
+- [ ] Aesthetic quality appropriate for context (professional/friendly/serious)
+- [ ] Design feels pleasant to use (not frustrating)
+- [ ] Anxiety reduced (progress shown, undo available, clear next steps)
+- [ ] Tone matches user emotional state (encouraging for learning, calm for high-stress tasks)
+- [ ] Accomplishment visible (checkmarks, confirmations, completed states)
+
+**Common failures:**
+- Ugly or amateurish appearance reducing trust
+- Frustrating interactions causing stress
+- No reassurance in multi-step processes
+- Inappropriate tone (playful for serious tasks)
+
+**Fix priority:** MEDIUM - affects engagement and trust, but only after foundation solid
+
+**Why it matters:** Emotional state influences cognitive performance - pleasant affect improves problem-solving, stress narrows attention
+
+**Example:** ❌ Dense text, no progress, no encouragement → ✓ Friendly tone, progress bar, checkmarks, "You're almost done!"
+
+---
+
+#### Tier 4: Behavioral Alignment (Action)
+
+**Goal:** Design guides users toward desired behaviors and outcomes.
+
+**Checkpoints:**
+- [ ] Calls-to-action clear and prominent (primary action obvious)
+- [ ] Visual emphasis on actionable items (buttons stand out)
+- [ ] Key takeaways highlighted (not buried in text)
+- [ ] Ethical nudges toward good decisions (defaults favor user)
+- [ ] Success paths more accessible than failure paths
+
+**Common failures:**
+- Primary CTA not visually prominent
+- Actionable insights buried in data
+- Destructive actions too easy (no confirmation)
+- Defaults favor business over user
+
+**Fix priority:** MEDIUM-LOW - optimize after foundation, coherence, engagement work
+
+**Example:** ❌ Insights in footnotes, equal button sizes → ✓ Key insight top (large), "Take Action" prominent green, export secondary gray
+
+---
+
+#### Applying the Pyramid
+
+**Process:**
+1. **Assess bottom-up:** Evaluate T1 (see clearly?) → T2 (makes sense?) → T3 (pleasant?) → T4 (guides action?)
+2. **Identify weakest tier:** Where are most failures? Which blocks success?
+3. **Prioritize foundation-up:** Fix T1 first (enables everything), then T2, then T3/T4
+4. **Re-evaluate:** Check fixes don't break higher tiers, iterate until all pass
+
+---
+
+## Why Design Feedback Loop
+
+### WHY This Matters
+
+**Core insight:** Users don't passively consume interfaces - they actively engage in continuous perception-action-learning cycles.
+
+**Loop stages:** Perceive → Interpret → Decide → Act → Learn → (loop repeats)
+
+**Key principle:** Design must support every stage; break anywhere causes confusion or failure.
+
+**Mental model:** Like a conversation - user asks (via perception), interface answers (via display), user responds (via action), interface confirms (via feedback), understanding updates (learning).
+
+**Use when:**
+- Designing interactive interfaces (apps, dashboards, tools)
+- Ensuring each screen answers user's questions
+- Providing appropriate feedback for actions
+- Diagnosing where interaction breaks down
+
+---
+
+### WHAT to Apply
+
+#### The Loop (5 Stages)
+
+```
+┌──────────┐
+│ PERCEIVE │ → "What am I seeing?"
+└────┬─────┘
+     ↓
+┌──────────┐
+│INTERPRET │ → "What does this mean?"
+└────┬─────┘
+     ↓
+┌──────────┐
+│  DECIDE  │ → "What can I do next?"
+└────┬─────┘
+     ↓
+┌──────────┐
+│   ACT    │ → "How do I do it?"
+└────┬─────┘
+     ↓
+┌──────────┐
+│  LEARN   │ → "What happened? Was it successful?"
+└────┬─────┘
+     ↓
+ (repeat)
+```
+
+---
+
+#### Stage 1: Perceive
+
+**User question:** "What am I seeing?"
+
+**Design must provide:**
+- [ ] Visibility of system status (current page, active state, what's happening)
+- [ ] Clear visual hierarchy (where to look first)
+- [ ] Salient critical elements (preattentive cues for important items)
+
+**Common failures:**
+- Hidden state (user doesn't know where they are)
+- No visual hierarchy (don't know what's important)
+- Loading without indicator (appears broken)
+
+**Example:** ❌ No active filter indication → ✓ Active filters shown as visible chips at top
+
+---
+
+#### Stage 2: Interpret
+
+**User question:** "What does this mean?"
+
+**Design must provide:**
+- [ ] Clear labels and context (explain what user is seeing)
+- [ ] Familiar terminology (or definitions for specialized terms)
+- [ ] Adequate context (why am I here, what are these options)
+- [ ] Visual encoding that matches meaning (charts appropriate for data type)
+
+**Common failures:**
+- Jargon or abbreviations without explanation
+- Missing context (chart without title/axes labels)
+- Unclear purpose of page/screen
+
+**Example:** ❌ No title, axes "X"/"Y", no units → ✓ "Q4 Sales by Region (thousands USD)", labeled axes, annotated events
+
+---
+
+#### Stage 3: Decide
+
+**User question:** "What can I do next?"
+
+**Design must provide:**
+- [ ] Available actions obvious (clear CTAs)
+- [ ] Choices not overwhelming (Hick's Law - limit options)
+- [ ] Recommended/default option suggested when appropriate
+- [ ] Consequences of choices clear (especially for destructive actions)
+
+**Common failures:**
+- Too many options causing paralysis
+- No guidance on what to do next
+- Unclear consequences ("Are you sure?" without explaining what happens)
+
+**Example:** ❌ 10 unclear buttons → ✓ Primary "Continue" prominent, secondary "Save Draft" gray, "Cancel" text link
+
+---
+
+#### Stage 4: Act
+
+**User question:** "How do I do it?"
+
+**Design must provide:**
+- [ ] Affordances clear (buttons look pressable, sliders look draggable)
+- [ ] Controls accessible (appropriate size/position per Fitts's Law)
+- [ ] Keyboard shortcuts available for power users
+- [ ] Constraints prevent invalid actions (disabled states, input masking)
+
+**Common failures:**
+- Unclear what's clickable (flat design with no affordances)
+- Tiny touch targets on mobile
+- No keyboard access
+- Allowing invalid inputs
+
+**Example:** ❌ Flat text, no interactive cue → ✓ Raised appearance, hover state, cursor→pointer, focus ring
+
+---
+
+#### Stage 5: Learn
+
+**User question:** "What happened? Was it successful?"
+
+**Design must provide:**
+- [ ] Immediate feedback for every action (< 100ms for responsiveness perception)
+- [ ] Confirmations for successful actions (checkmarks, "Saved" message, state change)
+- [ ] Clear error messages in context (next to problem, plain language)
+- [ ] Updated system state visible (if filter applied, data updates)
+
+**Common failures:**
+- No feedback (user clicks button, nothing visible happens)
+- Delayed feedback (loading without indication)
+- Generic errors ("Error occurred" without explanation)
+- Feedback hidden or dismissible before user sees it
+
+**Example:** ❌ Click → nothing visible → page maybe changes → ✓ Click → spinner → success message → confirmed transition
+
+---
+
+#### Applying the Feedback Loop
+
+**For each screen/interaction, ask:**
+
+1. **Perceive:** Can user see current state and what's important?
+2. **Interpret:** Will user understand what they're seeing?
+3. **Decide:** Are next actions clear and not overwhelming?
+4. **Act:** Are controls obvious and accessible?
+5. **Learn:** Will user get immediate, clear feedback?
+
+**Example: Login form**
+- **Perceive:** Fields visible, labels clear
+- **Interpret:** "Log in to your account" heading
+- **Decide:** "Log in" button obvious, "Forgot password?" link
+- **Act:** Focus states, clickable button, Enter submits
+- **Learn:** Spinner on submit, success→redirect, error→message next to field with red border
+
+---
+
+## Why Three-Layer Visualization Model
+
+### WHY This Matters
+
+**Core insight:** Effective data visualization requires success at three distinct layers - accurate data, appropriate visual encoding, and correct user interpretation. Failure at any layer breaks the entire communication chain.
+
+**Layers:** Data → Visual Encoding → Cognitive Interpretation
+
+**Key principle:** You can have perfect data with wrong chart type (encoding failure) or perfect chart with user misunderstanding (interpretation failure). All three must succeed.
+
+**Mental model:** Like a telephone game - message (data) must be transmitted (encoding) and received (interpretation) accurately or communication fails.
+
+**Use when:**
+- Creating any data visualization
+- Diagnosing why visualization isn't working
+- Choosing chart types
+- Validating user understanding
+
+---
+
+### WHAT to Apply
+
+#### Layer 1: Data
+
+**Question:** Is the underlying data accurate, complete, and relevant?
+
+**Checkpoints:**
+- [ ] Data quality verified (no errors, outliers investigated)
+- [ ] Complete dataset (not cherry-picked subset that misleads)
+- [ ] Relevant to question being answered (not tangential data)
+- [ ] Appropriate aggregation/granularity (not hiding or overwhelming with detail)
+- [ ] Time period representative (not artificially truncated to show desired trend)
+
+**Common failures:**
+- Garbage data → garbage visualization
+- Cherry-picked dates hiding broader context
+- Outliers distorting scale
+- Wrong metric for question
+
+**Fix:** Validate data quality before designing visualization
+
+**Example:** "Are sales improving?" ❌ Only last 3 months (hides 2-year decline) → ✓ 2-year trend with annotation: "Recent uptick after sustained decline"
+
+---
+
+#### Layer 2: Visual Encoding
+
+**Question:** Are visualization choices appropriate for the data type, user task, and perceptual capabilities?
+
+**Checkpoints:**
+- [ ] Chart type matches task (compare → bar, trend → line, distribution → histogram)
+- [ ] Encoding matches perceptual hierarchy (position > angle > area)
+- [ ] Axes scaled appropriately (start at zero for bars, or clearly note truncation)
+- [ ] Color usage correct (hue for categories, lightness for quantities)
+- [ ] Labels clear and sufficient (title, axes, units, legend if needed)
+
+**Common failures:**
+- Pie chart when bar chart would be clearer
+- Truncated axis exaggerating differences
+- Rainbow color scale for quantitative data
+- Missing units or context
+
+**Fix:** Match encoding to task using Cleveland & McGill hierarchy
+
+**Example:** Compare 6 regional sales. ❌ Pie chart (poor angle/area) → ✓ Bar chart (precise position/length)
+
+---
+
+#### Layer 3: Cognitive Interpretation
+
+**Question:** Will users correctly understand the message and draw valid conclusions?
+
+**Checkpoints:**
+- [ ] Main insight obvious or annotated (don't require users to discover it)
+- [ ] Context provided (baselines, comparisons, historical trends)
+- [ ] Audience knowledge level accommodated (annotations for novices)
+- [ ] Potential misinterpretations prevented (annotations clarifying what NOT to conclude)
+- [ ] Self-contained (doesn't require remembering distant information)
+
+**Common failures:**
+- Heap of data without guidance to key insight
+- Missing context (percentage without denominator, comparison without baseline)
+- Assumes expert knowledge novices lack
+- Spurious correlation without clarification
+
+**Fix:** Add titles, annotations, context; test with target users
+
+**Example:** Ice cream sales vs drowning deaths. ❌ No annotation (viewers assume causation) → ✓ "Both increase in summer (common cause), not causally related"
+
+---
+
+#### Applying the Three-Layer Model
+
+**Process:**
+1. **Validate data:** Check quality, completeness, relevance, outliers, time period, aggregation
+2. **Choose encoding:** Identify task → select chart type matching task + perceptual hierarchy → design axes, colors, labels → maximize data-ink
+3. **Support interpretation:** Add title conveying message → annotate insights → provide context → test with users → clarify misinterpretations
+4. **Iterate:** Fix weak layers, re-validate
+
+**Example: Sales dashboard**
+- **Data:** Complete 2-year sales, verified quality, identified 2 outlier months (note in viz)
+- **Encoding:** Task = trend + regional comparison. Line chart, distinct hue per region (limit 5), y-axis at zero "Sales (thousands USD)", time on x-axis
+- **Interpretation:** Title "Regional Sales Trends 2023-2024: Overall Growth with West Leading", annotate outliers ("Holiday promo Nov 2023", "Launch June 2024"), show previous year dotted baseline, tested with sales team
+- **Result:** Accurate data + appropriate encoding + correct interpretation = insight
+
+---
+
+## Choosing the Right Framework
+
+**Use Cognitive Design Pyramid when:**
+- Comprehensive multi-dimensional quality assessment needed
+- Diagnosing which aspect of design is failing
+- Prioritizing fixes (foundation → higher tiers)
+- Evaluating entire user experience
+
+**Use Design Feedback Loop when:**
+- Designing interactive interfaces
+- Ensuring each screen supports user questions
+- Providing appropriate feedback
+- Diagnosing where interaction breaks down
+
+**Use Three-Layer Model when:**
+- Creating data visualizations
+- Choosing chart types
+- Validating data quality through interpretation
+- Diagnosing visualization failures
+
+**Use multiple frameworks together for complete coverage**
+

skills/cognitive-design/resources/quick-reference.md

@@ -0,0 +1,300 @@
+# Quick Reference
+
+This resource provides rapid access to core cognitive design principles and quick validation checks.
+
+---
+
+## Why Quick Reference
+
+### WHY This Matters
+
+Quick references enable:
+- **Fast decision-making** during active design work
+- **Rapid validation** without deep dive into theory
+- **Team alignment** through shared heuristics
+- **Design advocacy** with memorable, citable principles
+
+**Mental model:** Like a cheat sheet or checklist for design decisions - quick lookups when you need them.
+
+Without quick reference: slowed workflow, inconsistent application, forgetting key principles under time pressure.
+
+---
+
+## What to Use
+
+### 20 Core Actionable Principles
+
+#### Attention & Perception
+
+1. **Selective Salience:** Use preattentive features (color, contrast, motion, size) sparingly for critical elements only; overuse overwhelms
+2. **Visual Hierarchy:** Organize by importance using size, contrast, position, spacing; guide attention along F-pattern or Z-pattern
+3. **Perceptual Grouping:** Use proximity (close = related), similarity (alike = grouped), continuity (aligned = connected), closure (mind fills gaps)
+4. **Figure-Ground Distinction:** Ensure clear separation between foreground content and background
+
+#### Memory & Cognition
+
+5. **Working Memory Respect:** Limit concurrent elements to 4±1 chunks; group related items; show context rather than requiring memorization
+6. **Recognition Over Recall:** Make options visible rather than requiring memory; show current state, breadcrumbs, available actions
+7. **Chunking Strategy:** Group related information into meaningful units (phone: 555-123-4567; navigation: categories not flat list)
+8. **Progressive Disclosure:** Reveal complexity gradually; show only what's immediately needed, provide details on demand
+
+#### Encoding & Communication
+
+9. **Encoding Hierarchy:** Use position/length for precise comparisons (bar charts), reserve angle/area/color for less critical distinctions
+10. **Data-Ink Maximization:** Remove decorative elements that don't convey information; maximize proportion showing actual data
+11. **Dual Coding:** Combine relevant visuals with text (two memory traces); use audio narration with complex visuals
+12. **Spatial Contiguity:** Place labels/annotations adjacent to content they describe; prevent split-attention
+
+#### Consistency & Standards
+
+13. **Pattern Consistency:** Use predictable, familiar patterns (standard icons, conventional layouts, platform norms)
+14. **Terminology Consistency:** Use same words for same concepts throughout
+15. **Natural Mapping:** Align controls with effects intuitively (increase volume = move up; zoom in = pinch outward)
+
+#### Feedback & Interaction
+
+16. **Immediate Feedback:** Provide visible response to every action within milliseconds (loading states, confirmations, validation)
+17. **Visible State:** Externalize system state to interface (show active filters, current page, progress); don't rely on user memory
+18. **Error Prevention First:** Constrain inputs, disable invalid actions, provide guidance before errors; when errors occur, provide contextual recovery
+
+#### Emotional & Behavioral
+
+19. **Emotional Calibration:** Pleasant aesthetics improve problem-solving; frustration narrows attention and reduces working memory
+20. **Behavioral Guidance:** Use visual emphasis, clear calls-to-action, ethical nudges to guide toward desired outcomes
+
+---
+
+### 3-Question Quick Check
+
+**Use this for rapid validation:**
+
+#### Question 1: Attention
+**"Is it obvious what to look at first?"**
+- [ ] Visual hierarchy is clear (primary vs secondary vs tertiary)
+- [ ] Most important element is preattentively salient (but not overwhelming)
+- [ ] Layout follows predictable scanning pattern (F or Z)
+
+**If NO:** Increase size/contrast of primary elements, reduce visual weight of secondary items, establish clear entry point
+
+---
+
+#### Question 2: Memory
+**"Is user required to remember anything that could be shown?"**
+- [ ] Current state is visible (filters, progress, location)
+- [ ] Options are presented, not requiring recall
+- [ ] Concurrent elements fit in 4±1 chunks
+
+**If NO:** Externalize state to interface, show don't tell, chunk information into groups
+
+---
+
+#### Question 3: Clarity
+**"Can someone unfamiliar understand this in 5 seconds?"**
+- [ ] Purpose/main message is immediately graspable
+- [ ] No unnecessary decorative elements competing for attention
+- [ ] Terminology is familiar or explained
+
+**If NO:** Simplify, add labels/titles, remove extraneous elements, use annotations to guide interpretation
+
+**If all three are YES → design is likely cognitively sound**
+
+---
+
+### Common Decision Rules
+
+#### Chart Selection
+
+**Task: Compare values**
+→ **Use:** Bar chart (position/length encoding)
+→ **Avoid:** Pie chart (angle/area less accurate)
+→ **Why:** Cleveland & McGill hierarchy - position > angle
+
+**Task: Show trend over time**
+→ **Use:** Line chart with time on x-axis
+→ **Avoid:** Stacked area (hard to compare non-bottom series)
+→ **Why:** Continuous lines show temporal progression naturally
+
+**Task: Show distribution**
+→ **Use:** Histogram or box plot
+→ **Avoid:** Multiple pie charts
+→ **Why:** Enables shape perception (normal, skewed, bimodal)
+
+**Task: Show part-to-whole**
+→ **Use:** Stacked bar chart or treemap
+→ **Avoid:** Pie chart with >5 slices
+→ **Why:** Easier to compare bar lengths than angles
+
+**Task: Find outliers**
+→ **Use:** Scatterplot
+→ **Avoid:** Table of numbers
+→ **Why:** Visual pattern makes outliers pop out preattentively
+
+---
+
+#### Color Usage
+
+**Categorical data (types, categories)**
+→ **Use:** Distinct hues (red, blue, green - perceptually different)
+→ **Avoid:** Shades of same hue
+→ **Why:** Hue lacks inherent ordering; best for nominal categories
+
+**Quantitative data (amounts, rankings)**
+→ **Use:** Lightness/saturation gradient (light to dark)
+→ **Avoid:** Rainbow spectrum or varied hues
+→ **Why:** Lightness has natural perceptual ordering (more = darker)
+
+**Alerts/errors**
+→ **Use:** Red sparingly for threshold violations only
+→ **Avoid:** Red for all negative values
+→ **Why:** Overuse causes alert fatigue; preattentive salience needs restraint
+
+**Accessible color**
+→ **Use:** Redundant coding (color + icon/shape/text)
+→ **Why:** 8% of males are colorblind; don't rely on color alone
+
+---
+
+#### Chunking Information
+
+**Long lists (>7 items)**
+→ **Action:** Group into 3-7 categories with visual separation
+→ **Why:** Working memory limit; chunking fits capacity
+
+**Multi-step processes**
+→ **Action:** Break into 3-5 steps, show progress indicator
+→ **Why:** Progressive disclosure reduces overwhelm, visible state reduces anxiety
+
+**Form fields**
+→ **Action:** 4-6 fields per screen; group related fields with proximity/backgrounds
+→ **Why:** Fits working memory; Gestalt proximity shows relationships
+
+**Navigation menus**
+→ **Action:** 5-7 top-level categories max
+→ **Why:** Decision time increases with choices (Hick's Law)
+
+---
+
+#### Error Handling
+
+**Error message location**
+→ **Action:** Next to problematic field, not top of page
+→ **Why:** Gestalt proximity; spatial contiguity reduces cognitive load
+
+**Error message language**
+→ **Action:** Plain language ("Password must be 8+ characters") not error codes
+→ **Why:** Reduces interpretation load, especially under stress
+
+**Error prevention**
+→ **Action:** Disable invalid actions, constrain inputs, validate inline
+→ **Why:** Prevention > correction; immediate feedback enables learning
+
+**Error recovery**
+→ **Action:** Show what to fix, auto-focus to field, keep prior input visible
+→ **Why:** Recognition over recall; reduce motor effort
+
+---
+
+#### Typography & Layout
+
+**Heading hierarchy**
+→ **Action:** Use size + weight to distinguish levels (H1 > H2 > H3 > body)
+→ **Why:** Visual hierarchy guides scanning, shows structure
+
+**Line length**
+→ **Action:** 50-75 characters per line for body text
+→ **Why:** Longer lines cause eye strain; shorter disrupt reading rhythm
+
+**Whitespace**
+→ **Action:** Use to separate unrelated groups, create breathing room
+→ **Why:** Gestalt principle - separated = unrelated; crowding increases cognitive load
+
+**Alignment**
+→ **Action:** Left-align text in Western contexts; align related elements
+→ **Why:** Gestalt continuity; consistent starting point aids scanning
+
+---
+
+### Design Heuristics at a Glance
+
+#### Tufte's Principles
+- **Maximize data-ink ratio:** Remove chart junk, keep only ink showing data
+- **Graphical integrity:** Visual representation matches data proportionally
+- **Small multiples:** Repeated structure enables comparison across conditions
+
+#### Norman's Principles
+- **Visibility:** State and options should be visible
+- **Affordances:** Controls suggest their use (buttons look pressable)
+- **Feedback:** Every action gets immediate, visible response
+- **Mapping:** Controls arranged to match effects spatially
+- **Constraints:** Prevent errors by limiting invalid actions
+
+#### Gestalt Principles (Quick)
+- **Proximity:** Close = related
+- **Similarity:** Alike = grouped
+- **Continuity:** Aligned = connected
+- **Closure:** Mind completes incomplete figures
+- **Figure-Ground:** Foreground vs background separation
+
+#### Cognitive Load Principles
+- **Intrinsic load:** Task complexity (can't change)
+- **Extraneous load:** Bad design (MINIMIZE THIS)
+- **Germane load:** Meaningful learning effort (support this)
+
+#### Mayer's Multimedia Principles (Quick)
+- **Multimedia:** Words + pictures > words alone
+- **Modality:** Audio + visual > text + visual (splits load)
+- **Contiguity:** Place text near corresponding graphic
+- **Coherence:** Exclude extraneous content
+- **Segmenting:** Break into user-paced chunks
+
+---
+
+### When to Use Which Framework
+
+**Cognitive Design Pyramid**
+→ **Use when:** Comprehensive quality check needed, evaluating all dimensions of design
+→ **Tiers:** Perception → Coherence → Emotion → Behavior
+
+**Design Feedback Loop**
+→ **Use when:** Designing interactive interfaces, ensuring each screen answers user questions
+→ **Stages:** Perceive → Interpret → Decide → Act → Learn
+
+**Three-Layer Visualization Model**
+→ **Use when:** Creating data visualizations, checking data quality through to interpretation
+→ **Layers:** Data → Encoding → Interpretation
+
+---
+
+### 5-Second Tests
+
+**Dashboard:** Can user identify current status within 5 seconds?
+
+**Form:** Can user determine what information is needed within 5 seconds?
+
+**Visualization:** Can user grasp main insight within 5 seconds?
+
+**Infographic:** Can user recall key message after 5 seconds viewing?
+
+**Interface:** Can user identify primary action within 5 seconds?
+
+**If NO to any → simplify, strengthen hierarchy, add annotations**
+
+---
+
+### Common Rationales for Advocacy
+
+**"Why bar chart instead of pie chart?"**
+→ "Cleveland & McGill's research shows position/length encoding is 5-10x more accurate than angle/area for human perception. Bar charts enable precise comparisons; pie charts make them difficult."
+
+**"Why simplify the interface?"**
+→ "Working memory holds only 4±1 chunks. Current design exceeds this, causing cognitive overload. Chunking into groups fits human capacity and improves task completion."
+
+**"Why inline validation?"**
+→ "Immediate feedback enables learning through the perception-action loop. Delayed feedback breaks the cognitive connection between action and outcome."
+
+**"Why not use red for all negative values?"**
+→ "Preattentive salience depends on contrast. If everything is red, nothing stands out (alert fatigue). Reserve red for true threshold violations requiring immediate action."
+
+**"Why accessible color schemes?"**
+→ "8% of males have color vision deficiency. Redundant coding (color + icon + text) ensures all users can perceive information, not just those with typical vision."
+

skills/cognitive-design/resources/storytelling-journalism.md

@@ -0,0 +1,473 @@
+# Storytelling & Journalism
+
+This resource provides cognitive design principles for data journalism, presentations, infographics, and visual storytelling.
+
+**Covered topics:**
+1. Visual narrative structure
+2. Annotation strategies
+3. Scrollytelling techniques
+4. Framing and context
+5. Visual metaphors
+
+---
+
+## Why Storytelling Needs Cognitive Design
+
+### WHY This Matters
+
+**Core insight:** People naturally seek stories with cause-effect and chronology - structuring data as narrative aids comprehension and retention.
+
+**Challenges of data storytelling:**
+- Raw data is heap of facts (hard to process)
+- Visualizations can be misinterpreted without guidance
+- Readers skim, don't read thoroughly
+- Need emotional engagement + factual accuracy
+
+**How cognitive principles help:**
+- **Narrative structure:** Context → problem → resolution (chunks information meaningfully)
+- **Annotations:** Guide attention to key insights (prevent misinterpretation)
+- **Self-contained graphics:** Include all context (recognition over recall, no split attention)
+- **Emotional engagement:** Appropriate imagery improves retention (Norman's emotional design)
+- **Progressive disclosure:** Scrollytelling reveals complexity gradually
+
+**Mental model:** Data journalism is guided tour, not data dump - designer leads readers to insights while allowing exploration.
+
+---
+
+## What You'll Learn
+
+**Five key areas:**
+
+1. **Narrative Structure:** Organizing data stories with beginning, middle, end
+2. **Annotation Strategies:** Guiding interpretation and preventing misreading
+3. **Scrollytelling:** Progressive revelation as user scrolls
+4. **Framing & Context:** Honest presentation avoiding misleading frames
+5. **Visual Metaphors:** Leveraging existing knowledge for new concepts
+
+---
+
+## Why Narrative Structure Matters
+
+### WHY This Matters
+
+**Core insight:** Human brains are wired for stories - we naturally seek cause-effect relationships and temporal sequences.
+
+**Benefits of narrative:**
+- Easier to process (story arc vs unstructured facts)
+- Better retention (stories are memorable)
+- Emotional engagement (narratives activate empathy)
+- Natural chunking (beginning/middle/end provides structure)
+
+**Mental model:** Like journalism's inverted pyramid, but for visual data - lead with context, build to insight, resolve with implications.
+
+---
+
+### WHAT to Apply
+
+#### Classic Narrative Arc for Data
+
+**Structure:** Context → Problem/Question → Data/Evidence → Resolution/Insight
+
+**Context (Set the stage):**
+```
+Purpose: Orient reader to situation
+Elements:
+- Title that frames the story: "How Climate Change is Affecting Crop Yields"
+- Subtitle/intro: Brief background (2-3 sentences)
+- Visuals: Overall trend or map showing scope
+
+Example:
+Title: "The Midwest Corn Belt is Shifting North"
+Subtitle: "Rising temperatures are pushing viable growing regions 100 miles northward"
+Visual: Map showing historical corn production zones vs current
+```
+
+**Problem/Question (Establish stakes):**
+```
+Purpose: Show why this matters, what's at stake
+Elements:
+- Specific question posed: "Will traditional farming regions remain viable?"
+- Visual highlighting problem area
+- Human impact stated (not just abstract data)
+
+Example:
+Question: "Can farmers adapt quickly enough?"
+Visual: Chart showing yield declines in traditional zones
+Impact: "1.5 million farming families affected"
+```
+
+**Data/Evidence (Show the findings):**
+```
+Purpose: Present data that answers question
+Elements:
+- Clear visualizations (chart type matched to message)
+- Annotations highlighting key patterns
+- Comparisons (before/after, with/without intervention)
+
+Example:
+Visual: Line chart showing yields 1980-2024 by region
+Annotation: "Southern regions declining 15%, northern regions up 22%"
+Comparison: States that adapted (Iowa) vs those that didn't
+```
+
+**Resolution/Insight (Deliver the takeaway):**
+```
+Purpose: Answer the question, provide conclusion
+Elements:
+- Main insight clearly stated
+- Implications for future
+- Call-to-action or next question (optional)
+
+Example:
+Insight: "Adaptation possible but requires 5-10 year transition"
+Implication: "Without support, smaller farms will struggle to relocate/retool"
+Next: "How can policy accelerate adaptation?"
+```
+
+---
+
+#### Opening Strategies
+
+**Lead with human impact:**
+```
+❌ "Agricultural productivity data shows regional variations"
+✓ "Sarah Miller's family has farmed Iowa corn for 4 generations. Now her yields are declining while her neighbor 200 miles north is thriving."
+
+Why: Concrete human story engages emotions, makes abstract data personal
+```
+
+**Lead with surprising finding:**
+```
+❌ "Unemployment rates changed over time"
+✓ "Despite recession fears, unemployment in Tech Hub cities fell 15% while national rates rose"
+
+Why: Counterintuitive findings capture attention
+```
+
+**Lead with visual:**
+```
+Strong opening image/chart that encapsulates story
+Followed by: "This is the story of..." text
+Why: Visual impact draws reader in
+```
+
+---
+
+## Why Annotation Strategies Matter
+
+### WHY This Matters
+
+**Core insight:** Readers scan rather than study - without guidance, they may miss key insights or misinterpret data.
+
+**Benefits of annotations:**
+- Guide attention to important patterns (preattentive cues)
+- Prevent misinterpretation (clarify what data shows)
+- Reduce cognitive load (don't make readers discover insight)
+- Enable skimming (annotations convey story even without deep read)
+
+**Mental model:** Annotations are like tour guide pointing out important sights - "Look here, notice this pattern, here's why it matters."
+
+---
+
+### WHAT to Apply
+
+#### Annotation Types
+
+**Callout boxes:**
+```
+Purpose: Highlight main insight
+Position: Near relevant data point, contrasting background
+Content: 1-2 sentences max
+Style: Larger font than body, bold or colored
+
+Example on line chart:
+Callout pointing to spike: "Sales increased 78% after campaign launch - highest growth in company history"
+```
+
+**Arrows and leader lines:**
+```
+Purpose: Connect explanation to specific data element
+Use: Point from text annotation to exact point/region on chart
+Style: Simple arrow, not decorative
+
+Example:
+Arrow from "Product launch" text to vertical line on timeline
+Arrow from "Outlier explained by data error" to specific point
+```
+
+**Shaded regions:**
+```
+Purpose: Mark time periods or ranges of interest
+Use: Highlight recessions, policy changes, events
+Style: Subtle shading (10-20% opacity), doesn't obscure data
+
+Example:
+Gray shaded region labeled "COVID-19 lockdown March-May 2020"
+Allows comparison of before/during/after in context
+```
+
+**Direct labels on data:**
+```
+Purpose: Eliminate legend lookups
+Use: Label lines/bars directly instead of separate legend
+Benefit: Immediate association, no cross-referencing
+
+Example on multi-line chart:
+Text "North Region" placed directly next to its line (not legend box)
+```
+
+**Contextual annotations:**
+```
+Purpose: Explain anomalies, provide necessary background
+Use: Note data quirks, methodological notes, definitions
+
+Example:
+"*Data unavailable for Q2 2020 due to reporting disruptions"
+"**Adjusted for inflation using 2024 dollars"
+```
+
+---
+
+#### Annotation Guidelines
+
+**What to annotate:**
+```
+✓ Main insight (what should reader take away?)
+✓ Unexpected patterns (outliers, inflection points)
+✓ Important events (policy changes, launches, crises)
+✓ Comparisons (how does this compare to baseline/benchmark?)
+✓ Methodological notes (data sources, limitations)
+
+❌ Don't annotate obvious patterns ("trend is increasing" when clearly visible)
+❌ Don't over-annotate (too many annotations = visual noise)
+```
+
+**Annotation placement:**
+```
+✓ Near the data being explained (Gestalt proximity)
+✓ Outside the chart area if possible (don't obscure data)
+✓ Consistent positioning (all callouts top-right, or all left, etc.)
+```
+
+---
+
+## Why Scrollytelling Matters
+
+### WHY This Matters
+
+**Core insight:** Complex data stories benefit from progressive revelation - scrollytelling maintains context while building understanding step-by-step.
+
+**Benefits:**
+- Progressive disclosure (fits working memory)
+- Maintains context (chart stays visible throughout)
+- Engaging (interactive vs passive reading)
+- Guided exploration (designer controls sequence)
+
+**Mental model:** Like flipping through graphic novel panels - each scroll reveals next part of story while maintaining continuity.
+
+---
+
+### WHAT to Apply
+
+#### Basic Scrollytelling Pattern
+
+**Structure:**
+```
+1. Sticky chart (stays visible as user scrolls)
+2. Text sections (scroll past, trigger chart updates)
+3. Smooth transitions (not jarring jumps)
+4. User control (can scroll back up to review)
+```
+
+**Example implementation:**
+
+**Section 1 (scroll 0%):**
+```
+Chart shows: Full trend line 2010-2024
+Text visible: "Overall growth trajectory shows steady increase"
+User sees: Big picture
+```
+
+**Section 2 (scroll 33%):**
+```
+Chart updates: Highlight 2015-2018 segment in color, rest faded
+Text visible: "First phase: Rapid growth following policy change"
+User sees: Specific period in context of whole
+```
+
+**Section 3 (scroll 66%):**
+```
+Chart updates: Highlight 2020 dip in red
+Text visible: "COVID-19 impact caused temporary decline"
+User sees: Anomaly explained
+```
+
+**Section 4 (scroll 100%):**
+```
+Chart updates: Full color restored, add projection (dotted)
+Text visible: "Projected recovery to pre-2020 trend by 2026"
+User sees: Complete story with future outlook
+```
+
+---
+
+#### Scrollytelling Best Practices
+
+**Transitions:**
+```
+✓ Smooth animations (300-500ms transitions)
+✓ Maintain reference points (axis don't jump)
+✓ One change at a time (highlight region OR add annotation, not both simultaneously)
+❌ Jarring jumps (disorienting)
+```
+
+**User control:**
+```
+✓ Can scroll back up to review
+✓ Scroll speed doesn't affect (trigger points based on position, not speed)
+✓ "Skip to end" option for impatient users
+✓ Pause/play if animations continue automatically
+```
+
+**Accessibility:**
+```
+✓ All content accessible without scrolling (fallback for screen readers)
+✓ Keyboard navigation supported
+✓ Works without JavaScript (progressive enhancement)
+```
+
+---
+
+## Why Framing & Context Matter
+
+### WHY This Matters
+
+**Core insight:** Same data can support different conclusions based on framing - ethical journalism provides complete context to avoid misleading.
+
+**Framing effects (Tversky & Kahneman):**
+- 10% unemployment vs 90% employed (same data, different emotional impact)
+- Deaths per 100k vs % survival (same mortality, different perception)
+
+**Ethical obligation:** Provide enough context for accurate interpretation
+
+---
+
+### WHAT to Apply
+
+#### Provide Baselines & Comparisons
+
+**Always include:**
+```
+✓ Historical comparison (how does this compare to past?)
+✓ Peer comparison (how does this compare to similar entities?)
+✓ Benchmark (what's the standard/goal?)
+✓ Absolute + relative (numbers + percentages both shown)
+
+Example: "Unemployment rises to 5.2%"
+Better: "Unemployment rises to 5.2% from 4.8% last quarter (historical average: 5.5%)"
+Complete context: Reader can judge severity
+```
+
+**Avoid cherry-picking:**
+```
+❌ Show only favorable time period (Q4 2023 sales up! ...but down overall year)
+✓ Show full relevant period + note any focus area
+
+Example:
+❌ "Satisfaction scores improved 15 points!" (cherry-picked one quarter)
+✓ Chart showing full 2-year trend (overall declining with one uptick quarter)
+```
+
+---
+
+#### Clarify Denominator
+
+**Percentages need context:**
+```
+❌ "50% increase!" (50% of what?)
+✓ "Increased from 10 to 15 users (50% increase)"
+✓ "Increased 50 percentage points (from 20% to 70%)"
+
+Confusion: Is it 50 percentage point increase or 50% relative increase?
+Clarity: State both absolute numbers and percentage
+```
+
+---
+
+#### Note Limitations
+
+**Methodological transparency:**
+```
+✓ Data source stated: "Source: U.S. Census Bureau"
+✓ Sample size noted: "n=1,200 respondents"
+✓ Margin of error: "±3% margin of error"
+✓ Missing data: "State data unavailable 2020-2021"
+✓ Selection criteria: "Only includes full-time employees"
+
+Purpose: Reader can assess reliability and applicability
+```
+
+---
+
+## Why Visual Metaphors Matter
+
+### WHY This Matters
+
+**Core insight:** Familiar metaphors leverage existing knowledge to explain new concepts - but only if metaphor resonates with audience.
+
+**Benefits:**
+- Faster comprehension (tap into existing schemas)
+- Memorable (concrete imagery aids recall)
+- Emotional connection (metaphors evoke feelings)
+
+**Risks:**
+- Misleading if metaphor doesn't fit
+- Cultural assumptions (metaphor may not translate)
+- Oversimplification (metaphor hides complexity)
+
+---
+
+### WHAT to Apply
+
+#### Choosing Metaphors
+
+**Effective metaphors:**
+```
+✓ Virus spread as fire spreading across map (leverages fire = spread schema)
+✓ Data flow as river (volume, direction, obstacles)
+✓ Economic inequality as wealth distribution pyramid
+✓ Carbon footprint as actual footprint size
+
+Why they work: Concrete, universally understood, structurally similar to concept
+```
+
+**Problematic metaphors:**
+```
+❌ Complex technical process as simple machine (oversimplifies)
+❌ Cultural-specific metaphors (e.g., sports metaphors for international audience)
+❌ Metaphors that contradict data (e.g., "economy is healthy" shown as growing plant - what if it's not growing?)
+```
+
+---
+
+#### Metaphor Guidelines
+
+**Test your metaphor:**
+```
+1. Does it help understanding or just decorate?
+2. Is it universally recognized by target audience?
+3. Does it accurately represent the concept?
+4. Does it oversimplify in misleading ways?
+5. Could it be misinterpreted?
+
+If any answer is problematic → reconsider metaphor
+```
+
+**Clarify limitations:**
+```
+When using metaphor, note where analogy breaks down:
+"While virus spread resembles fire spread, unlike fire, viruses can have delayed effects..."
+
+Prevents overgeneralizing from metaphor
+```
+

skills/cognitive-design/resources/ux-product-design.md

@@ -0,0 +1,272 @@
+# UX & Product Design
+
+This resource provides cognitive design principles for interactive software interfaces (web apps, mobile apps, desktop software).
+
+**Covered topics:**
+1. Learnability through familiar patterns
+2. Task flow efficiency
+3. Cognitive load management
+4. Onboarding design
+5. Error handling and prevention
+
+---
+
+## Why UX Needs Cognitive Design
+
+### WHY This Matters
+
+**Core insight:** Users approach interfaces with mental models from prior experiences - designs that violate expectations require re-learning and cause cognitive friction.
+
+**Common problems:**
+- New users abandon apps (steep learning curve)
+- Task flows with too many steps/choices (Hick's Law impact)
+- Complex features overwhelm users (cognitive overload)
+- Confusing error messages
+- Onboarding shows all features at once (memory overload)
+
+**How cognitive principles help:** Leverage existing mental models (Jakob's Law), minimize steps/choices (Hick's/Fitts's Law), progressive disclosure, inline validation, onboarding focused on 3-4 key tasks (working memory limit).
+
+---
+
+## What You'll Learn
+
+1. **Learnability:** Leverage familiar patterns for instant comprehension
+2. **Task Flow Efficiency:** Minimize steps and optimize control placement
+3. **Cognitive Load Management:** Progressive disclosure and memory aids
+4. **Onboarding:** Teaching without overwhelming
+5. **Error Handling:** Prevention first, then contextual recovery
+
+---
+
+## Why Learnability Matters
+
+### WHY This Matters
+
+Users spend most time on OTHER sites/apps (Jakob's Law) - they expect interfaces to work like what they already know.
+
+**Benefits of familiar patterns:** Instant recognition (System 1), lower cognitive load, faster completion, reduced errors.
+
+---
+
+### WHAT to Apply
+
+#### Standard UI Patterns
+
+**Navigation:**
+- Hamburger menu (☰) for mobile
+- Magnifying glass (🔍) for search
+- Logo top-left returns home
+- User avatar top-right for account
+- Breadcrumbs for hierarchy
+
+**Actions:**
+- Primary: Right-aligned button
+- Destructive: Red, requires confirmation
+- Secondary: Gray/outlined
+- Disabled: Grayed out
+
+**Forms:**
+- Labels above/left of fields
+- Required fields: Asterisk (*)
+- Validation: Inline as user types
+- Submit: Bottom-right
+
+**Feedback:**
+- Loading: Spinner for waits >1s
+- Success: Green checkmark + message
+- Error: Red + icon + message
+- Confirmation: Modal for destructive actions
+
+**Application rule:** Use standard patterns by default. Deviate only when standard fails AND provide onboarding. Test if users understand without help.
+
+---
+
+#### Affordances & Signifiers
+
+Controls should signal function through appearance:
+
+**Buttons:** Raised appearance, hover state, active state, focus state
+**Links:** Underlined or distinct color, pointer cursor on hover
+**Inputs:** Rectangular border, cursor on click, placeholder text, focus state
+**Draggable:** Handle icon (≡≡), grab cursor, shadow on drag
+
+**Anti-patterns:** Flat design with no cues, no hover states, buttons looking like labels, clickable areas smaller than visual target.
+
+---
+
+#### Platform Conventions
+
+**iOS:** Back top-left, navigation bottom tabs, swipe gestures, share icon with up arrow
+**Android:** System back button, hamburger menu top-left, three-dot overflow, FAB bottom-right
+**Web:** Logo top-left to home, primary nav top horizontal, search top-right, footer links
+
+**Rule:** Match platform norms. If cross-platform, adapt to each. Don't invent when standards exist.
+
+---
+
+## Why Task Flow Efficiency Matters
+
+### WHY This Matters
+
+Every decision point and step adds time and cognitive effort.
+
+**Hick's Law:** Decision time increases logarithmically with choices (2 choices = fast, 10 = slow/paralysis)
+**Fitts's Law:** Time to target = distance ÷ size (large/nearby = fast, small/distant = slow)
+
+---
+
+### WHAT to Apply
+
+#### Reduce Steps
+
+**Audit method:**
+1. Map current flow
+2. Question each step: "Necessary? Can automate? Can merge?"
+3. Eliminate unnecessary
+4. Combine related
+5. Pre-fill known info
+
+**Example:** Checkout flow reduced from 8 steps to 4 (pre-fill email/shipping, combine review inline) = 50% fewer steps, higher completion.
+
+---
+
+#### Reduce Choices (Hick's Law)
+
+**Progressive disclosure:** Show 5 most common filters, "More filters" reveals rest
+**Smart defaults:** Highlight recommended option, show "Other options" link
+**Contextual menus:** 5-7 actions relevant to current mode, not all 50
+
+**Rule:** Common tasks ≤5 options. Advanced features behind "More". Personalize based on usage.
+
+---
+
+#### Optimize Control Placement (Fitts's Law)
+
+Frequent actions = large and nearby. Infrequent = smaller and distant.
+
+**Primary:** Large button (44×44px mobile, 32×32px desktop), bottom-right or natural flow
+**Secondary:** Medium, near primary but distinct (outlined, gray)
+**Tertiary/destructive:** Smaller, separated, requires confirmation
+
+---
+
+## Why Cognitive Load Management Matters
+
+### WHY This Matters
+
+Working memory holds 4±1 chunks - exceeding this causes confusion/abandonment.
+
+**Load types:** Intrinsic (task complexity), Extraneous (poor design - MINIMIZE), Germane (meaningful learning - support)
+
+---
+
+### WHAT to Apply
+
+#### Progressive Disclosure
+
+Reveal complexity gradually, show only immediate needs.
+
+**Wizards:** 4 steps × 6-8 fields (not 30 fields on one page) = fits working memory, visible progress
+**Expandable sections:** Collapsed by default, expand on demand
+**"Advanced" options:** Basic visible, "Show advanced" link reveals rest
+
+---
+
+#### Chunking & Grouping
+
+Group related items, separate with whitespace.
+
+**Forms:** Group by relationship (Personal Info, Shipping Address) = 2 chunks
+**Navigation:** 5-7 categories × 3-5 items each (not 25 flat items)
+
+---
+
+#### Memory Aids (Recognition over Recall)
+
+Show options, don't require memorization.
+
+**Visible state:** Active filters as chips, current page highlighted, breadcrumbs, progress indicators
+**Autocomplete:** Search suggestions, address autocomplete, date picker
+**Recent history:** Recently opened files, search history, previous purchases
+
+---
+
+## Why Onboarding Matters
+
+### WHY This Matters
+
+First experience determines continuation/abandonment. Must teach key tasks without overwhelming.
+
+**Failures:** All features upfront, passive tutorials, no contextual help
+**Success:** 3-4 core tasks, interactive tutorials, contextual help when encountered
+
+---
+
+### WHAT to Apply
+
+#### Focus on Core Tasks
+
+Limit to 3-4 most important tasks, not comprehensive tour.
+
+**Ask:** "What must users learn to get value?" NOT "What are all features?"
+
+**Example:** Project management app - onboard on: create project, add task, assign to member, mark complete. Skip advanced filtering/custom fields/reporting (teach contextually later).
+
+---
+
+#### Interactive Learning
+
+Users learn by doing, not reading.
+
+**Guided interaction:** Highlight button, require click to proceed (active learning, muscle memory)
+**Progressive completion:** Step 1 must complete before Step 2 unlocks = sense of accomplishment, ensures learning
+
+---
+
+#### Contextual Help
+
+Advanced features taught when encountered, not upfront.
+
+**First encounter tooltips:** One-time help when user navigates to new feature
+**Empty states:** "No tasks yet! Click + to create first task" with illustrative graphic
+**Gradual discovery:** After 1 week show tip, after 1 month show power tip (usage-based timing)
+
+---
+
+## Why Error Handling Matters
+
+### WHY This Matters
+
+Users make errors (slips/mistakes) - good design prevents and provides clear recovery.
+
+**Goal:** Prevention > detection > recovery
+
+---
+
+### WHAT to Apply
+
+#### Prevention (Best)
+
+**Constrain inputs:** Date picker (not free text), numeric keyboard for phone, input masking
+**Provide defaults:** Pre-select common option, suggest formats
+**Confirm destructive:** Require confirmation modal, "Type DELETE to confirm", undo when possible
+
+---
+
+#### Detection (Inline Validation)
+
+Immediate feedback as user types/on blur, not after submit.
+
+**Real-time validation:** Password strength meter as typing, email format on blur
+**Positioning:** Error NEXT TO field (not top of page) - Gestalt proximity
+
+---
+
+#### Recovery (Clear Guidance)
+
+Tell what's wrong and how to fix, in plain language.
+
+**Bad:** "Error 402"
+**Good:** "Password must be at least 8 characters"
+
+**Visual:** Red + icon, auto-focus to error field, keep user input (don't clear), green checkmark when fixed