Stats
Actions
Tags
From thinking-frameworks-skills
Applies cognitive psychology principles (perception, attention, memory, Gestalt) to ground design decisions for interfaces, data visualizations, and presentations.
How this skill is triggered — by the user, by Claude, or both
Slash command
/thinking-frameworks-skills:cognitive-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- [Overview](#overview)
This skill provides the cognitive science foundations for effective design — the perception, attention, memory, and decision-making principles that explain WHY certain designs work. It helps ground design decisions in research (Tufte, Norman, Ware, Cleveland & McGill, Mayer), apply systematic frameworks (Cognitive Design Pyramid, Design Feedback Loop, Three-Layer Model), choose appropriate visual encodings, and manage attention, memory limits, and cognitive load.
Related skills: design-evaluation-audit for systematic reviews, cognitive-fallacies-guard for detecting misleads, visual-storytelling-design for data journalism, information-architecture for content organization, d3-visualization for D3.js implementation.
Use when: Creating a new interface, dashboard, visualization, or educational content from scratch
Time: 1-2 hours
Copy this checklist and track your progress:
Cognitive Design Progress:
- [ ] Step 1: Orient to cognitive principles
- [ ] Step 2: Structure design thinking with frameworks
- [ ] Step 3: Apply domain-specific guidance
- [ ] Step 4: Validate against quick reference
Step 1: Orient to cognitive principles
Start with Cognitive Foundations for deep understanding of WHY designs work (perception, memory, Gestalt principles) OR use Quick Reference 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 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 for charts/dashboards, UX Product Design for interfaces/apps, or Educational Design for e-learning/training. Apply tailored cognitive principles for your specific context.
Step 4: Validate against quick reference
Use Quick Reference to verify your design against the 3-question check (Attention? Memory? Clarity?) and 20 core principles. Confirm your design passes basic cognitive alignment.
Next steps: Use design-evaluation-audit skill for systematic evaluation, cognitive-fallacies-guard to check for misleads.
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 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, consult the relevant cognitive foundation: Failed attention? Check hierarchy and visual salience in Cognitive Foundations. Failed memory? Check chunking and memory constraints. Failed clarity? Check simplicity principles and labeling guidance.
Choose your path based on current need:
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.
Time: 20-40 minutes
→ Go to Cognitive Foundations resource
Choose this when: You want systematic frameworks to structure your design thinking.
What you'll get: Three complementary frameworks:
Time: 30-45 minutes
Choose this when: You're working on a specific type of design and want tailored cognitive principles.
Choose your domain:
→ Go to Data Visualization resource
Covers: Chart selection via task-encoding alignment, dashboard hierarchy and grouping, progressive disclosure for exploration, narrative data visualization
→ Go to UX Product Design resource
Covers: Learnability via familiar patterns, task flow efficiency, cognitive load management, onboarding design, error handling
→ Go to Educational Design resource
Covers: Multimedia learning principles, dual coding, worked examples, retrieval practice, segmenting, coherence principle
Choose this when: You need rapid design guidance, core principles summary, or quick validation checks.
What you'll get: 20 core principles, 3-question check, common decision rules, design heuristics
Time: 5-15 minutes
→ Go to Quick Reference resource
Choose this when: You want to understand the research traditions and key authors behind cognitive design principles.
What you'll get: Key researchers (Tufte, Norman, Ware, Cleveland & McGill, Mayer, Nielsen), their contributions, and when to cite them.
Time: 10-20 minutes
→ Go to Source Landscape resource
Choose this when: You've completed your design work or gathered the information you need.
Before you exit:
design-evaluation-audit skillcognitive-fallacies-guard skillvisual-storytelling-design skill| Skill | Use For |
|---|---|
design-evaluation-audit | Systematic design reviews using cognitive checklists and visualization audits |
cognitive-fallacies-guard | Detecting chartjunk, misleading axes, cognitive biases, data integrity violations |
visual-storytelling-design | Data journalism, presentations, infographics, narrative visualization |
information-architecture | Content organization, navigation design, taxonomy, findability |
d3-visualization | Implementing interactive data visualizations with D3.js |
npx claudepluginhub lyndonkl/claude --plugin thinking-frameworks-skillsEvaluates existing designs against cognitive science principles using checklists, scoring rubrics, and severity-classified fix recommendations. Use for design reviews, usability diagnosis, or pre-launch QA.
Reduces cognitive load in learning materials, procedures, and interfaces by applying Sweller's theory to improve comprehension and performance.
Applies Perception-First Design (PFD) framework to evaluate, derive, and analyze UIs, landing pages, emails, ads, marketing copy, and communications via human perception psychology.