js-pro

Plugin js-pro in Travis-Gilbert/claude-marketplace. Commands read from the repo's manifest — 1 month ago.

Skills (5)

• framework-migration

  Guided framework migration checklist — pick source and target framework, get a step-by-step migration plan with grep commands to find what needs changing.

• js-design

  Frontend design review and implementation guidance — leverages all JS-Pro framework references to evaluate architecture, patterns, and implementation quality.

• standards-component-design

  Component API design standards from Base-UI, Material-UI, and AG Grid — prop design, accessibility, composition, theming. Auto-loads for component library work.

• standards-d3

  D3.js visualization coding standards — v7 patterns, scale selection, data joins, SVG best practices, and anti-patterns. Auto-loads when D3 is in the tech stack.

• three-design

  3D web development planning and coding standards for Three.js, React Three Fiber, and D3+Three.js hybrid visualizations. Auto-loads when working with Three.js, R3F, or 3D visualization code. Covers scene setup patterns, performance rules, NPR rendering, D3-Three wiring, and the pmndrs ecosystem. Tri

Slash commands (1)

• /js-pro:style

  Switch the active D3 visual preset

Subagents (27)

• 3d-scene-designer

  Visual design specialist for 3D web scenes. Lighting, materials, camera composition, post-processing aesthetics, NPR/sketch rendering, and spatial UX. Use when the task is about how a 3D scene looks and feels, not the code mechanics. Covers three-point lighting setups, material language (PBR, flat,

• annotation-writer

  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, d3Callo

• build-engineer

  Use when configuring Webpack, Rollup, esbuild, or Vite — or when optimizing bundle size, build speed, code splitting, or module federation for JS/TS projects.

• cluster-math

  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 cluster

• d3-graph

  Guided D3.js graph creation — walks you through data shape, chart type selection, encoding choices, and generates a complete, verified D3 implementation. Covers standard charts (bar, line, scatter, area) and network graphs (force-directed, Sankey, chord, arc diagrams).

• data-analyst

  Use when building D3.js visualizations, Observable Plot charts, data-driven graphics, or any task requiring SVG rendering, scales, layouts, annotations, or data storytelling in the browser.

• force-tuner

  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 simul

• frontend-developer

  Use when building frontend applications with Alpine.js, HTMX, Web Components, vanilla CSS/HTML, or browser APIs — or any multi-framework frontend work outside of React/Next.js.

• hierarchy-builder

  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 packi

• interaction-engineer

  D3 interaction specialist. Use when implementing drag, zoom, pan, brush, tooltip, hover highlight, linked views, or any user interaction pattern in a D3 visualization. Knows the canonical Observable patterns for combining drag with zoom, brush selection, and linked highlighting. Trigger on: "drag,"

• javascript-pro

  Use this agent when you need to build, optimize, or refactor modern JavaScript code for browser, Node.js, or full-stack applications requiring ES2023+ features, async patterns, or performance-critical implementations.

• js-pro

  JS-Pro plugin hub — routes to the right JavaScript specialist agent based on your task. Start here if you're unsure which agent to use.

• knowledge-synthesizer

  Use when comparing JavaScript frameworks, synthesizing cross-framework patterns, extracting API migration guides, or answering questions that span multiple ~/.claude/js-pro/refs/ sources (e.g., 'how does React handle X vs Angular vs Alpine?').

• label-placer

  Text placement specialist for D3 visualizations. Use when adding labels or handling text overlap. Covers occlusion avoidance, force-based label placement, centerline labels, and context-appropriate labeling decisions (when to show labels vs. tooltips). For rich d3-annotation callouts, badges, thresh

• legacy-modernizer

  Use when migrating legacy JavaScript applications — jQuery to modern frameworks, AngularJS to React/Angular, CommonJS to ESM, JavaScript to TypeScript, or upgrading major framework versions.

• nextjs-developer

  Use this agent when building production Next.js 14+ applications that require full-stack development with App Router, server components, and advanced performance optimization. Invoke when you need to architect or implement complete Next.js applications, optimize Core Web Vitals, implement server act

• payment-integration

  Use when integrating Stripe, PayPal, or other payment gateways into JavaScript applications — Stripe.js elements, server-side Node.js webhook handling, subscription billing, or PCI-compliant checkout flows.

• platform-engineer

  Use when deploying Node.js applications, configuring Docker/serverless for JS projects, setting up CI/CD pipelines, or managing cloud infrastructure for frontend and full-stack JavaScript applications.

• product-manager

  Use when making product decisions about JavaScript application features — prioritizing frontend capabilities, choosing between framework approaches, defining MVP scope for JS-heavy products, or evaluating build-vs-buy for JS tooling.

• project-manager

  Use when coordinating multi-agent JavaScript development tasks — breaking down complex features into agent assignments, tracking cross-agent dependencies, or planning multi-phase JS project work.

• react-specialist

  Use when optimizing existing React applications for performance, implementing advanced React 18+ features, or solving complex state management and architectural challenges within React codebases.

• refactoring-specialist

  Use when you need to transform poorly structured, complex, or duplicated JavaScript/TypeScript code into clean, maintainable systems while preserving all existing behavior.

• seo-specialist

  Use when optimizing JavaScript applications for search engines — Core Web Vitals, structured data, meta tags in React/Next.js, SSR/SSG SEO strategy, or technical audits of JS-heavy sites.

• style-director

  Visual style director for D3 visualizations. Use to apply or switch aesthetic presets, select color schemes, tune stroke/fill treatments, and ensure output matches the intended aesthetic. Available presets: observable (default), sketch, editorial, dark, minimal. Also handles Observable Framework CSS

• three-developer

  Three.js and React Three Fiber implementation specialist. Use for building 3D scenes, WebGL rendering, instanced rendering for data visualization, camera systems, post-processing, D3+Three.js hybrid visualizations, custom GLSL shaders, and the pmndrs ecosystem (R3F, Drei, postprocessing, zustand). C

• typescript-pro

  Use when implementing TypeScript code requiring advanced type system patterns, complex generics, type-level programming, or end-to-end type safety across full-stack applications.

• ui-designer

  Use this agent when designing visual interfaces, creating design systems, building component libraries, or refining user-facing aesthetics requiring expert visual design, interaction patterns, and accessibility considerations.

Similar plugins