mindnode-ui

# MindNode UI Build 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. ## 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 su...