🚀 Claude React Assistant (CRA)

Supercharge your React development with an AI-powered companion that lives in your terminal.

CRA is not just another wrapper; it's a specialized tool designed to analyze, refactor, document, and review React code using Claude — giving you expert-level insights and automation in seconds.

🧐 What is CRA?

CRA is your AI-powered shortcut to high-quality React code. It's a fully interactive CLI—you don't need to write a single word. Just select your workflow, pick your file, and let the AI do the heavy lifting.

• ⚡ Deeply Analyze unfamiliar components and catch subtle bugs before they hit production.
• ♻️ Refactor Safely with AI-guided transformations, automatic backups, and clear diff previews.
• 🧠 Automate the Boring Stuff like writing documentation and summarizing complex PRs.
• 💰 Stay Informed with transparent cost tracking for every single AI interaction.

✨ Why Choose CRA?

Modern React development is demanding. CRA solves the most common developer pains:

• Component Fatigue: Don't waste hours tracing prop drilling or state logic.
• Legacy Debt: Modernize old components to use Hooks, Memoization, and better patterns.
• Review Overload: Get a second pair of eyes on your PRs to catch risks and improve quality.
• Doc Drudgery: Generate beautiful, readable documentation without writing a single line of Markdown.

📦 Installation

Get started in seconds:

npm install -g claude-react-assistant

Or try it out instantly without installing:

npx claude-react-assistant

🚀 First Run Experience

Just type cra. If it's your first time, CRA will guide you through the setup.

Input

cra

Output

 ⚠️ No API key found.

◇  Claude API Setup
│
◇  Please enter your Anthropic API Key:
│  ************************************************
│
✅ Setup complete! Your key is saved in .env
👉 You can now run 'cra' to start your first workflow.

🧭 Main Interactive Menu

The guided experience makes powerful workflows accessible to everyone.

Output

? What do you want to do?
❯ 🔍 Analyze Code
  ♻️ Refactor Code
  🚀 Full Pipeline
  🧠 PR Review

🔍 Feature 1 — Deep Code Analysis

Get instant clarity on any React component. CRA identifies purpose, complexity, and potential issues.

Example Run

✔ What do you want to do? 🔍 Analyze Code
? Enter file path: src/App.tsx
? Do you want to configure advanced options? No

Real Output

{
	"summary": "A well-structured React TypeScript component for displaying user information with toggle functionality. Good accessibility practices and prop validation, but has some performance and maintainability concerns.",
	"issues": [
		"Inline styles object defined outside component causes unnecessary re-renders",
		"Missing null check for onToggleActive callback",
		"No error boundary or validation for invalid age values",
		"Hardcoded color values should use design tokens",
		"Button click handler creates new function on every render"
	],
	"complexity": "low"
}

♻️ Feature 2 — Intelligent Refactoring

Modernize and clean up your code with one command. CRA doesn't just change code; it improves it based on React best practices.

Interactive Diff Preview

CRA shows you exactly what changed before you commit.

🔴 import React from "react";
🟢 import React, { useCallback, useMemo } from "react";

🟢   const handleToggleClick = useCallback(() => {
    if (onToggleActive && !isLoading && !disabled) {
      onToggleActive(!isActive);
    }
  }, [isActive, onToggleActive, isLoading, disabled]);

  const buttonLabel = useMemo(
    () => `Toggle user status to ${!isActive ? "active" : "inactive"}`,
    [isActive]
  );

🚀 Feature 3 — Full Automation Pipeline

Run the entire suite—Analyze, Refactor, and Document—in one go. It's like having a senior engineer review and polish your code in real-time.

Workflow Example

🚀 Starting pipeline...

🔄 Reading file...
✅ Reading file complete (2ms)

🔄 Analyzer...
✅ Analyzer complete (4303ms)

🔄 Refactor...
✅ Refactor complete (6238ms)

🔄 Documentation...
✅ Documentation complete (6133ms)

🔄 Cost...
✅ Cost complete (0ms)

🎉 Pipeline completed!

🧠 Feature 4 — PR Review Assistant

Analyze your current git changes intelligently. Perfect for self-reviews or speeding up team approvals.

Input

✔ What do you want to do? 🧠 PR Review
✔ Do you want to configure advanced options? Yes
✔ Hide summary? No
✔ Hide risks? No
✔ Hide suggestions? No
✔ Hide cost summary? No
🚀 Running PR Review Pipeline...

