react
Apply advanced React patterns to manage shared state across component trees using Context providers without prop drilling, implement custom hooks for state and side effects with useState, useEffect, useMemo, and useCallback, and optimize performance via React.memo, prop comparisons, and memoized computations to eliminate unnecessary re-renders.
npx claudepluginhub thebushidocollective/han --plugin reactComponent Overview
Component Details
Skills (3)
Use when React Context patterns for state management. Use when sharing state across component trees without prop drilling.
Use when React Hooks patterns including useState, useEffect, useContext, useMemo, useCallback, and custom hooks. Use for modern React development.
Use when React performance optimization including memoization, lazy loading, and virtualization. Use when optimizing React applications.
README
Han
Ship-ready code from your AI coding agent. 139+ plugins for quality gates, tooling, memory, and specialized agents — so your AI writes code that's ready to merge.
Getting Started
Two commands. That's it.
# 1. Install the CLI
curl -fsSL https://han.guru/install.sh | bash
# 2. Auto-detect and install plugins for your project
han plugin install --auto
Next time you use Claude Code, validation hooks run automatically when you finish a conversation.
Alternative Installation
# Homebrew (macOS/Linux)
brew install thebushidocollective/tap/han
How It Works
- Install - One command installs the CLI and auto-detects plugins for your stack
- Code - Claude writes code as usual. No workflow changes needed
- Validate - Stop hooks run automatically. Linters, formatters, type checkers, and tests are all verified
- Learn - Local metrics track success rates and calibrate confidence. Nothing leaves your machine
Plugin Categories
139 plugins across six categories:
| Category | Description | Examples |
|---|---|---|
| Core | Essential infrastructure. Auto-installs han binary, provides metrics and MCP servers | Always required |
| Languages | Validation plugins for your language/runtime | TypeScript, Rust, Python, Go, Ruby |
| Validation | Linters, formatters, and quality tools | Biome, ESLint, ShellCheck, Pytest |
| Disciplines | Specialized AI agents for engineering domains | Security, accessibility, API design, architecture |
| Services | MCP servers for external platforms | GitHub, GitLab, Linear |
| Tools | MCP servers for development utilities | Playwright, Blueprints, Context7 |
Browse all plugins at han.guru/plugins
Why It Works
- Smart Caching - Only runs validation when relevant files change. Native Rust hashing keeps it fast
- Local Metrics - Tracks task success and confidence calibration. All data stays on your machine
- Zero Config - Binary auto-installs on first session.
--autoflag detects your stack automatically - Any Stack - TypeScript, Python, Rust, Go, Ruby, Elixir. If there's a linter, there's a plugin
CLI Commands
# Install plugins
han plugin install # Interactive mode
han plugin install --auto # Auto-detect your stack
han plugin install <name> # Install specific plugin
# Manage plugins
han plugin search <query> # Search marketplace
han plugin uninstall <name> # Remove plugin
# Run hooks manually
han hook run <plugin> <hook> # Run a specific hook
han hook explain # Show configured hooks
# MCP server
han mcp # Start MCP server for natural language hook execution
Documentation
Full documentation at han.guru/docs
Contributing
See CONTRIBUTING.md for how to create new plugins.
License
MIT License - see LICENSE
Built by The Bushido Collective
Similar Plugins
zustand
Comprehensive Zustand state management skills for React applications with store patterns, middleware, and TypeScript integration.
personal-skills
Personal development best practices skills for React, Effect-TS, and other frameworks. Enforces patterns, anti-patterns, and code quality guidelines.
react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing/reviewing/refactoring React code for optimal performance. Covers async patterns, bundle optimization, server/client components, re-render optimization.
nickcrew-claude-ctx-plugin
Optimizes context usage and improves Claude integration performance. Targets React development workflows.
react-native-dev
Use this agent when you need expert assistance with React Native development tasks including code analysis, component creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a React Native app and needs help with a navigation issue. user: 'My stack navigator isn't working properly when I try to navigate between screens' assistant: 'Let me use the react-native-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a React Native specific issue, use the react-native-dev agent to provide expert guidance on navigation problems.</commentary></example> <example>Context: User wants to create a new component that follows the existing app structure. user: 'I need to create a custom button component that matches our app's design system' assistant: 'I'll use the react-native-dev agent to create a button component that aligns with your existing codebase structure and design patterns' <commentary>The user needs React Native component development that should follow existing patterns, so use the react-native-dev agent.</commentary></example>
Help us improve
Share bugs, ideas, or general feedback.