surfertas

React RTK Plugin for Claude Code

Early Stage — This plugin is under active development. Features may change, and rough edges are expected.

A Claude Code plugin for React/Redux Toolkit/TypeScript development with agentic workflow orchestration, 21 specialist agents, and Iron Laws enforcement.

Instead of a single AI assistant doing everything in one context window, this plugin coordinates specialist agents that work in parallel — each with its own fresh context, domain expertise, and focused task. The result: deeper analysis, fewer hallucinations, and no context exhaustion on large features.

Installation

From GitHub (recommended)

# In Claude Code, add the marketplace
/plugin marketplace add surfertas/claude-react-rtk

# Install the plugin
/plugin install react-rtk

From Local Path (for development)

git clone https://github.com/surfertas/claude-react-rtk.git

# Option A: Add as local marketplace
/plugin marketplace add ./claude-react-rtk
/plugin install react-rtk

# Option B: Test plugin directly
claude --plugin-dir ./claude-react-rtk/plugins/react-rtk

Getting Started

New to the plugin? Run the interactive tutorial:

/rx:intro

It walks through the workflow, commands, and features in 4 short sections (~3 min).

Quick Examples

# Just describe what you need — the plugin detects complexity and suggests the right approach
> Fix the re-render loop in the user dashboard

# Plan a feature with parallel research agents, then execute
/rx:plan Add real-time notifications with WebSocket
/rx:work .claude/plans/real-time-notifications/plan.md

# Full autonomous mode — plan, implement, review, capture learnings
/rx:full Add user profile avatars with S3 upload

# 5-agent parallel code review (idioms, security, tests, verification, design)
/rx:review

# Quick implementation — skip ceremony, just code
/rx:quick Add pagination to the users list

# Structured bug investigation with 4 parallel tracks
/rx:investigate Stale data showing after mutation in checkout

# Project health audit across 5 categories
/rx:audit

# Trace component render paths to find re-render cascades
/rx:trace UserDashboard

# Detect unnecessary re-renders (React's N+1)
/rx:rerender-check

# Analyze import graph for circular deps and feature coupling
/rx:boundaries

The plugin auto-loads domain knowledge based on what files you're editing (React patterns for .tsx, RTK patterns for store files, accessibility rules for form code) and enforces Iron Laws that prevent common React/RTK mistakes.

Lifecycle Hooks

The plugin includes lifecycle hooks that run automatically — no configuration needed:

On session start:

• Detects incomplete plans and suggests resuming (/rx:work ...)
• Warns if your branch is behind origin/main
• Shows scratchpad notes from previous sessions
• Checks for running dev server (ports 3000, 5173, 8080)

On every file edit:

• Checks Prettier formatting (warn-only, never auto-fixes)
• Injects Security Iron Laws (#21-24) when editing auth/token/credential files
• Logs file modifications to active plan's progress.md
• Blocks auto-implementation after plan creation (forces user approval)

Before context compaction:

• Re-injects active plan context and phase-specific rules so they survive compaction
• Preserves plan slug, intent, and workflow discipline across long sessions

On session exit:

• Warns about plans with uncompleted tasks

How It Works

The Lifecycle

The plugin implements a Plan, Work, Review, Compound lifecycle. Each phase produces artifacts in a namespaced directory:

/rx:plan → /rx:work → /rx:review → /rx:compound
     │           │            │              │
     ↓           ↓            ↓              ↓
plans/{slug}/  (in namespace) (in namespace) solutions/

• Plan — Research agents analyze your codebase in parallel, then synthesize a structured implementation plan
• Work — Execute the plan task-by-task with automatic verification after each change
• Review — Five specialist agents audit your code in parallel (idioms, security, tests, build verification, design)
• Compound — Capture what you learned as reusable knowledge for future sessions

Key Concepts

• Filesystem is the state machine. Each phase reads from the previous phase's output. No hidden state.
• Plan namespaces. Each plan owns all its artifacts in .claude/plans/{slug}/ — plan, research, reviews, progress, scratchpad.
• Plan checkboxes track progress. [x] = done, [ ] = pending. /rx:work finds the first unchecked task and continues.
• One plan = one work unit. Large features get split into multiple plans. Each is self-contained.
• Agents are automatic. The plugin spawns specialist agents behind the scenes. You don't manage them directly.

Plan Namespaces

Every plan gets its own directory with all related artifacts: