Mindnode Ui

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](references/design-system.md) | | Node shapes, SVG paths, contentEditable, Node Well | [references/node-types.md](references/node-types.md) | | Dynamic/static themes, per-level colors, theme gallery | [references/themes.md](references/themes.md) | | Tree layout, D3 radial, auto-arrange, flexible positioning | [references/layout-algorithms.md](references/layout-algorithms.md) | | Keyboard shortcuts, focus mode, drag, outline sync | [references/interaction-patterns.md](references/interaction-patterns.md) | | Dual view (mind map + outline), canvas, connections, export | [references/canvas-and-views.md](references/canvas-and-views.md) | | ReactFlow custom nodes/edges, Zustand store, performance | [references/reactflow-integration.md](references/reactflow-integration.md) | | Porting to Project Pilot specifically | [references/project-pilot-porting.md](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](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](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](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](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](references/project-pilot-porting.md).

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: tdimino
• Source: tdimino/claude-code-minoan
• License: MIT
• Homepage: https://www.minoanmystery.org

Install and usage instructions live in the source repository linked above.