Generated Artifacts

CRA populates an outputs/pr-review/ folder with structured insights:

• pr-summary.md: A high-level overview of changes.
• risks.json: Potential breaking changes or side effects.
• suggestions.md: Actionable improvements for the PR.

Example PR Summary

## Summary

This PR adds customizable output options for the PR Review pipeline, allowing users to selectively hide different analysis components and cost summaries.

## Key Changes

- ✨ **New PR Options**: Added `hideSummary`, `hideRisks`, `hideSuggestions`, and `hideCostSummary`.
- 🛠️ **CLI Logic**: File path prompt now intelligently skips for PR reviews.
- 🚀 **Pipeline Efficiency**: Conditional execution ensures only requested analyses are performed.
- 📊 **Type Safety**: Extended `PipelineOptions` interface for new PR-specific properties.

📝 Feature 5 — Auto-Documentation

Generate professional documentation for your components instantly.

Real Output Example

# UserCard Component

## Overview

Displays user information in a card layout with interactive status management. Optimized with `React.memo` and `useCallback` for high performance.

## Props (UserCardProps)

| Prop             | Type       | Default | Description                          |
| ---------------- | ---------- | ------- | ------------------------------------ |
| `name`           | `string`   | -       | **Required**. User's full name.      |
| `age`            | `number`   | -       | **Required**. User's age in years.   |
| `email`          | `string`   | -       | Optional email address.              |
| `isActive`       | `boolean`  | `false` | Current activity status.             |
| `isLoading`      | `boolean`  | `false` | Loading state for async operations.  |
| `onToggleActive` | `function` | -       | Callback triggered on status change. |

## Implementation Details

- **Performance**: Uses `useCallback` for event handlers and `React.memo` for the component export.
- **Accessibility**: Implements `aria-live="polite"` for status updates and `aria-label` for interactive buttons.
- **Styling**: Uses modular CSS (`UserCard.module.css`) for encapsulated styling.

💰 Feature 6 — Transparent Cost Tracking

Never wonder how much AI usage is costing you. CRA provides a detailed breakdown after every run.

[!NOTE] Costs are calculated based on the Claude 3.5 Haiku model (claude-3-5-haiku-20241022), optimized for speed and cost-efficiency.

Output

{
	"totalInputTokens": 24656,
	"totalOutputTokens": 3066,
	"estimatedCost": "$0.039986"
}

⚙️ Advanced Interactive Options

CRA is built for flexibility. Every workflow comes with guided advanced options to tailor the experience to your needs.

🛠️ Standard Pipeline Options

Available for Analyze, Refactor, and Full Pipeline:

• Output Format: Choose between markdown or json.
• File Writing: Control whether changes are written to disk.
• Diff Preview: Toggle the visual diff comparison.
• Backup: Automatically create .bak files before any write operation.
• Verbose Logs: See exactly what's happening under the hood.

🧠 PR Review Specialized Options

Specific to the PR Review workflow:

• Hide Summary: Skip the high-level PR overview.
• Hide Risks: Focus only on code changes, skipping risk analysis.
• Hide Suggestions: Get a summary without the AI-generated improvements.
• Hide Cost: Suppress the token and cost calculation.

🧠 Built-in AI Personas

CRA uses specialized skills to ensure the highest quality output:

• React Refactor Expert: Focused on Hooks, Performance, and Clean Code.
• React Analyzer Pro: Expert at finding edge cases and accessibility gaps.
• Code Documentation Expert: Writes docs that humans actually want to read.
• PR Review Analyst: Trained to spot risks in complex git diffs.

📁 Project Structure

claude-react-assistant/
├── cli/       # Interactive CLI & Commander logic
├── modules/   # Individual AI modules (Analyze, Refactor, etc.)
├── pipeline/  # Workflow engine
├── prompts/   # Specialized AI instructions
├── skills/    # AI persona definitions
├── utils/     # Claude API, Cost calc, File I/O
└── outputs/   # Where your reviews and docs live

🎯 Ideal For

• React Developers who want to move faster without sacrificing quality.
• Frontend Teams looking to standardize code reviews and documentation.
• Freelancers inheriting complex, messy legacy codebases.
• Productivity Junkies who prefer the terminal over browser-based AI tools.

🚀 Ready to transform your workflow?

cra

Choose your workflow and let Claude handle the rest.

📄 License

MIT