React Modernization
Skill Verifiziert AktivUpgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
To guide developers through the process of modernizing React codebases, ensuring seamless upgrades, hook adoption, and integration of concurrent features.
Funktionen
- Upgrade React applications to latest versions
- Migrate class components to functional components with hooks
- Adopt concurrent React features (Suspense, transitions)
- Apply codemods for automated refactoring
- Provide examples for state management and lifecycle hooks
Anwendungsfälle
- Modernizing legacy React codebases
- Migrating to React Hooks for improved code structure
- Upgrading to React 18+ to leverage concurrent rendering features
- Automating refactoring tasks with codemods
Nicht-Ziele
- Performing the migration automatically without developer oversight
- Handling non-React JavaScript framework migrations
- Providing a full-stack development environment
Workflow
- Review React version upgrade paths and breaking changes
- Migrate class component state and lifecycle methods to hooks with provided examples
- Implement React 18 concurrent features like new root API, automatic batching, transitions, and Suspense
- Utilize provided codemod commands for automated refactoring
- Optionally, migrate to TypeScript with examples
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add wshobson/agents/plugin install framework-migration@claude-code-workflowsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
Layout Audit
100Layout and spacing audit covering grid, spacing consistency, density, responsive behavior
Deepinit
100Deep codebase initialization with hierarchical AGENTS.md documentation
Cleanup Cycles
100Detect and untangle circular dependencies. Runs madge/skott (TS), pycycle (Py), or compiler-only checks (Go/Rust). Auto-fixes leaf-extractable cycles; reports core cycles for human review. Use when the user asks to find circular imports, fix dependency cycles, or untangle module graph. Example queries — "find circular imports", "fix dependency cycles", "untangle our module graph", "why is madge complaining".
Netlify Identity
100Verwenden Sie dies, wenn die Aufgabe Authentifizierung, Benutzerregistrierungen, Anmeldungen, Passwortwiederherstellung, OAuth-Anbieter, rollenbasierte Zugriffskontrolle oder den Schutz von Routen und Funktionen beinhaltet. Verwenden Sie immer `@netlify/identity`. Verwenden Sie niemals `netlify-identity-widget` oder `gotrue-js` – diese sind veraltet.
Vue Router Best Practices
100Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.