plan

Review and refactor Next.js/React code with JSDoc documentation.

Updated Mar 5, 2026
One-click install
npx skills add https://github.com/JFrangel/AI-Agents-Skills --skill plan-jfrangel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: plan
Source: https://github.com/JFrangel/AI-Agents-Skills/tree/main/public/skills/core/plan
Command: npx skills add https://github.com/JFrangel/AI-Agents-Skills --skill plan-jfrangel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenges of maintaining code quality, ensuring architectural integrity, and improving the overall codebase through strict refactoring, code review, and documentation.

Core Features & Use Cases

  • Strict Code Review: Enforces high standards for code quality and best practices.
  • Architecture Refactoring: Modifies and improves the modularity and structure of applications, particularly in Next.js/React.
  • JSDoc Documentation: Ensures code is well-documented with clear explanations and examples.
  • Use Case: When a React component becomes too large and complex, this Skill can help extract its logic into reusable hooks, improving maintainability and testability.

Quick Start

Refactor the current codebase to improve modularity and adhere to clean architecture principles.

Frequently Asked Questions about plan

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I refactor a large React component into reusable hooks?

To refactor a large React component, you extract its complex logic into reusable hooks to improve modularity, maintainability, and testability. This process analyzes execution environments and dependencies to ensure zero broken code.

What is clean code architecture in Next.js applications?

Clean code architecture in Next.js involves strict code review, modular structuring, and atomic refactoring to enforce high quality standards. It identifies execution environments and maps dependencies to maintain architectural integrity.

Does strict code review help enforce JSDoc documentation in TypeScript?

Yes, strict code review enforces mandatory JSDoc documentation with clear explanations and examples in TypeScript. It validates data models and ensures code is well-documented during atomic refactoring to maintain architectural integrity.

How do I analyze the impact of refactoring code in a Next.js application?

To analyze the impact of refactoring code in a Next.js application, you map dependencies, identify execution environments, and validate data models. This strict review process ensures atomic refactoring with zero broken code.

Can I use atomic refactoring to improve modularity without breaking existing React code?

Yes, you can use atomic refactoring to improve modularity without breaking existing React code by strictly validating data models and analyzing impact. It ensures zero broken code while enforcing high architectural standards.

When do I need to map dependencies for a React codebase review?

You need to map dependencies during a React codebase review when performing strict code review and architectural refactoring. It validates data models and ensures modular architecture changes do not break existing execution environments.