react-rtk

Plugin react-rtk from marketplace surfertas in surfertas/claude-react-rtk. Commands read from the repo's manifest — 1 month ago.

Skills (7)

• accessibility

  WCAG accessibility patterns — semantic HTML, ARIA, focus management, keyboard navigation. Use when working with aria attributes, role attributes, dialog/nav elements, form elements, or focus management code.

• intent-detection

  Detect user intent from their first message and suggest the appropriate /rx: workflow command. Loaded automatically on session start.

• performance

  React performance patterns — memoization, code splitting, RTK Query cache tuning, Core Web Vitals. Use when working with React.memo, useMemo, useCallback, lazy loading, or optimizing render performance.

• react-patterns

  React component patterns, hooks rules, composition patterns. Use when editing .tsx/.jsx files, working in components/ or hooks/ directories, or creating new React components.

• redux-rtk

  Redux Toolkit and RTK Query patterns. Use when editing slice files, API definitions, store configuration, selectors, or any file importing from @reduxjs/toolkit.

• testing

  React Testing Library, MSW, and component/hook testing patterns. Use when editing test files (.test.tsx, .test.ts, .spec.tsx), test utilities, or MSW handlers.

• uiux-design

  UI/UX design system patterns — spacing scale, typography, color tokens, component states, responsive breakpoints, z-index, motion. Use when editing CSS modules, styled components, style directories, theme files, design tokens, tailwind config, or UI primitives.

Slash commands (21)

• /react-rtk:rx-audit

  Project health audit across 5 categories with parallel specialist agents. Scores architecture, performance, security, tests, accessibility.

• /react-rtk:rx-boundaries

  Analyze module boundaries — circular imports, feature coupling, barrel file bloat, dead exports. Maps the actual dependency graph.

• /react-rtk:rx-challenge

  Adversarial review — stress-test with edge cases, race conditions, accessibility failures, performance bottlenecks. The "grill me" mode.

• /react-rtk:rx-compound-learn

  Capture solved problem as reusable knowledge in .claude/solutions/. Makes patterns available for future sessions.

• /react-rtk:rx-design

  Design system initialization, audit, and management. Scans project for existing design tokens and generates references for the uiux-designer agent.

• /react-rtk:rx-document

  Generate documentation — JSDoc/TSDoc for components, README sections, ADRs, Storybook stories. Reads existing code and produces missing docs.

• /react-rtk:rx-full

  Full autonomous cycle — plan with parallel research, implement with verification, review with 4 parallel agents, capture learnings. Use for medium-to-large features.

• /react-rtk:rx-intro

  Interactive tutorial walkthrough — commands, agents, workflow, Iron Laws. ~3 minutes.

• /react-rtk:rx-investigate-component

  Structured bug debugging with parallel investigation tracks — state, rendering, network, and environment.

• /react-rtk:rx-learn

  Capture a lesson learned as a reusable rule. Updates common-mistakes.md so the same mistake is prevented in future sessions.

• /react-rtk:rx-plan

  Create sprint-based implementation spec with parallel research, Iron Law pre-checks, demoable outcomes per sprint, and approval gate. Replaces separate spec/plan workflows.

• /react-rtk:rx-props-audit

  Audit component props and state — oversized props, missing defaults, state that should live elsewhere, effect dependency issues.

• /react-rtk:rx-quick

  Fast implementation — skip planning ceremony. For small tasks that don't need parallel research.

• /react-rtk:rx-rerender-check

  Detect unnecessary re-render patterns — the React equivalent of N+1 queries. Finds components that re-render when they shouldn't.

• /react-rtk:rx-research

  Research React/frontend topics using web search — library comparison, API patterns, migration guides. Produces structured findings.

• /react-rtk:rx-review

  5-agent parallel code review — idioms, security, tests, verification, design. Produces consolidated report with blocker/warning/suggestion severity.

• /react-rtk:rx-techdebt

  Scan for technical debt — deprecated patterns, TODO/FIXME comments, outdated deps, inconsistent patterns, refactoring opportunities.

• /react-rtk:rx-trace

  Trace component render paths, prop drilling chains, and state flow. Builds visual dependency trees to find unnecessary re-renders and tight coupling.

