Page & Component Structure

Organize React page and component structures by applying a thin wrapper page.tsx pattern, enforcing mandatory section comments, and extracting logic into custom hooks to improve readability, reusability, and onboarding.

The thin wrapper page.tsx pattern separates page composition from content rendering by keeping the page.tsx file minimal and moving state and rendering logic into a separate PageContent component.

Refactor a Next.js page by applying the thin wrapper pattern, adding explicit section comments for navigation, extracting logic into helpers, and standardizing JSX spacing to enforce consistent component architecture.

Extract logic into custom hooks and helpers to keep pages focused when the logic becomes complex, ensuring the component architecture remains clean, readable, and reusable across the codebase.

Yes, this pattern works for existing React codebases by guiding refactors of current page.tsx wrappers and UI components to enforce consistent JSX spacing, documentation, and structural standards.