nextjs-app-refactor

Splits mixed Server/Client Next.js pages into clean boundaries — extracts client logic into `*Client.tsx`, rewrites `page.tsx` as a pure Server Component, flags repeated JSX for componentisation, and detects styling inconsistencies across the codebase. Trigger on: refactor requests, mixed Server/Client files, pages >200 LOC with hooks, duplicated JSX, or any style drift between components.

1.02x

Quality

96%

Does it follow best practices?

Impact

98%

1.02x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

95%

Refactor the Portfolio Dashboard Page

Server/Client split refactor structure

Criteria

Without context

With context

Client file naming

100%

use client directive placement

100%

Hooks in client file only

100%

metadata in page.tsx

100%

Metadata import type

100%

page.tsx imports client component

100%

Page default export structure

50%

No placeholders

100%

All hooks and handlers moved

100%

No duplicate definitions

100%

Componentize the Resume Page

Repeated JSX extraction and naming

Criteria

Without context

With context

Work entry component extracted

100%

Education entry component extracted

100%

No generic numbered names

100%

Inline duplication removed

100%

Data-driven rendering

100%

No placeholders in output

100%

Component props typed

100%

Functionality preserved

100%

No duplicate definitions

100%

Education entries also refactored

100%

Audit the Design System Consistency

Styling consistency drift detection

Criteria

Without context

With context

Hex vs token flag (blue)

100%

Inline style color flag

100%

Mixed shadow flag

100%

Button component bypassed flag

100%

style override conflict flag

100%

File locations specified

100%

Proposed fixes included

100%

Report format

100%

No fixes applied

100%

Color/text inconsistency on h1

100%

Repository: renmaiv/nextjs-modularise
Commit: 58415cb

Evaluated: about 1 month ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Refactor the Portfolio Dashboard Page Componentize the Resume Page Audit the Design System Consistency

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.