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)
| Shape |
Key |
Use Case |
| Rounded |
Default |
General ideas |
| Rectangle |
Structured |
Facts, definitions |
| Pill |
Stadium |
Tags, labels |
| Cloud |
Organic |
Brainstorms |
| Line |
Minimal |
Subtitles |
| Embedded |
Inset |
References |
| Hexagon |
Process |
Decision points |
| Octagon |
Warning |
Critical items |
Essential Keyboard Shortcuts
| Action |
Mac |
Description |
| New child |
Tab |
Add child to selected node |
| New sibling |
Return |
Add sibling after selected |
| New main |
Shift+Return |
Add root-level branch |
| Edit title |
Cmd+Return |
Enter contentEditable mode |
| Navigate |
Arrow keys |
Move between nodes |
| Fold/unfold |
Option+. |
Toggle subtree visibility |
| Cross-link |
Cmd+L |
Connect non-adjacent nodes |
| Mind map view |
Cmd+1 |
Switch to canvas view |
| Outline view |
Cmd+2 |
Switch to list view |
| Delete |
Backspace |
Remove node, re-parent children |
Theme Types
| Type |
Behavior |
Example |
| Dynamic |
Auto light/dark adaptation |
Elegant, Fresh |
| Static |
Fixed colors |
Rainbow, Goth Pastel, Twilight |
| Personal |
Extracted from current document |
User-defined |
Layout Directions
| Direction |
Root Position |
Tree Expands |
| Horizontal |
Left |
Rightward (default) |
| Vertical |
Top |
Downward |
| Compact |
Center |
Outward (dense) |
| Radial |
Center |
All directions (polar) |
Reference Files
Load these on demand based on what aspect of MindNode UI is needed.
Routing Table
| When working on... |
Load |
| Color palette, typography, visual language, Apple aesthetic |
references/design-system.md |
| Node shapes, SVG paths, contentEditable, Node Well |
references/node-types.md |
| Dynamic/static themes, per-level colors, theme gallery |
references/themes.md |
| Tree layout, D3 radial, auto-arrange, flexible positioning |
references/layout-algorithms.md |
| Keyboard shortcuts, focus mode, drag, outline sync |
references/interaction-patterns.md |
| Dual view (mind map + outline), canvas, connections, export |
references/canvas-and-views.md |
| ReactFlow custom nodes/edges, Zustand store, performance |
references/reactflow-integration.md |
| Porting to Project Pilot specifically |
references/project-pilot-porting.md |
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.
1---2name: mindnode-ui3description: Build MindNode-inspired mind mapping interfaces — 8 node shapes, 27+ themes, layout algorithms (horizontal, vertical, radial with D3), keyboard shortcuts, focus mode, dual view. React + xyflow/react v12 + Zustand + Tailwind. Triggers on mind map, visual thinking tool, node-based diagram, brainstorm canvas, MindNode.4---5
6# MindNode UI
7
8Build mind mapping interfaces inspired by [MindNode](https://www.mindnode.com/) — 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.
9
10## Key Design Principles
11
12- **Visual-first thinking** — spatial canvas for non-linear ideas, outline for linear structure
13- **Apple-native aesthetic** — soft rounded elements, generous whitespace, purple accent (#6C63FF)
14- **ADHD-friendly** — Focus mode isolates one subtree, Quick Entry captures ideas fast
15- **Keyboard-driven** — Tab=child, Return=sibling, arrows=navigate, no mouse required
16
17---
18
19## Quick Reference
20
21### Node Shapes (8)
22
23| Shape | Key | Use Case |
24|-------|-----|----------|
25| Rounded | Default | General ideas |
26| Rectangle | Structured | Facts, definitions |
27| Pill | Stadium | Tags, labels |
28| Cloud | Organic | Brainstorms |
29| Line | Minimal | Subtitles |
30| Embedded | Inset | References |
31| Hexagon | Process | Decision points |
32| Octagon | Warning | Critical items |
33
34### Essential Keyboard Shortcuts
35
36| Action | Mac | Description |
37|--------|-----|-------------|
38| New child | `Tab` | Add child to selected node |
39| New sibling | `Return` | Add sibling after selected |
40| New main | `Shift+Return` | Add root-level branch |
41| Edit title | `Cmd+Return` | Enter contentEditable mode |
42| Navigate | `Arrow keys` | Move between nodes |
43| Fold/unfold | `Option+.` | Toggle subtree visibility |
44| Cross-link | `Cmd+L` | Connect non-adjacent nodes |
45| Mind map view | `Cmd+1` | Switch to canvas view |
46| Outline view | `Cmd+2` | Switch to list view |
47| Delete | `Backspace` | Remove node, re-parent children |
48
49### Theme Types
50
51| Type | Behavior | Example |
52|------|----------|---------|
53| Dynamic | Auto light/dark adaptation | Elegant, Fresh |
54| Static | Fixed colors | Rainbow, Goth Pastel, Twilight |
55| Personal | Extracted from current document | User-defined |
56
57### Layout Directions
58
59| Direction | Root Position | Tree Expands |
60|-----------|---------------|-------------|
61| Horizontal | Left | Rightward (default) |
62| Vertical | Top | Downward |
63| Compact | Center | Outward (dense) |
64| Radial | Center | All directions (polar) |
65
66---
67
68## Reference Files
69
70Load these on demand based on what aspect of MindNode UI is needed.
71
72### Routing Table
73
74| When working on... | Load |
75|---------------------|------|
76| Color palette, typography, visual language, Apple aesthetic | [references/design-system.md](references/design-system.md) |
77| Node shapes, SVG paths, contentEditable, Node Well | [references/node-types.md](references/node-types.md) |
78| Dynamic/static themes, per-level colors, theme gallery | [references/themes.md](references/themes.md) |
79| Tree layout, D3 radial, auto-arrange, flexible positioning | [references/layout-algorithms.md](references/layout-algorithms.md) |
80| Keyboard shortcuts, focus mode, drag, outline sync | [references/interaction-patterns.md](references/interaction-patterns.md) |
81| Dual view (mind map + outline), canvas, connections, export | [references/canvas-and-views.md](references/canvas-and-views.md) |
82| ReactFlow custom nodes/edges, Zustand store, performance | [references/reactflow-integration.md](references/reactflow-integration.md) |
83| Porting to Project Pilot specifically | [references/project-pilot-porting.md](references/project-pilot-porting.md) |
84
85---
86
87## Key Implementation Patterns
88
89### Node Well (Primary Creation UX)
90
91The 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.
92
93→ See [references/node-types.md](references/node-types.md) for implementation details.
94
95### D3 Radial Tree Layout
96
97Compute tree positions with `d3.tree()`, then transform to polar coordinates:
98```
99x = radius × cos(angle − π/2)
100y = radius × sin(angle − π/2)
101```
102
103→ See [references/layout-algorithms.md](references/layout-algorithms.md) for full algorithm with code.
104
105### Per-Level Hierarchical Theming
106
107Each 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.
108
109→ See [references/themes.md](references/themes.md) for theme data structures and CSS generation.
110
111### Dual View Sync
112
113Mind map and outline views share a single data model. Changes in either view propagate immediately. Selection state syncs bidirectionally.
114
115→ See [references/canvas-and-views.md](references/canvas-and-views.md) for architecture and data model.
116
117---
118
119## Tech Stack Assumptions
120
121This skill assumes:
122- **React 18** with TypeScript
123- **@xyflow/react v12** for the canvas (custom nodes, edges, handles)
124- **Zustand** for state management (single store with slices)
125- **Tailwind CSS 3** with CSS custom properties (`var(--color-*)`)
126- **D3** (`d3-hierarchy`, `d3-shape`) for tree layout computation
127- **No Framer Motion on ReactFlow nodes** — RF manages transforms, FM would override them
128
129For Project Pilot–specific adaptation, see [references/project-pilot-porting.md](references/project-pilot-porting.md).
majiayu000