Skip to content
cccskills
FreePublished on GitHub

mindnode-ui

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.

The English summary is being prepared. Showing the original description.

See how to install

Files included (10)

  • SKILL.md5.5 KB
  • README.md240 B
  • references/canvas-and-views.md27.6 KB
  • references/design-system.md13.7 KB
  • references/interaction-patterns.md28.0 KB
  • references/layout-algorithms.md16.4 KB
  • references/node-types.md17.7 KB
  • references/project-pilot-porting.md31.8 KB
  • references/reactflow-integration.md30.5 KB
  • references/themes.md17.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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)

ShapeKeyUse Case
RoundedDefaultGeneral ideas
RectangleStructuredFacts, definitions
PillStadiumTags, labels
CloudOrganicBrainstorms
LineMinimalSubtitles
EmbeddedInsetReferences
HexagonProcessDecision points
OctagonWarningCritical items

Essential Keyboard Shortcuts

ActionMacDescription
New childTabAdd child to selected node
New siblingReturnAdd sibling after selected
New mainShift+ReturnAdd root-level branch
Edit titleCmd+ReturnEnter contentEditable mode
NavigateArrow keysMove between nodes
Fold/unfoldOption+.Toggle subtree visibility
Cross-linkCmd+LConnect non-adjacent nodes
Mind map viewCmd+1Switch to canvas view
Outline viewCmd+2Switch to list view
DeleteBackspaceRemove node, re-parent children

Theme Types

TypeBehaviorExample
DynamicAuto light/dark adaptationElegant, Fresh
StaticFixed colorsRainbow, Goth Pastel, Twilight
PersonalExtracted from current documentUser-defined

Layout Directions

DirectionRoot PositionTree Expands
HorizontalLeftRightward (default)
VerticalTopDownward
CompactCenterOutward (dense)
RadialCenterAll 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 aestheticreferences/design-system.md
Node shapes, SVG paths, contentEditable, Node Wellreferences/node-types.md
Dynamic/static themes, per-level colors, theme galleryreferences/themes.md
Tree layout, D3 radial, auto-arrange, flexible positioningreferences/layout-algorithms.md
Keyboard shortcuts, focus mode, drag, outline syncreferences/interaction-patterns.md
Dual view (mind map + outline), canvas, connections, exportreferences/canvas-and-views.md
ReactFlow custom nodes/edges, Zustand store, performancereferences/reactflow-integration.md
Porting to Project Pilot specificallyreferences/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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Search academic papers, build literature reviews, and synthesize research findings — combines Exa MCP (research_paper category, arxiv filtering) with arxiv-mcp-server for paper discovery, download, and deep analysis. Triggers on academic paper, literature review, research synthesis, arxiv, find papers, scholarly search.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

This skill should be used when creating, auditing, or maintaining AGENTS.md files and Codex CLI configuration for any project—including initializing AGENTS.md for cross-agent compatibility (Codex, Cursor, Copilot, Devin, Jules, Amp, Gemini CLI), generating config.toml or .rules files, scaffolding .agents/skills/, converting CLAUDE.md to AGENTS.md, or auditing existing agent configs for bloat and staleness. Complementary to codex-orchestrator (which executes subagents; this skill creates the config files they consume).

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

Academic research skill for Biblical Hebrew, Semitic linguistics, cuneiform studies, and comparative Ancient Near Eastern research. Provides Sefaria API for Hebrew Bible, CDLI/ORACC for cuneiform databases, and web discovery via Omnisearch, Exa, Firecrawl, and Obscura for finding scholarly sources across JSTOR, Perseus, Persée, Google Scholar, and academia.edu. Triggers on Hebrew quotes, cuneiform, Sefaria, ANE research, Minoan, search for scholarship, find papers, literature review, scholarly search, academic search, Genesis/Tehom, Ugaritic, Talmudic sources, extract from PDF, OCR academic.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

Build comprehensive ARCHITECTURE.md files following matklad's canonical guidelines — bird's-eye views, ASCII/Mermaid diagrams, codemaps, invariants, and layer boundaries. Triggers on document the architecture, create ARCHITECTURE.md, map this codebase, architectural overview.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

Generate physically-based atmospheric scattering shaders — sky domes, planetary atmospheres, LUT-optimized pipelines, depth-aware post-processing. Four modes — sky-dome, atmosphere-post, planet, lut. Triggers on atmospheric scattering, sky shader, sunset rendering, planet atmosphere, Rayleigh scattering, Mie scattering, volumetric sky, sky dome, atmosphere post-processing, aerial perspective, transmittance LUT, sky rendering, realistic sky, planetary rendering.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

See all skills by tdimino

Report a problem with this skill