MCPInstall

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
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads cognitive-design automatically when relevant.

  3. 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-audit skill
  • Need to check for misleads? → Use cognitive-fallacies-guard skill
  • Need to tell a data story? → Use visual-storytelling-design skill

Related Skills

SkillUse For
design-evaluation-auditSystematic design reviews using cognitive checklists and visualization audits
cognitive-fallacies-guardDetecting chartjunk, misleading axes, cognitive biases, data integrity violations
visual-storytelling-designData journalism, presentations, infographics, narrative visualization
information-architectureContent organization, navigation design, taxonomy, findability
d3-visualizationImplementing 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

View all →

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.

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.

Business & Finance491 installs

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.

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.

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".

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

View category →

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 & Design1.1M installs

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.

OfficialFrontend & Design1M installs

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.

Frontend & Design999.2K installs

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.

Frontend & Design930.5K installs

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.

OfficialFrontend & Design843.1K installs