Mindnode ui
Skill tdimino/claude-code-minoan/skills/design-media/mindnode-ui
A curated ~/.claude/ configuration for professional development workflows — 90+ skills, 46 hooks, and CLI tools
npx -y skills add tdimino/claude-code-minoan --skill mindnode-uiAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
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.
SKILL.md
5.5 KB, as published. Nobody here has run it
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.