mindnode-ui

name	mindnode-ui
description	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.

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