
cognitive-design
Grounds visual design decisions in cognitive psychology principles — perception, attention, memory, Gestalt grouping, and visual encoding hierarchy — explaining WHY certain designs work. Covers interfaces, data visualizations, educational content, and presentations. Invoke when user mentions cognitive load, visual hierarchy, working memory, preattentive processing, Gestalt principles, encoding hierarchy, or cognitive design pyramid. For design evaluation, use design-evaluation-audit. For fallacy prevention, use cognitive-fallacies-guard. For data storytelling, use visual-storytelling-design.
- Installs
- 129
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/lyndonkl/claude --skill cognitive-design- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads cognitive-design automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Cognitive Design Principles
Table of Contents
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.
Workflows
Apply Cognitive Principles Workflow
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.
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 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.
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.
Time: 20-40 minutes
→ Go to Cognitive Foundations resource
Path 2: Apply Design Frameworks
Choose this when: You want systematic frameworks to structure your design thinking.
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
Path 3: Get Domain-Specific Guidance
Choose this when: You're working on a specific type of design and want tailored cognitive principles.
Choose your domain:
3a. Data Visualization (Charts, Dashboards, Analytics)
→ Go to Data Visualization resource
Covers: Chart selection via task-encoding alignment, dashboard hierarchy and grouping, progressive disclosure for exploration, narrative data visualization
3b. Product/UX Design (Interfaces, Mobile Apps, Web Applications)
→ Go to UX Product Design resource
Covers: Learnability via familiar patterns, task flow efficiency, cognitive load management, onboarding design, error handling
3c. Educational Design (E-Learning, Training, Instructional Materials)
→ Go to Educational Design resource
Covers: Multimedia learning principles, dual coding, worked examples, retrieval practice, segmenting, coherence principle
Path 4: Access Quick Reference
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
Path 5: Explore Source Landscape
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
Path 6: 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?
- Need to evaluate your design? → Use
design-evaluation-auditskill - Need to check for misleads? → Use
cognitive-fallacies-guardskill - Need to tell a data story? → Use
visual-storytelling-designskill
Related Skills
| 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 |
FAQ
What does the cognitive-design skill do?
Grounds visual design decisions in cognitive psychology principles — perception, attention, memory, Gestalt grouping, and visual encoding hierarchy — explaining WHY certain designs work. Covers interfaces, data visualizations, educational content, and presentations. Invoke when user mentions cognitive load, visual hierarchy, working memory, preattentive processing, Gestalt principles, encoding hierarchy, or cognitive design pyramid. For design evaluation, use design-evaluation-audit. For fallacy prevention, use cognitive-fallacies-guard. For data storytelling, use visual-storytelling-design.
How do I install cognitive-design?
Run npx skills add https://github.com/lyndonkl/claude --skill cognitive-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/cognitive-design/ (personal) or .claude/skills/cognitive-design/ (project).
Which AI agents can use cognitive-design?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is cognitive-design safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains cognitive-design?
It is published by lyndonkl in lyndonkl/claude. It has 129 recorded installs.
More from lyndonkl/claude
evaluation-rubrics
lyndonkl/claude
Designs structured scoring tools with explicit criteria, performance scales, and descriptors for consistent, transparent quality assessment. Use when need quality criteria and scoring scales to evaluate work consistently, compare alternatives objectively, set acceptance thresholds, reduce subjective bias, or when user mentions rubric, scoring criteria, quality standards, evaluation framework, inter-rater reliability, or grading/assessing work.
strategy-and-competitive-analysis
lyndonkl/claude
Develops business strategies grounded in rigorous competitive and market analysis using proven frameworks (Good Strategy kernel, Porter's 5 Forces, SWOT, Blue Ocean, Playing to Win, Value Chain Analysis, BCG Matrix). Use when developing strategy (market entry, product launch, expansion, M&A, turnaround), conducting competitive analysis, making strategic decisions (build vs buy, pricing, positioning), planning strategic initiatives, or when user mentions strategy, competitive analysis, Porter's 5 Forces, SWOT, market positioning, or strategic frameworks.
scientific-manuscript-review
lyndonkl/claude
Guides systematic multi-pass review and editing of scientific manuscripts (research articles, reviews, perspectives) to improve clarity, structure, scientific rigor, and reader comprehension. Use when reviewing or editing research manuscripts, journal articles, or perspectives, when user mentions manuscript, paper draft, article, research writing, journal submission, reviewer feedback, or needs to improve scientific writing.
memory-retrieval-learning
lyndonkl/claude
Creates evidence-based learning plans that maximize long-term retention through spaced repetition, retrieval practice, interleaving, and elaboration. Guides through goal definition, material breakdown, review scheduling, and progress tracking. Use when long-term knowledge retention is needed, studying for exams or certifications, learning new job skills or technology, mastering substantial material, combating forgetting, or when user mentions studying, memorizing, learning plans, spaced repetition, flashcards, active recall, or durable learning.
socratic-teaching-scaffolds
lyndonkl/claude
Guides learners to discover knowledge through strategic Socratic questioning and progressive scaffolding removal. Combines question ladders, misconception detectors, Feynman explanations, and worked-example fading to build durable understanding. Use when teaching complex concepts, correcting misconceptions, onboarding team members, mentoring problem-solving, or designing self-paced learning. Use when user mentions "teach me", "help me understand", "explain like I'm", "learning path", "guided discovery", or "Socratic method".
grant-proposal-assistant
lyndonkl/claude
Guides creation and review of competitive grant proposals (NIH R01/R21/K, NSF, foundations) by applying reviewer-perspective thinking to ensure clear hypotheses, compelling significance, genuine innovation, and feasible approaches. Use when writing or reviewing grant proposals, crafting specific aims, drafting significance/innovation/approach sections, or when user mentions R01, R21, K-series, grant writing, proposal review, study section, or fundable hypothesis.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.