Create visual organizational tools (mind maps, task breakdowns, decision trees, kanban boards, project timelines) designed for neurodivergent thinking patterns. Use when users feel overwhelmed, need to break down tasks, navigate decisions, see dependencies, or track current state. Emphasizes compassionate language, realistic time estimates, energy-aware planning, and anti-perfectionism. v3.1 adds colorblind-safe and monochrome accessibility modes.
/plugin marketplace add JackReis/neurodivergent-visual-org/plugin install neurodivergent-visual-org@neurodivergent-visual-orgThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/accountability-support.mdreferences/current-state-boards.mdreferences/decision-tools.mdreferences/focus-regulation.mdreferences/habit-building.mdreferences/project-maps.mdreferences/task-breakdowns.mdreferences/time-boxing.mdThis skill supports four modes to adapt to different cognitive styles and accessibility needs:
Base Modes (choose one):
Accessibility Modes (optional, combinable with base modes): 3. Colorblind-Safe Mode - Pattern-based differentiation for all color vision types 4. Monochrome Mode - Pure black & white optimized for printing and e-ink displays
.claude/neurodivergent-visual-org-preference.yml| Aspect | Neurodivergent Mode | Neurotypical Mode |
|---|---|---|
| Chunk size | 3-5 items | 5-7 items |
| Time estimates | 1.5-2x with buffer | Standard |
| Task granularity | 3-10 min micro-steps | 15-30 min tasks |
| Language | Compassionate, validating | Direct, efficient |
| Colors | Calming (blues/greens) | Standard themes |
| Energy scaffolding | Explicit (spoons, breaks) | Minimal |
| Aspect | Colorblind-Safe Mode | Monochrome Mode |
|---|---|---|
| Color usage | Redundant (patterns + color) | Pure B&W only (#000/#fff) |
| Border patterns | Dashed/dotted variations | Solid/dashed/dotted styles |
| Text labels | Prefixed ([KEEP], [DONATE]) | Verbose ([✓ KEEP], [? MAYBE]) |
| Shape coding | Diamond/hexagon/trapezoid | Distinct geometric shapes |
| Fill patterns | N/A (white fill, patterned borders) | Solid/crosshatch/dots/white |
| Border thickness | 1-3px for hierarchy | 1-3px for hierarchy |
| Symbols | Redundant icons (✅ 📦 🤔) | Text-based (✓ → ?) |
| Best for | All color vision types | B&W printing, e-ink displays |
| WCAG compliance | 2.1 AA (Use of Color 1.4.1) | 2.1 AAA (Maximum contrast) |
v3.1 maintains v3.0 behavior:
base_mode = None
accessibility_mode = None
# Detect base mode
if "neurotypical mode" in user_message.lower():
base_mode = "neurotypical"
elif "adhd mode" or "neurodivergent mode" in user_message.lower():
base_mode = "neurodivergent"
# Detect colorblind-safe mode
colorblind_keywords = ["colorblind", "color blind", "colorblind-safe",
"colour blind", "accessible colors", "pattern-based",
"cvd", "color vision deficiency"]
if any(keyword in user_message.lower() for keyword in colorblind_keywords):
accessibility_mode = "colorblind-safe"
# Detect monochrome mode (takes precedence over colorblind-safe)
monochrome_keywords = ["monochrome", "black and white", "b&w", "grayscale",
"greyscale", "print-friendly", "printing", "e-ink",
"black & white", "photocopier"]
if any(keyword in user_message.lower() for keyword in monochrome_keywords):
accessibility_mode = "monochrome"
if config_file_exists():
config = load_user_preference()
# Apply base mode if not explicitly set
if base_mode is None:
base_mode = config.get("default_mode", "neurodivergent")
# Apply accessibility mode if not explicitly set
if accessibility_mode is None:
accessibility_mode = config.get("colorblind_safe", False) and "colorblind-safe"
if not accessibility_mode:
accessibility_mode = config.get("monochrome", False) and "monochrome"
distress_signals = ["overwhelmed", "paralyzed", "stuck", "can't decide",
"don't know where to start", "too much"]
neurodivergent_mentions = ["adhd", "autism", "executive dysfunction",
"time blindness", "decision paralysis"]
energy_mentions = ["spoons", "burned out", "exhausted", "no energy"]
if base_mode is None:
if any(signal in user_message.lower() for signal in
distress_signals + neurodivergent_mentions + energy_mentions):
base_mode = "neurodivergent"
if base_mode is None:
base_mode = "neurodivergent" # Backward compatible with v2.0
# accessibility_mode can be None, "colorblind-safe", or "monochrome"
# base_mode will always be "neurodivergent" or "neurotypical"
apply_modes(base_mode=base_mode, accessibility_mode=accessibility_mode)
Purpose: Make diagrams accessible for all color vision types (protanopia, deuteranopia, tritanopia, achromatopsia) while remaining clear for regular color vision.
%%{init: {'theme':'base'}}%%
flowchart TD
Keep["[✅ KEEP] Item"]
Donate["[📦 DONATE] Item"]
Maybe["[🤔 MAYBE] Item"]
Break["[🛑 BREAK] Rest"]
style Keep fill:#ffffff,stroke:#000000,stroke-width:3px,stroke-dasharray: 5 5
style Donate fill:#ffffff,stroke:#000000,stroke-width:2px,stroke-dasharray: 10 5
style Maybe fill:#ffffff,stroke:#000000,stroke-width:2px,stroke-dasharray: 2 2
style Break fill:#ffffff,stroke:#000000,stroke-width:3px,stroke-dasharray: 1 4
stroke-dasharray: 5 5 - Short dashes (KEEP items, positive actions)stroke-dasharray: 10 5 - Long dashes (DONATE items, external actions)stroke-dasharray: 2 2 - Dots (MAYBE items, uncertain states)stroke-dasharray: 1 4 - Dot-dash (BREAK items, pauses)stroke-width: 3px - Critical importancestroke-width: 2px - Standard importancestroke-width: 1px - Detail level([text]) - Rounded rectangle: Standard process steps{text} - Diamond: Decision points[[text]] - Hexagon-style: Critical deadlines[/text/] - Trapezoid: Break/rest states>text] - Asymmetric: External dependencies[✅ KEEP] - Items to keep[📦 DONATE] - Items to donate/give away[🤔 MAYBE] - Uncertain decisions[🛑 BREAK] - Rest/break required[⚠️ CRITICAL] - Critical deadline or warning[START] - Starting point[END] - Completion point[DECIDE] - Decision point#ffffff) for all nodes#000000) for maximum contrastPurpose: Optimize for black & white printing, photocopying, and e-ink displays where color is unavailable.
%%{init: {'theme':'base'}}%%
flowchart TD
Critical["[★ CRITICAL] Deadline"]
High["[! HIGH] Important"]
Medium["[→ MEDIUM] Standard"]
Standard["[○ STANDARD] Normal"]
style Critical fill:#000000,stroke:#000000,stroke-width:3px,color:#ffffff
style High fill:#ffffff,stroke:#000000,stroke-width:3px
style Medium fill:#ffffff,stroke:#000000,stroke-width:2px,stroke-dasharray: 10 5
style Standard fill:#ffffff,stroke:#000000,stroke-width:2px
fill:#000000,color:#ffffff - Priority 1 (Critical)fill:#ffffff,stroke-width:3px - Priority 2 (High)stroke-dasharray: 10 5 - Priority 3 (Medium)stroke-width:3px + solid - Critical/deadlinesstroke-width:2px + solid - Standard stepsstroke-dasharray: 10 5 - Optional/medium prioritystroke-dasharray: 5 5 - Maybe/uncertainstroke-dasharray: 2 2 - Breaks/pauses[★ CRITICAL DEADLINE] - Critical with visual marker[✓ KEEP] - Text checkmark[→ DONATE] - Text arrow[? MAYBE] - Text question mark[■ BREAK] - Text square (stop sign)[○ START] - Text circle[● END] - Filled circle<br/> for multi-line)Base mode controls:
Accessibility mode controls:
Both modes respected simultaneously:
%%{init: {'theme':'base'}}%%
flowchart TD
Start(["[○ START] Decision time<br/>(Take 3 seconds max)"])
Q1{"[? DECIDE]<br/>Do I love it?<br/>(Not obligated)"}
Keep["[✓ KEEP]<br/>Pack for move<br/>(Fits in new space)"]
Donate["[→ DONATE]<br/>Helps someone else<br/>(Guilt-free)"]
Break["[■ BREAK]<br/>Rest 10 min<br/>(Decision fatigue signal)"]
Start --> Q1
Q1 -->|YES| Keep
Q1 -->|NO| Donate
Q1 -->|UNSURE| Break
style Start fill:#ffffff,stroke:#000000,stroke-width:3px
style Q1 fill:#ffffff,stroke:#000000,stroke-width:2px
style Keep fill:#ffffff,stroke:#000000,stroke-width:3px,stroke-dasharray: 5 5
style Donate fill:#ffffff,stroke:#000000,stroke-width:2px,stroke-dasharray: 10 5
style Break fill:#000000,stroke:#000000,stroke-width:3px,color:#ffffff
This example shows: Neurodivergent language (compassionate, with parenthetical reassurance) + Monochrome visual encoding (B&W with patterns)
Users can create a configuration file to set default modes and customize behavior:
File Location: .claude/neurodivergent-visual-org-preference.yml
# Neurodivergent Visual Org v3.1 Configuration
# Base mode (required, choose one)
default_mode: neurodivergent # Options: neurodivergent, neurotypical
# Accessibility modes (optional, can enable one or both)
colorblind_safe: false # Enable pattern-based differentiation
monochrome: false # Enable pure B&W print optimization
# Auto-enable rules for accessibility modes
# Note: These will PROMPT for confirmation before applying
auto_prompt_monochrome:
when_printing: true # Suggest monochrome when printing
when_exporting_pdf: true # Suggest monochrome for PDF export
when_exporting_png: false # Keep current mode for PNG exports
auto_prompt_colorblind_safe:
when_sharing: true # Suggest colorblind-safe for shared docs
when_public: true # Suggest for public-facing documents
# Base mode customizations
neurodivergent_customizations:
chunk_size: 4 # Items per chunk (3-5 recommended)
time_multiplier: 1.5 # Buffer multiplier for time estimates
micro_step_duration: 5 # Minutes per micro-step (3-10 recommended)
show_energy_scaffolding: true # Show spoons/breaks explicitly
use_compassionate_language: true
neurotypical_customizations:
chunk_size: 6 # Items per chunk (5-7 recommended)
time_multiplier: 1.0 # Standard time estimates
task_duration: 20 # Minutes per task (15-30 recommended)
show_energy_scaffolding: false
use_direct_language: true
# Colorblind-safe mode customizations
colorblind_safe_patterns:
keep: "short-dash" # Options: short-dash, long-dash, dots, dot-dash, solid
donate: "long-dash"
maybe: "dots"
break: "dot-dash"
critical: "solid"
# Border thickness (1-3 recommended)
critical_thickness: 3
standard_thickness: 2
detail_thickness: 1
# Monochrome mode customizations
monochrome_fills:
priority_1_critical: "solid-black" # Solid black fill, white text
priority_2_high: "white-bold" # White fill, bold border
priority_3_medium: "white-dashed" # White fill, dashed border
priority_4_standard: "white" # White fill, standard border
# General preferences
preferences:
always_include_legends: true # Include pattern/color legends in diagrams
verbose_labels: true # Use longer, more explicit labels
extra_whitespace: false # Add more space between nodes (good for printing)
show_wcag_compliance: false # Show WCAG compliance notes
# Mermaid.live link preferences
mermaid_links:
# Note: Mermaid 11.12.1+ fixed <br/> encoding, no longer needs URL encoding
auto_generate: true # Automatically provide mermaid.live links
use_base64: false # Use URL params instead of base64 (more readable)
# Simple config - just set your preferred defaults
default_mode: neurodivergent
colorblind_safe: true # Always use patterns for accessibility
# Optimized for printing and sharing
default_mode: neurodivergent
monochrome: true
preferences:
extra_whitespace: true
verbose_labels: true
The skill automatically checks for .claude/neurodivergent-visual-org-preference.yml at the start of each conversation. If found, settings are applied. Users can override any setting with explicit requests like "use colorblind-safe mode for this diagram".
Create visual organizational tools that make invisible work visible and reduce cognitive overwhelm. This skill generates Mermaid diagrams optimized for neurodivergent thinking patterns, leveraging research-backed design principles that work WITH ADHD brain wiring rather than against it.
Visual aids externalize executive function by:
Research shows altered early sensory processing in ADHD (P1 component deficits), making thoughtful visual design critical for reducing sensory load and improving focus.
Use when the user:
forest theme (green-based) or neutral theme (muted earth tones)Size Contrast (must be dramatic for ADHD attention)
classDef to style critical elements distinctlyMermaid 11.12.1 offers 22 diagram types. Choose based on cognitive need:
| User Need | Best Diagram Type | When to Use |
|---|---|---|
| "I don't know where to start" | Flowchart (decision tree) | Diagnose task initiation blocks |
| "This task is overwhelming" | Gantt chart or Timeline | Break into sequential phases with time |
| "How are tasks connected?" | Flowchart (dependencies) | Show prerequisite relationships |
| "What's the order of operations?" | Timeline or State diagram | Sequential progression with states |
| "Track project phases" | Gantt chart | Complex projects with dependencies |
| User Need | Best Diagram Type | When to Use |
|---|---|---|
| "I can't decide between options" | Quadrant chart | 2-dimensional comparison (Eisenhower Matrix) |
| "Need to weigh factors" | Flowchart (decision tree) | Branching logic with validation |
| "What should I focus on first?" | Quadrant chart | Urgent/Important matrix |
| "Too many things on my plate" | Pie chart | Visualize proportional allocation |
| "Comparing multiple aspects" | User journey | Track satisfaction across dimensions |
| User Need | Best Diagram Type | When to Use |
|---|---|---|
| "What's on my plate?" | Kanban (if available) | Track To Do/Doing/Done states |
| "Show task status" | State diagram | Visualize item states and transitions |
| "Organize by category" | Mindmap | Non-linear brainstorming and categorization |
| "See the big picture" | Mindmap | Hierarchical overview of complex topic |
| "Track multiple projects" | Gantt chart | Parallel timelines with milestones |
| User Need | Best Diagram Type | When to Use |
|---|---|---|
| "Make time visible" | Timeline with sections | Combat time blindness with visual periods |
| "Plan my day/week" | Gantt chart | Time-blocked schedule with buffer |
| "Track energy patterns" | Pie chart or XY chart | Spoon theory visualization |
| "Pomodoro planning" | Timeline | Show focus/break cycles visually |
| "Energy allocation" | Sankey diagram | Show energy flow across activities |
| User Need | Best Diagram Type | When to Use |
|---|---|---|
| "Build a morning routine" | Flowchart or Timeline | Sequential steps with time estimates |
| "Habit stacking" | Flowchart | Show trigger → action chains |
| "Track habit progress" | User journey | Satisfaction scores across habit stages |
| "Visual routine chart" | Timeline with sections | Color-coded daily schedule |
| User Need | Best Diagram Type | When to Use |
|---|---|---|
| "How does this system work?" | State diagram | Show system states and transitions |
| "Process flow" | Flowchart | Step-by-step procedures |
| "Data/resource flow" | Sankey diagram | Visualize flow and distribution |
| "Relationships between entities" | ER diagram or Mindmap | Show connections and structure |
| "Architecture/structure" | Architecture diagram (beta) | System components with icons |
flowchart TD
Start[Task feels overwhelming] --> Q1{Do I know how to start?}
Q1 -->|No| A1[Make order of operations list]
Q1 -->|Yes| Q2{Do I have materials?}
Q2 -->|No| A2[First: gather materials]
Q2 -->|Yes| Q3{Does starting feel scary?}
Q3 -->|Yes| A3[Identify anxiety source<br/>Break into smaller step]
Q3 -->|No| A4[Set timer for 5 minutes<br/>Just begin]
style Start fill:#e1f5ff
style A4 fill:#d4edda
[] Rectangle - standard task/statement() Rounded rectangle - softer, process step{} Diamond - decision point (yes/no question)[[]] Subroutine shape - sub-process[()] Stadium shape - start/end point{{}} Hexagon - preparation step--> Simple arrow-->|label| Labeled arrow-.-> Dotted arrow (optional path)==> Thick arrow (emphasis)flowchart TD
subgraph "Phase 1: Prep"
A[Gather materials]
B[Clear workspace]
end
subgraph "Phase 2: Execute"
C[Start task]
D[Take breaks]
end
A --> B --> C --> D
mindmap
root((ADHD Management<br/>Toolkit))
Time Tools
Visual timers
Time blocking
Pomodoro
Task Tools
Breaking down
Priority matrix
Habit stacking
Energy Tools
Spoon theory
Rest protocol
Energy mapping
Environment
Reduce distractions
Sensory aids
Body doubling
mindmap keyword((text))**bold**, *italic*, <br/> for line breaks[Square](Rounded)((Circle)))Cloud({{Hexagon}}Icons (⚠️ breaks in GitHub)
mindmap
root((Project))
Phase 1
::icon(fa fa-rocket)
Planning
Research
%%{init: {'theme':'forest'}}%%
timeline
title My Day - Time Blocked for ADHD
section Morning (High Energy)
7:00 AM : Wake up routine
: Medication + breakfast
8:00 AM : Deep work block
: Most important task
section Midday (Medium Energy)
12:00 PM : Lunch + movement break
1:00 PM : Meetings + collaboration
section Afternoon (Variable Energy)
3:00 PM : Admin tasks
: Email + light work
5:00 PM : Wrap up + tomorrow prep
timeline keywordtitle Your Title on second linesection are IGNOREDTimePeriod : Event1 or TimePeriod : Event1 : Event2section Section Name to group time periodsComments (⚠️ weird behavior)
%% renders as visible text (despite syntax highlighting)# for true inline comments<br/> for line breaks within eventsCritical Rule: Avoid colons in event descriptions - they conflict with timeline syntax.
When time periods are dates (Mon Nov 11, Thu Nov 13):
1230pm-3pm, 11am-2pm, 9am-12pmExamples:
timeline
section Morning
Thu Nov 13 : Bedroom Closets (1230pm-3pm)
: Therapy after (5pm-6pm)
Fri Nov 14 : MOVERS WALKTHROUGH (11am-2pm)
✅ Correct:
Thu Nov 13 : Meeting (1230pm-3pm) - no colon, includes pm on both timesFri Nov 14 : Walkthrough (11am-2pm) - clear am/pm markers❌ Incorrect:
Thu Nov 13 : Meeting (12:30-3pm) - colon conflicts with syntax, missing pm on first timeThu Nov 13 : Meeting (12:30pm-3pm) - colon breaks Mermaid parsingFri Nov 14 : Walkthrough (11-2pm) - missing am on first timeWhen time periods are times (7:00 AM, 12:00 PM):
8:00 AM : Morning routineWhy this matters: Timeline syntax uses colons to separate time periods from events. Using colons inside event descriptions confuses the parser and can cause rendering issues or misaligned elements.
%%{init: {'theme':'neutral'}}%%
quadrantChart
title Eisenhower Matrix - What to Focus On
x-axis Low Urgency --> High Urgency
y-axis Low Importance --> High Importance
quadrant-1 Do Now
quadrant-2 Schedule
quadrant-3 Delegate
quadrant-4 Delete
Client deadline: [0.9, 0.9]
Strategic planning: [0.2, 0.9]
Email: [0.7, 0.3]
Social media: [0.5, 0.1]
Quadrant Numbering (⚠️ clockwise from top-right)
quadrant-1: Top-right (high x, high y)quadrant-2: Top-left (low x, high y)quadrant-3: Bottom-left (low x, low y)quadrant-4: Bottom-right (high x, low y)Point Name: [x, y]Point:::className: [x, y] or inline radius: 12, color: #ff3300x-axis Labelx-axis Left --> Right%%{init: {'theme':'forest', 'themeVariables': {'pie1':'#81c784', 'pie2':'#64b5f6', 'pie3':'#ffb74d'}}}%%
pie showData
title Today's Energy Allocation (Spoon Theory)
"Deep work" : 30
"Meetings" : 20
"Admin tasks" : 15
"Breaks" : 20
"Buffer time" : 15
pie keywordshowData on second line (optional) displays values + percentagestitle Title Text (quotes optional)"Label" : Value - labels in double quotes, positive numbers onlyColor Assignment (⚠️ by size, not order)
pie1 = largest slice, pie2 = second largest, etc.themeVariables in directivestateDiagram-v2
[*] --> Resting
Resting --> Preparing: Decision to start
Preparing --> Focused: Begin task
Focused --> Break: Timer rings
Break --> Focused: Resume
Focused --> Done: Task complete
Focused --> Hyperfocus: Deep engagement
Hyperfocus --> Crashed: Energy depleted
Crashed --> Recovering: Rest period
Recovering --> Resting: Restored
Done --> [*]
note right of Hyperfocus
Watch for signs:
- Time disappears
- Forget to eat/drink
- Can't switch tasks
end note
stateDiagram-v2 (not v1)[*] represents start/end pointsMoving or state Moving or Still: DescriptionState1 --> State2: Event labelnote right of State (or left, right, left of)Composite States (nested)
stateDiagram-v2
[*] --> Working
state Working {
[*] --> Focused
Focused --> Break
Break --> Focused
}
Working --> [*]: End day
state choice <<choice>> for branching<<fork>> and <<join>> for parallel states-- separator between parallel groups[*] start/end states---
config:
sankey:
showValues: true
linkColor: 'gradient'
nodeAlignment: 'justify'
---
sankey-beta
Morning Energy,Deep Work,40
Morning Energy,Quick Tasks,20
Morning Energy,Reserve,10
Afternoon Energy,Meetings,30
Afternoon Energy,Admin,15
Afternoon Energy,Reserve,15
Evening Energy,Creative Work,20
Evening Energy,Rest,30
sankey-beta keyword (not sankey)source,target,value (exactly 3 columns)"Name, Inc",Target,10"He said ""Hi""",Target,5Configuration (in frontmatter only)
config:
sankey:
showValues: true # Display numbers on links
linkColor: 'gradient' # 'source', 'target', 'gradient', or hex
nodeAlignment: 'justify' # 'justify', 'center', 'left', 'right'
width: 800 # Diagram width in pixels
height: 600 # Diagram height in pixels
%%{init: {}}%% config causes errorsjourney
title Building a New Habit - ADHD Journey
section Week 1: Setup
Choose tiny habit: 5: Me
Set up reminder: 4: Me, App
First attempt: 3: Me
section Week 2: Struggle
Forget to do it: 2: Me
Add visual cue: 4: Me
Start seeing progress: 4: Me
section Week 3: Momentum
Feels automatic: 5: Me
Missing feels weird: 5: Me
journey keywordtitle Your Titlesection Section NameTask Name: <score>: <actors> (precise format)Problem: Generic errors in mindmaps, composites, Kanban Solution:
Problem: Diagram breaks when using "end" Solution: Use "End", "END", or any capitalization variant
Problem: Quotes, commas, unicode characters break rendering Solution:
"" for literal double quotes# + character codeProblem: Config doesn't apply or causes errors Solution:
%%{init: {}}%% directivesshowData in pie charts must be on line 2::icon() syntax for GitHub compatibilityProblem: Diagram feature not rendering Solution:
Problem: Data points not showing Solution:
Problem: Events don't appear Solution:
section are ignoredAsk clarifying questions if needed:
Based on the cognitive need, choose the appropriate diagram type from the comprehensive guide above. Consider:
After determining user need and mode:
Load template from mode-specific directory:
templates/neurodivergent/[pattern].mdtemplates/neurotypical/[pattern].mdApply mode characteristics:
Generate diagram:
User: "I need to clean my apartment but don't know where to start" (auto-detect → neurodivergent)
Pattern: task-breakdown
Template: templates/neurodivergent/task-breakdown.md
Characteristics: 3-5 minute tasks, compassionate language, energy indicators
Before generating the diagram, plan for:
forest or neutral theme for calming paletteclassDef for styling priority itemsCreate the Mermaid diagram following the selected pattern. Customize with:
After showing the diagram, include:
If the user wants to save visualizations:
obsidian:create tool to create a new note# Project Breakdown - [Project Name]
Created: [Date]
Energy level when created: [Level]
## How to use this
[Brief instructions]
## The Breakdown
[Mermaid code block]
## Next Actions
- [ ] [First concrete step]
## Notes
[Space for adjustments]
Users can request mode changes at any time:
The skill includes detailed reference files with specific patterns:
❌ Too many nodes/elements (>20 in flowchart, >8 in pie chart) ❌ More than 4-5 information chunks per section ❌ Bright, clashing colors or high-saturation palettes ❌ Competing visual elements fighting for attention ❌ Auto-playing animations or flashy effects ❌ Insufficient white space causing visual overwhelm ❌ Text walls without chunking or hierarchy
❌ Judgmental phrases: "just do it", "should be easy", "simply" ❌ Unrealistic time estimates (underestimate by 50%+) ❌ Vague goals: "work on project" (too abstract) ❌ Perfectionist standards: "must complete all steps" ❌ No acknowledgment of energy costs ❌ Making everything urgent/high-priority (creates paralysis)
❌ Creating diagrams without usage instructions ❌ Forgetting to validate with Mermaid tool before sharing ❌ Not offering to save to Obsidian/notes ❌ Skipping permission statements about modification ❌ Providing no encouragement or validation ❌ Creating one-size-fits-all solutions ❌ Ignoring user's current energy level
❌ Using icons ::icon() in GitHub-bound diagrams
❌ Directive config for Sankey diagrams
❌ Unicode characters in Sankey diagrams
❌ Lowercase "end" as state name
❌ Timeline events before first section
❌ Quadrant coordinates outside 0-1 range
❌ Forgetting showData on line 2 for pie charts
User: "I need to clean my apartment but it's so messy I don't know where to start"
forest theme (calming green)User: "Should I take this new job offer or stay at my current job? I've been thinking about it for weeks and can't decide"
User: "I have too many things on my plate and can't figure out what to do first"
User: "My day just disappears and I never get my important work done. Time management tools don't work for me"
User: "I want to start exercising but I always forget or can't get myself to do it"
User: "I'm always exhausted and don't know why I have no energy for things I need to do"
This skill is built on:
Active neurodivergent community innovation:
Key Insight: Designing for cognitive accessibility creates better experiences for everyone. Visual diagrams that work for ADHD brains represent excellent information design universally.
When providing links to edit Mermaid diagrams in online playgrounds (like https://mermaid.live), you MUST properly URL-encode the diagram content, especially HTML entities like <br/> tags.
<br/> TagsMermaid diagrams use <br/> for line breaks in node text. These MUST be encoded properly in URLs.
❌ BROKEN (angle brackets not encoded):
https://mermaid.live/edit#pako:flowchart TD
Start{Can decide<br/>in 3 seconds?}
✅ CORRECT (all characters properly encoded):
https://mermaid.live/edit#pako:flowchart%20TD%0A%20%20%20%20Start%7BCan%20decide%3Cbr%2F%3Ein%203%20seconds%3F%7D
Use Python's urllib.parse.quote() with safe='' to encode ALL special characters:
import urllib.parse
diagram = """flowchart TD
Start{Can decide<br/>in 3 seconds?}"""
encoded = urllib.parse.quote(diagram, safe='')
url = f"https://mermaid.live/edit#pako:{encoded}"
< → %3C> → %3E/ → %2F%20%0A{ → %7B} → %7DAlways include properly encoded playground links in your diagram output:
## 🎯 Master Decision Flowchart
[🎨 Edit in Playground](https://mermaid.live/edit#pako:{PROPERLY_ENCODED_DIAGRAM})
\`\`\`mermaid
{DIAGRAM_CODE}
\`\`\`
This allows users to:
Before providing a playground link, verify that:
<br/> tags display as line breaks (not literal <br/> text)If angle brackets appear as literal text in the rendered diagram, the URL encoding is broken.
<br/> tags and other HTML entities. Mode system supports neurodivergent/neurotypical base modes combined with optional accessibility modes. Configuration file support for personalized defaults.When user says... → Use this diagram type
✅ Use calming colors (forest/neutral theme)
✅ Limit to 3-5 chunks per section
✅ Be compassionate and realistic
✅ Validate with Mermaid tool
✅ Provide usage instructions
✅ Offer to save to Obsidian
✅ Properly URL-encode playground links (especially <br/> tags)
❌ Judgmental language ("just" or "should") ❌ Unrealistic time estimates ❌ Too many nodes/elements ❌ Bright clashing colors ❌ Skip encouragement and validation
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.