• /react-rtk:rx-triage

  Interactive triage of review findings — prioritize, group, and assign severity. Converts raw review output into an actionable fix plan.

• /react-rtk:rx-verify

  Run full verification — TypeScript, ESLint, Prettier, tests, build.

• /react-rtk:rx-work

  Execute spec sprint-by-sprint, task-by-task with Iron Law checks and verification after each task. Finds first incomplete task and continues.

Subagents (21)

• accessibility-specialist

  WCAG 2.2 compliance, ARIA patterns, keyboard navigation, screen reader testing, focus management, color contrast.

• codebase-analyst

  Discovers existing patterns, conventions, and architecture in the codebase. ALWAYS spawned during planning. Finds what's already there so agents don't reinvent or contradict.

• context-supervisor

  Compresses multi-agent output to prevent context window overflow. Reads all worker files, applies size-based compression, deduplicates findings, writes consolidated summary.

• deep-bug-investigator

  Coordinate 4 parallel investigation tracks to diagnose complex React bugs. Spawned by /rx:investigate for bugs spanning state, rendering, network, and environment.

• import-analyzer

  Analyze import graph for circular dependencies, feature coupling, barrel file bloat, dead exports. Lightweight scanning agent used by /rx:boundaries.

• iron-law-judge

  Pattern-based Iron Law violation detection. Scans diffs and files for violations of non-negotiable rules defined in CLAUDE.md.

• npm-researcher

  Evaluate npm packages for quality, maintenance, security, and project fit. Used by planning-orchestrator for new dependency decisions and /rx:research --compare.

• parallel-reviewer

  Coordinates 5-agent parallel code review. Spawns react-reviewer, security-analyzer, testing-reviewer, verification-runner, and uiux-designer. Deduplicates findings via context-supervisor.

• performance-optimizer

  React rendering performance, bundle size, Core Web Vitals, memoization strategy, code splitting, lazy loading.

• planning-orchestrator

  Coordinates parallel research agents, then produces sprint-based implementation spec with demoable outcomes per sprint. Replaces separate /spec and /plan workflows.

• react-architect

  Component architecture, hooks design, rendering optimization, composition patterns. Invoked for any UI structure decisions.

• react-reviewer

  Code idioms review — React patterns, TypeScript usage, component composition, hook patterns, error handling.

• redux-rtk-specialist

  Redux Toolkit state architecture, RTK Query API design, selectors, middleware, normalization. Invoked for any state management decisions.

• render-tracer

  Trace component render paths, prop flow, and state subscriptions. Builds dependency trees showing re-render cascades. Used by /rx:trace.

• security-analyzer

  Frontend security analysis — XSS, CSRF, auth patterns, secrets exposure, URL parameter injection, dependency vulnerabilities.

• state-architect

  State management architecture — where state lives, normalization design, data flow between components, cache strategy. For major state refactors or new feature domains.

• testing-reviewer

  Test quality, coverage analysis, RTL patterns, MSW handlers, integration test design. Reviews test code and identifies coverage gaps.

• uiux-designer

  Design system architecture, visual hierarchy, spacing systems, color theory, responsive design, interaction patterns, motion design. Invoked for any visual/interaction decisions.

• verification-runner

  Runs TypeScript compiler, ESLint, Prettier, and test suite. Reports pass/fail with specific errors.

• web-researcher

  Research React ecosystem topics — npm packages, patterns, migration guides, known issues. Invoked when feature involves unfamiliar technology or library evaluation.

• workflow-orchestrator

  Full lifecycle coordinator for React/RTK features. Spawns planning, work, review, and compound phases. Use for /rx:full command.

Hooks (13)

• SessionStart

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/setup-dirs.sh

• SessionStart

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/check-scratchpad.sh

• SessionStart

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/check-resume.sh

• SessionStart

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/check-branch-freshness.sh

• SessionStart

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/detect-dev-server.sh

• SessionStart

  echo 'React/RTK plugin loaded — describe your task and I will suggest the right workflow'

• PostToolUse

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/format-check.sh

• PostToolUse

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/type-check.sh

• PostToolUse

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/security-reminder.sh

• PostToolUse

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/log-progress.sh

• PostToolUse

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/plan-stop-reminder.sh

• PreCompact

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/precompact-rules.sh

• Stop

  ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/check-pending-plans.sh

Similar plugins