By JNLei
Safely refactor React and TypeScript codebases using an agent that reorganizes files, breaks down large components, updates imports, fixes patterns like loading indicators, tracks project-wide dependencies, and includes review steps for structured improvements.
npx claudepluginhub JNLei/claude-tools --plugin code-refactor-masterOpen-source marketplace of Claude Code plugins (commands, hooks, agents, skills, MCPs, and bundles) in the standard Claude plugin layout.
.claude-plugin/marketplace.json — catalog of all plugins (regenerated from plugins/)plugins/ — actual plugins scoped by type:
commands/ — slash command pluginshooks/ — event hook plugins with hooks/hooks.jsonagents/ — subagent pluginsskills/ — Agent Skills with SKILL.mdmcp/ — MCP server plugins (.mcp.json)bundles/ — multi-component bundlesscripts/generate-marketplace.js — rebuilds the marketplace catalog from manifestsnode scripts/generate-marketplace.js
/plugin marketplace add ./
/plugin install dev-docs@claudesmith-marketplace
claude plugin validate .
Each plugin lives under plugins/<category>/<name>/ with a manifest at .claude-plugin/plugin.json and component directories at the plugin root (not inside .claude-plugin/).
Minimal manifest example:
{
"name": "my-plugin",
"version": "0.1.0",
"description": "What this plugin does",
"author": { "name": "Your Name" },
"license": "MIT",
"keywords": ["team", "feature"]
}
After adding files, run node scripts/generate-marketplace.js to refresh marketplace.json.
.claude-plugin/plugin.json required; keep paths relative; use ${CLAUDE_PLUGIN_ROOT} in scripts/hooks.hooks/hooks.json; scripts in scripts/ and executable.skills/<skill-name>/SKILL.md with frontmatter..mcp.json or mcpServers in manifest; commands may use npx or bundled binaries.keywords in plugin.json; generator merges category + keywords into marketplace tags.Refactor code following best practices and design patterns
Reorganizes project structure by cleaning root clutter, creating logical folder hierarchies, and moving files to optimal locations. Tracks dependencies and fixes broken imports/paths. Use PROACTIVELY when project structure becomes unwieldy or needs architectural cleanup.
Use this agent for expert assistance with web development tasks using React, Next.js, NestJS, and other modern web frameworks with TypeScript and Tailwind CSS. This includes code analysis, component creation, debugging, performance optimization, and architectural decisions. Examples: <example>Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are not rendering correctly' assistant: 'Let me use the web-dev agent to analyze your Next.js routing setup and provide a solution' <commentary>This is a Next.js-specific routing issue, so the web-dev agent will provide targeted guidance.</commentary></example> <example>Context: User needs a reusable React component with Tailwind CSS. user: 'I need a card component that matches my app's Tailwind-based design system' assistant: 'I'll use the web-dev agent to create a TypeScript-based React card component styled with Tailwind CSS, following your app's design patterns' <commentary>The user requires a component that aligns with their Tailwind CSS design system, so the web-dev agent ensures compatibility.</commentary></example>
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
Frontend development skill with design and implementation checklists
Advanced React skills for hooks, context, and performance optimization.
Refactor code following best practices and design patterns
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claim