Always: Confirm Before Acting

State: what was detected, why it's a problem, what you'll change. Wait for approval before modifying any file.

Core Rules

• metadata never in a "use client" file — use layout.tsx if it spans multiple routes
• Hooks (useState, useEffect, useRouter, etc.) must live in Client Components
• No partial refactors, duplicate component definitions, or JSX outside component scope
• Same JSX structure 2+ times inline → extract into a named component

When to Refactor

• metadata in a Client Component, or Server/Client concerns mixed in one file
• Page >200–300 LOC with hooks
• User says "refactor"
• Style drift detected (see below)

Refactor Steps

1. Create app/<route>/<FeatureName>Client.tsx — move "use client", all hooks, JSX, handlers
2. Rewrite page.tsx:

import type { Metadata } from 'next';
import FeatureNameClient from './FeatureNameClient';
export const metadata: Metadata = { /* ... */ };
export default function Page() { return <FeatureNameClient />; }

3. Validate — no "use client" or hooks in page.tsx, no syntax errors, project builds

Repeated Structure Detection

Flag 2+ JSX blocks with identical structure (same wrapper, classNames, child layout) differing only in data values, or .map() calls rendering >3 elements per item. Extract into a domain-named component (ProjectSection, WorkEntry) — not Section1. Confirm before extracting.

Styling Consistency Detection

During any refactor or property change, scan for drift. Flag when 2+ places share an apparently intentional value but express it inconsistently.

When detected: list affected files/locations, propose a CSS variable/Tailwind token or base component, wait for approval.

Output

Full file contents only. No placeholders. Code must compile.