MindNode UI

Build mind mapping interfaces inspired by MindNode — the Apple-native visual thinking app by IdeasOnCanvas GmbH. This skill encodes MindNode's design system, interaction model, and layout algorithms, adapted for React + ReactFlow + Zustand + Tailwind CSS 3.

Key Design Principles

• Visual-first thinking — spatial canvas for non-linear ideas, outline for linear structure
• Apple-native aesthetic — soft rounded elements, generous whitespace, purple accent (#6C63FF)
• ADHD-friendly — Focus mode isolates one subtree, Quick Entry captures ideas fast
• Keyboard-driven — Tab=child, Return=sibling, arrows=navigate, no mouse required

Quick Reference

Node Shapes (8)

Essential Keyboard Shortcuts

Theme Types

Layout Directions

Reference Files

Load these on demand based on what aspect of MindNode UI is needed.

Routing Table

Key Implementation Patterns

Node Well (Primary Creation UX)

The plus button appearing on hover/selection that creates a child node. This is MindNode's signature interaction — not a toolbar, not a menu, but a contextual affordance on each node.

→ See references/node-types.md for implementation details.

D3 Radial Tree Layout

Compute tree positions with d3.tree(), then transform to polar coordinates:

x = radius × cos(angle − π/2)
y = radius × sin(angle − π/2)

→ See references/layout-algorithms.md for full algorithm with code.

Per-Level Hierarchical Theming

Each theme defines colors per depth level: root (prominent), level 1 (branch colors, cycled from palette), level 2+ (progressively softer). Branch children inherit their parent's color family.

→ See references/themes.md for theme data structures and CSS generation.

Dual View Sync

Mind map and outline views share a single data model. Changes in either view propagate immediately. Selection state syncs bidirectionally.

→ See references/canvas-and-views.md for architecture and data model.

Tech Stack Assumptions

This skill assumes:

• React 18 with TypeScript
• @xyflow/react v12 for the canvas (custom nodes, edges, handles)
• Zustand for state management (single store with slices)
• Tailwind CSS 3 with CSS custom properties (var(--color-*))
• D3 (d3-hierarchy, d3-shape) for tree layout computation
• No Framer Motion on ReactFlow nodes — RF manages transforms, FM would override them

For Project Pilot–specific adaptation, see references/project-pilot-porting.md.