Makes Claude Code extraordinarily good at building D3 visualizations that are mathematically accurate, physically believable, and aesthetically grounded in the Mike Bostock / Observable canon.
D3 annotation specialist using the d3-annotation library (Susie Lu). Use when adding callouts, labels, badges, thresholds, or any text annotation to a D3 visualization. Knows the full d3-annotation API from source: annotation types (d3Callout, d3CalloutElbow, d3CalloutCurve, d3CalloutCircle, d3CalloutRect, d3XYThreshold, d3Badge, d3Label), the three-layer architecture (Subject + Connector + Note), connector routing (line, elbow, curve) with end caps (arrow, dot), subject highlighting (circle, rect, threshold, badge), note alignment and wrapping, data-driven accessors, editMode for interactive positioning, and the customType() factory for building custom annotation types. Also handles annotation placement strategy, avoiding overlaps, and editorial annotation patterns. Trigger on: "annotate," "annotation," "callout," "label this," "add a note," "highlight this point," "d3-annotation," "callout arrow," "threshold line," "badge," "editorial annotation," or any request to add explanatory text, callouts, or visual highlights to data points in a D3 chart. <example> Context: User wants callout annotations on outlier data points user: "Add callout annotations pointing to the three highest values" assistant: "I'll use the annotation-writer agent to add d3-annotation callouts with proper connector routing." <commentary> Callout annotation request — annotation-writer knows the full d3-annotation API for precise placement. </commentary> </example> <example> Context: User wants an annotated threshold line on a chart user: "Draw a horizontal threshold line at $500K with a label" assistant: "I'll use the annotation-writer agent to create a d3XYThreshold annotation." <commentary> Threshold annotation — annotation-writer handles d3XYThreshold with proper subject configuration. </commentary> </example> <example> Context: User wants numbered badges on specific nodes user: "Put numbered badges (1, 2, 3) on the top three nodes" assistant: "I'll use the annotation-writer agent to place d3Badge annotations with numbered labels." <commentary> Badge annotation — annotation-writer knows the badge subject type with text, radius, and positioning. </commentary> </example> <example> Context: User wants to annotate a force graph with curved connectors user: "Annotate the hub nodes in my force graph with curved callout lines" assistant: "I'll use the annotation-writer agent to add d3CalloutCurve annotations with proper positioning." <commentary> Curved callout on dynamic layout — annotation-writer handles connector curve routing and force integration. </commentary> </example>
Statistical clustering and D3 visualization specialist. Use when the user needs to visualize cluster analysis results, implement clustering algorithms in JavaScript, or build visualizations that accurately represent algorithmic output from k-means, DBSCAN, HDBSCAN, agglomerative/hierarchical clustering, spectral clustering, or Gaussian mixture models. Also covers dimensionality reduction (t-SNE, UMAP, PCA) for projecting high-dimensional clusters into 2D. Trigger on: "cluster," "k-means," "DBSCAN," "dendrogram," "silhouette," "linkage," "centroid," "decision boundary," "convex hull," or any mention of scikit-learn clustering algorithms being visualized with D3. <example> Context: User has k-means results and wants to visualize clusters user: "Visualize these k-means cluster results with decision boundaries" assistant: "I'll use the cluster-math agent to create a proper cluster visualization with Voronoi decision boundaries." <commentary> Statistical clustering visualization — cluster-math bridges algorithm output and D3 rendering. </commentary> </example> <example> Context: User wants a dendrogram of hierarchical clustering user: "Build a dendrogram from this agglomerative clustering linkage matrix" assistant: "I'll use the cluster-math agent to convert the linkage matrix and render an interactive dendrogram." <commentary> Hierarchical clustering visualization — cluster-math handles linkage-to-hierarchy conversion. </commentary> </example> <example> Context: User has high-dimensional data and wants to see clusters user: "I have 50-dimensional data with cluster labels — how do I visualize it?" assistant: "I'll use the cluster-math agent to project with t-SNE/UMAP and render the cluster structure." <commentary> Dimensionality reduction + cluster visualization — cluster-math covers the full pipeline. </commentary> </example>
Core D3.js expertise agent. Use for layout selection, API guidance, module composition, data binding, and general D3 architecture questions. This is the default entry point for any D3 task. It routes to specialized agents when deeper expertise is needed (force-tuner for simulation tuning, hierarchy-builder for tree layouts, cluster-math for statistical visualization, interaction-engineer for drag/zoom/brush, label-placer for text, style-director for presets). Trigger on: any D3 visualization request, "build a chart," "create a visualization," "D3 layout," "which D3 module," "data binding," "SVG setup," or general D3 architecture questions. <example> Context: User wants to build a network visualization user: "Build a force-directed graph showing relationships between characters" assistant: "I'll use the d3-architect agent to design the visualization architecture and select the right D3 modules." <commentary> General D3 visualization request — d3-architect determines layout type, module composition, and routes to force-tuner for simulation specifics. </commentary> </example> <example> Context: User asks which D3 layout to use user: "I have hierarchical data with values at the leaves — what's the best way to visualize it?" assistant: "I'll use the d3-architect agent to evaluate layout options for your hierarchical data." <commentary> Layout selection question — d3-architect maps user intent to D3 layouts before routing to hierarchy-builder. </commentary> </example> <example> Context: User needs help with D3 data binding user: "My D3 join isn't updating correctly when the data changes" assistant: "I'll use the d3-architect agent to diagnose the data binding issue." <commentary> Core D3 API question about selections and joins — d3-architect territory. </commentary> </example>
Force simulation specialist. Use when tuning D3 force-directed layouts: charge strength, link distance, alpha decay, velocity decay, collision radius, centering forces, drag behavior, and simulation settling. Knows the exact configurations from canonical Observable examples. Trigger on: "force simulation," "force-directed," "forceLink," "forceManyBody," "forceCollide," "alpha decay," "drag behavior," "nodes flying off screen," "simulation won't settle," "force tuning," or any request to adjust physics parameters in a D3 layout. <example> Context: User has a force graph but nodes are flying off screen user: "My force-directed graph nodes keep flying off the edge" assistant: "I'll use the force-tuner agent to diagnose and fix the simulation physics." <commentary> Force simulation physics issue — force-tuner specializes in charge/collision/centering tuning. </commentary> </example> <example> Context: User wants the canonical Les Mis force graph user: "Build a force-directed graph of this network data" assistant: "I'll use the force-tuner agent to configure the simulation with proven Observable parameters." <commentary> Force graph construction — force-tuner provides exact configurations from Observable examples. </commentary> </example> <example> Context: User's simulation runs forever and won't settle user: "The simulation keeps running and never stops moving" assistant: "I'll use the force-tuner agent to fix the alpha decay and settling behavior." <commentary> Alpha/cooling issue — force-tuner understands the velocity Verlet integration and alpha management. </commentary> </example>
Hierarchical layout specialist. Use when building tree, treemap, circle packing, partition, sunburst, or cluster dendrogram visualizations with D3. Covers d3.hierarchy(), d3.stratify(), d3.tree(), d3.cluster(), d3.treemap(), d3.pack(), and d3.partition(). Trigger on: "tree," "treemap," "circle packing," "sunburst," "dendrogram," "hierarchy," "d3.hierarchy," "d3.stratify," "nested data," "parent-child," "org chart," "partition," "icicle," or any request involving hierarchical data visualization. <example> Context: User has nested JSON data and wants a treemap user: "Create a treemap from this hierarchical JSON data" assistant: "I'll use the hierarchy-builder agent to build the treemap with proper sizing and labeling." <commentary> Treemap is a hierarchical layout — hierarchy-builder knows d3.treemap() sizing model and tile strategies. </commentary> </example> <example> Context: User wants to visualize a file system structure user: "Show me the directory structure as a collapsible tree" assistant: "I'll use the hierarchy-builder agent to create an interactive tree layout." <commentary> Tree visualization of hierarchical data — hierarchy-builder handles d3.tree() and expand/collapse patterns. </commentary> </example> <example> Context: User has CSV with id and parentId columns user: "I have flat data with parent references — how do I make it work with D3 hierarchy layouts?" assistant: "I'll use the hierarchy-builder agent to convert tabular data using d3.stratify()." <commentary> Tabular-to-hierarchy conversion — hierarchy-builder knows d3.stratify() patterns. </commentary> </example>
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Most Claude Code plugins give you a set of slash commands and some domain knowledge. These plugins do something different: they learn.
Each plugin in this repo is a domain-specialized engineering intelligence that accumulates knowledge across sessions, grounds itself in real library source code (not training data), and coordinates with a companion chat skill on Claude.ai. The plugin implements. The chat skill plans. Over time, the plugin gets better at its job because it tracks what works, what doesn't, and what it's still uncertain about.
This is the two-surface architecture: one surface for thinking, one for building.
A typical plugin contains four layers:
Specialist agents and slash commands. Each plugin ships with 3 to 7 agents that handle specific subtasks. UI-Design-Pro has a design critic, a component builder, an accessibility auditor, an animation engineer, and a visual architect. Django-Engine-Pro has agents for model design, ORM optimization, migration planning, and MCP server exposure. Agents compose in defined sequences: you always run the stack detector before the component builder, always run the design critic after.
Source-code references. Plugins include install.sh scripts that shallow-clone real library repos into a local refs/ directory. When UI-Design-Pro needs to know how Radix handles focus restoration, it greps the actual Radix source, not its training data. When D3-Pro needs to verify a scale constructor's API, it reads the Observable source directly. This matters because training data goes stale. Source code doesn't.
Skills and decision frameworks. Static knowledge: inheritance decision tables, ORM anti-pattern catalogs, polymorphic rendering rules, animation physics constants. These encode the expert judgment that doesn't change between sessions.
An epistemic knowledge layer. This is the part that learns. Each plugin maintains a knowledge/ directory containing typed claims in JSONL, confidence scores, session logs, and (for some plugins) SBERT embeddings. Claims start as drafts. After review, they become active. Active claims carry Bayesian confidence that updates based on session outcomes: when a suggestion informed by a claim gets accepted, confidence rises; when it gets rejected, confidence drops. Over time, each plugin develops its own body of verified, weighted knowledge about its domain.
Each plugin here has a counterpart: a chat skill that runs on Claude.ai (or Claude Desktop). The division of labor is deliberate.
The chat skill handles planning, reasoning, and decision-making. When you're deciding between DRF and Ninja for an API, or choosing an inheritance strategy for a model hierarchy, or evaluating whether a component needs polymorphic rendering, the chat skill walks you through the tradeoffs and produces a structured handoff document.
The Claude Code plugin handles implementation and learning. It takes the handoff document, builds the thing, greps real source code when it needs to verify an API, logs what it tried, and updates its knowledge base with what it learned.
The chat skill never sees knowledge/claims.jsonl. The plugin never produces planning documents. Each surface does what it's good at.
| Chat Skill (Claude.ai) | Claude Code Plugin |
|---|---|
| Decision frameworks | Slash commands and agents |
| Tradeoff analysis | Source-code grepping |
| Structured handoff docs | Implementation and testing |
| Domain reasoning | Session logging and learning |
| Static (expert knowledge) | Dynamic (knowledge that evolves) |
Every plugin with a knowledge/ directory runs the same protocol:
Session start: Read manifest.json for current state. Load active claims sorted by confidence. Check tensions.jsonl for unresolved conflicts in the task's domain. Surface tensions before making decisions, not after.
During work: Track which claims informed each suggestion. Note when the user accepts, modifies, or rejects a recommendation.
Session end: Write observations to session_log/. Flag contradictions as tension signals. Note recurring patterns the knowledge base doesn't yet cover.
The knowledge types are borrowed from Theseus (a separate epistemic engine project):
Current knowledge stats across the fleet:
| Plugin | Total Claims | Active | Avg Confidence |
|---|---|---|---|
| UI-Design-Pro | 140 | 135 | 0.667 |
| Django-Engine-Pro | 111 | 29 | 0.75 |
npx claudepluginhub travis-gilbert/claude-marketplace --plugin d3-proMakes Claude Code extraordinarily good at transforming websites into applications: converting page-based Next.js sites into app-like experiences with persistent layouts, command palettes, and background sync; wrapping them in Tauri desktop shells with native OS integration; and producing architecture handoffs for native Swift/AppKit macOS apps.
Makes Claude Code genuinely good at designing knowledge-graph answer experiences with cosmos.gl on top of DuckDB-WASM, Mosaic, and vgplot. Owns the SceneDirective adapter, the three-picker ControlDock (Position, Weight, Edges), and the recipe library that turns novel ideas into usable images.
Git and deployment automation with verification at every step. Staged file review, conventional commits, pre-commit checks, push with CI/CD detection, and post-deploy health verification.
Next.js specialist with two tracks: Development (feature implementation with source-verified APIs) and Diagnostic (error tracing through the framework's actual source code).
Mobile app development specialist: PWA retrofitting, React Native architecture, offline-first sync, mobile API design, touch optimization, and mobile visualization adaptation.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Multi-model consensus engine integrating OpenAI Codex CLI, Gemini CLI, and Claude CLI for collaborative code review and problem-solving.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.
Write feature specs, plan roadmaps, and synthesize user research faster. Keep stakeholders updated and stay ahead of the competitive landscape.
Curate auto-memory, promote learnings to CLAUDE.md and rules, extract proven patterns into reusable skills.