cognitive-design
$
npx mdskill add lyndonkl/claude/cognitive-designApply cognitive psychology to justify effective visual design.
- Reduces cognitive load in interfaces and data visualizations.
- Integrates with design-evaluation-audit and cognitive-fallacies-guard.
- Selects recommendations based on user mental model keywords.
- Delivers explanations linking theory to practical design choices.
SKILL.md
.github/skills/cognitive-designView on GitHub ↗
--- name: cognitive-design description: 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`. --- # Cognitive Design Principles ## Table of Contents - [Overview](#overview) - [Workflows](#workflows) - [Apply Cognitive Principles Workflow](#apply-cognitive-principles-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: Get Domain-Specific Guidance](#path-3-get-domain-specific-guidance) - [Path 4: Access Quick Reference](#path-4-access-quick-reference) - [Path 5: Explore Source Landscape](#path-5-explore-source-landscape) - [Path 6: Exit](#path-6-exit) - [Related Skills](#related-skills) --- ## 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](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, or [Educational Design](resources/educational-design.md) for e-learning/training. Apply tailored cognitive principles for your specific context. **Step 4: Validate against quick reference** Use [Quick Reference](resources/quick-reference.md) 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](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, consult the relevant cognitive foundation: Failed attention? Check hierarchy and visual salience in [Cognitive Foundations](resources/cognitive-foundations.md). 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](resources/cognitive-foundations.md)** --- ### 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](resources/frameworks.md)** --- ### 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](resources/data-visualization.md)** **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](resources/ux-product-design.md)** **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](resources/educational-design.md)** **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](resources/quick-reference.md)** --- ### 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](resources/source-landscape.md)** --- ### 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 | 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 |
More from lyndonkl/claude
- abstraction-concrete-examplesBuilds structured abstraction ladders that translate high-level principles into concrete, actionable examples across 3-5 levels. Bridges communication gaps, reveals hidden assumptions, and tests whether abstract ideas work in practice. Use when explaining concepts at different expertise levels, moving between abstract principles and concrete implementation, identifying edge cases by testing ideas against scenarios, designing layered documentation, decomposing complex problems into actionable steps, or bridging strategy-execution gaps.
- academic-letter-architectGuides the creation of evidence-based academic recommendation letters, reference letters, and award nominations that combine concrete examples, meaningful comparisons, and genuine enthusiasm. Use when writing recommendation letters for students, postdocs, or colleagues, or when user mentions recommendation letter, reference, nomination, letter of support, endorsement, or needs help with strong advocacy and comparative statements.
- adr-architectureDocuments significant architectural and technical decisions with full context, alternatives considered, trade-offs analyzed, and consequences understood. Creates a decision trail that helps teams understand why decisions were made. Use when choosing between technology options, making infrastructure decisions, establishing standards, migrating systems, or when user mentions ADR, architecture decision, technical decision record, or decision documentation.
- adverse-selection-priorProduces a Bayesian prior probability that an offered transaction is +EV for the recipient, given that the counterparty chose to propose it. Applies Akerlof market-for-lemons logic -- if they offered it, they believe it is +EV for them, so the prior that it is +EV for us is materially below 50%. Reusable across trade evaluation, waiver drops (another team dropping a player is also adverse selection), job-offer analysis, M&A, and any "someone offered me this" situation. Use when you receive an unsolicited trade/offer/proposal, analyzing incoming trade prior, evaluating why a counterparty proposed a deal, or when user mentions adverse selection, market for lemons, why did they offer this, incoming trade prior, they proposed it, Bayesian adjustment on received offer.
- alignment-values-north-starCreates actionable alignment frameworks that give teams a shared North Star (direction), values (guardrails), and decision tenets (behavioral standards). Enables autonomous decision-making while maintaining organizational coherence. Use when starting new teams, scaling organizations, defining culture, establishing product vision, resolving misalignment, creating strategic clarity, or when user mentions North Star, team values, mission, principles, guardrails, decision framework, or cultural alignment.
- analogy-weight-checkFor every analogy in a substacker draft, verifies it carries mechanical weight — the analogy does real work explaining the mechanism, not merely decorates it. Cross-references analogy-catalog.md for novelty (is this analogy reused from a prior post?) and domain fit (biology > organizational > sports preferred; physics/military disfavored). Use whenever an analogy appears in the draft. Trigger keywords: analogy weight, decorative, mechanical weight, reused analogy, catalog check, metaphor check.
- answer-uncomfortable-questionTakes one strategic question about substacker ("should we launch paid?", "is this section dead?", "are we writing for the wrong audience?") and produces the mandatory evidence + reasoning + downside triad plus a recommendation. Used 3 times per Growth Strategist review. Trigger keywords: uncomfortable question, strategic question, evidence reasoning downside, triad.
- attribute-performanceFor each substacker post that materially over- or under-performs the rolling baseline (|z| ≥ 1.0), produces a plain-English attribution paragraph with calibrated confidence (high / medium / low / unexplained). Considers subject-line effect, topic zeitgeist, external share, day-of-week, length effect, and audience-notes signals. Labels unexplained outliers explicitly rather than fabricating a story. Use after compute-baseline when outlier posts exist. Trigger keywords: attribution, why did this post work, outlier explanation, performance analysis.
- auction-first-price-shadingComputes the optimal shaded bid for a first-price sealed-bid auction given a true private value, an estimate of the number of competing bidders N, and a value-distribution assumption. Implements the `(N-1)/N` equilibrium shading rule for uniform private values, adjusts for log-normal or empirical value distributions, layers a risk-aversion adjustment, and caps output against the bidder's remaining budget. Domain-neutral auction theory reusable across fantasy sports (baseball FAAB, NBA/NHL waiver auctions), prediction-market limit sizing, sealed procurement bids, and any blind-bid context. Use when user mentions "first-price auction bid", "sealed bid shading", "(N-1)/N", "FAAB bid amount", "auction shading", "optimal bid first-price", "bid for sealed-bid", "blind bid sizing", or when downstream logic needs a principled shade factor rather than an ad-hoc heuristic.
- auction-winners-curse-haircutApplies a Bayesian haircut to a bid valuation for common-value auctions where winning is itself evidence the bidder over-estimated. Takes a raw valuation, a value-type classification (common_value / private_value / mixed), the number of informed bidders N, and a signal-dispersion estimate, and returns an adjusted valuation. Domain-neutral and reusable across fantasy FAAB, prediction markets, M&A bids, ad-auction budgets, and any generic bidding context. Use when user mentions "winner's curse", "common value auction", "valuation haircut", "adverse valuation", "Bayesian bid adjustment", or "over-paying in auction".