mindnode-ui
Skill41 starsChanged 7 months agoMITView on GitHub
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.
Files
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.
In this repository99 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- agents-md-managerSkill
- architecture-md-builderSkill
- autoresearchSkill
- claude-agent-sdkSkill
- claude-md-managerSkill
- claude-usageSkill
- dag-typesafeSkill
- fableSkill
- glossarySkill
- openrouter-usageSkill
- react-best-practicesSkill
- skill-optimizerSkill
- stop-slopSkill
- tamarruSkill
- test-harness-auditorSkill
- user-model-builderSkill
- atmosphere-shaderSkill
- component-gallerySkill
- conductor-motionSkill
- design-auditSkill
- design-critiqueSkill
- design-mdSkill
- design-polishSkill
- gemini-claude-resonanceSkill
- gemini-forgeSkill
- gpt-atelierSkill
- grainientSkill
- image-forgeSkill
- image-wellSkill
- meshySkill
- minoan-frontend-designSkill
- nano-banana-proSkill
- overwatch-slidedeckSkill
- paper-designSkill
- particle-swarm-simSkill
- pellicolaSkill
- photo-to-slack-emojiSkill
- pretextSkill
- recordlySkill
- rocaille-shaderSkill
- scroll-cinemaSkill
- shadcnSkill
- shapeSkill
- smolvlmSkill
- speak-responseSkill
- sprite-forgeSkill
- threejs-particle-canvasSkill
- vellum-editorialSkill
- webgpu-threejs-tslSkill
- agent-browserSkill
- beautiful-mermaidSkill
- classical-887Skill
- claude-peersSkill
- cloudflareSkill
- codex-ctoSkill
- codex-orchestratorSkill
- disc-forgeSkill
- figma-mcpSkill
- linkedin-exportSkill
- The first 60 shown.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.