design-evaluation-audit
Systematically evaluates existing designs against cognitive science principles using repeatable checklists, scoring rubrics, and severity-classified fix recommendations. Use when conducting design reviews or critiques, evaluating designs for cognitive alignment, performing quality assurance before launch, diagnosing usability issues, or choosing between design alternatives with objective criteria.
What this skill does
# Design Evaluation & Audit ## Table of Contents - [Skill Boundaries](#skill-boundaries) - [Design Review Workflow](#design-review-workflow) - [Path Selection Menu](#path-selection-menu) - [Path 1: Run Cognitive Design Checklist](#path-1-run-cognitive-design-checklist) - [Path 2: Run Visualization Audit](#path-2-run-visualization-audit) - [Path 3: Combined Review](#path-3-combined-review) - [Quick Reference](#quick-reference) - [Guardrails](#guardrails) --- ## Skill Boundaries **Use instead of this skill for:** - Creating new designs from scratch: use `cognitive-design` - Learning cognitive theory: use `cognitive-design` Path 1 - Detecting misleading visualizations: use `cognitive-fallacies-guard` --- ## Design Review Workflow **Time:** 30-90 minutes depending on scope **Copy this checklist and track your progress:** ``` Design Evaluation Progress: - [ ] Step 1: Systematic Assessment - [ ] Step 2: Visualization Quality Audit (if applicable) - [ ] Step 3: Severity Classification & Prioritization - [ ] Step 4: Fix Recommendations ``` ### Step 1: Systematic Assessment Apply the Cognitive Design Checklist across all 8 dimensions: Visibility, Visual Hierarchy, Chunking, Simplicity, Memory Support, Feedback, Consistency, Scanning Patterns. Check every item. Record pass/fail for each dimension with specific evidence. **Resource:** [Cognitive Design Checklist](resources/cognitive-checklist.md) ### Step 2: Visualization Quality Audit (if applicable) If the design includes data visualizations, apply the 4-Criteria Visualization Audit. Score each criterion 1-5: Clarity, Efficiency, Integrity, Aesthetics. Calculate average and identify weakest dimension. **Resource:** [Visualization Audit Framework](resources/visualization-audit.md) ### Step 3: Severity Classification & Prioritization Classify every finding by severity: - **CRITICAL:** Integrity violations, accessibility failures, users cannot complete core tasks. Fix immediately. - **HIGH:** Clarity/efficiency issues preventing use, missing feedback for critical actions, working memory overload (>10 ungrouped items). Fix before launch. - **MEDIUM:** Suboptimal patterns, aesthetic issues, minor inconsistencies. Fix in next iteration. - **LOW:** Minor optimizations, polish items. Fix when convenient. **Priority rule:** Fix foundation-first — perception before coherence, integrity before aesthetics, critical before high. ### Step 4: Fix Recommendations For each finding, document: 1. **What is wrong** — specific description with evidence 2. **Why it matters** — which cognitive principle is violated 3. **How to fix** — concrete, actionable recommendation 4. **Expected outcome** — what improves after the fix 5. **Effort estimate** — quick fix (minutes), moderate (hours), significant (days) Verify fixes don't harm other dimensions. --- ## Path Selection Menu ### Path 1: Run Cognitive Design Checklist **Choose this when:** Evaluating any interface, layout, content page, form, or general design. **What you'll get:** Pass/fail across 8 cognitive dimensions, test methods, common failures, severity-classified findings. **Time:** 20-40 minutes **→ [Go to Cognitive Design Checklist](resources/cognitive-checklist.md)** --- ### Path 2: Run Visualization Audit **Choose this when:** Evaluating data visualizations — charts, graphs, dashboards, infographics. **What you'll get:** 1-5 scores on Clarity, Efficiency, Integrity, Aesthetics with pass/fail threshold. **Time:** 15-30 minutes per visualization **→ [Go to Visualization Audit Framework](resources/visualization-audit.md)** --- ### Path 3: Combined Review **Choose this when:** Comprehensive review covering both interface elements and data visualizations. **Process:** Run Cognitive Checklist first, then Visualization Audit on each data component, merge findings, produce unified fix list. **Time:** 45-90 minutes **→ Start with [Cognitive Checklist](resources/cognitive-checklist.md), then [Visualization Audit](resources/visualization-audit.md)** --- ## Quick Reference ### 3-Question Rapid Check **1. Attention** — "Is it obvious what to look at first?" - If NO: hierarchy and visibility issues **2. Memory** — "Is the user required to remember anything that could be shown?" - If NO: memory support and chunking issues **3. Clarity** — "Can someone unfamiliar understand in 5 seconds?" - If NO: simplicity and comprehension issues All YES = likely cognitively sound. Any NO = run full checklist on the failing area. --- ## Guardrails **Out of scope:** Creating designs, teaching theory, providing domain guidance, replacing user testing, or covering full accessibility compliance. **In scope:** Systematic evaluation against cognitive principles, severity-classified findings, prioritized fix recommendations, and visualization quality scoring.
Related in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.