renmaiv/nextjs-app-refactor
Splits mixed Server/Client pages into separate files with clean boundaries — extracting client logic into a `<DescriptiveName>Client.tsx` and rewriting `page.tsx` as a pure Server Component — and flags repeated JSX structures for extraction into shared typed components. Apply when working in a Next.js App Router project and you detect `export const metadata` alongside `"use client"`, hooks in a Server Component, a page file that has grown unwieldy (>200–300 LOC) with interactive logic, or the same layout block duplicated inline multiple times.
97
97%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is an excellent skill description that clearly articulates specific concrete actions, provides explicit trigger conditions, and occupies a well-defined niche. It uses third-person voice throughout, includes natural developer terminology, and balances conciseness with comprehensive detail. The 'Trigger on:' clause effectively replaces a 'Use when...' pattern with equivalent explicit guidance.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: splits mixed Server/Client pages, extracts client logic into `*Client.tsx`, rewrites `page.tsx` as pure Server Component, flags repeated JSX for componentisation, and detects styling inconsistencies. | 3 / 3 |
Completeness | Clearly answers both 'what' (splits mixed pages, extracts client logic, rewrites as Server Component, flags JSX, detects styling issues) and 'when' with an explicit 'Trigger on:' clause listing five specific trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'refactor', 'Server/Client', 'hooks', 'duplicated JSX', 'style drift', 'pages >200 LOC', and Next.js-specific terms like 'page.tsx' and '*Client.tsx' that developers would naturally reference. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive — targets a very specific niche of Next.js Server/Client component boundary refactoring with concrete file naming conventions (`*Client.tsx`, `page.tsx`), making it unlikely to conflict with general refactoring or other framework skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
92%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a high-quality skill that is concise, actionable, and well-structured. It provides clear triggers, concrete code patterns, explicit validation steps, and a safety gate requiring approval before changes. The styling consistency detection table is a particularly effective use of structured content. Minor improvement could come from splitting the styling reference into a separate file if it grows.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Every section is lean and purposeful. No unnecessary explanations of what Next.js is, what hooks are, or how Server/Client components work conceptually. The table format for styling detection is efficient. Every token earns its place. | 3 / 3 |
Actionability | Provides executable code for the refactored page.tsx pattern, concrete naming conventions (FeatureNameClient.tsx), specific file paths (app/<route>/), concrete examples of what to flag (text-[#3B82F6] vs text-blue-500), and clear thresholds (>200-300 LOC, 2+ identical blocks). | 3 / 3 |
Workflow Clarity | The refactor steps are clearly sequenced (Create → Rewrite → Validate) with an explicit validation checkpoint at step 3. The skill also includes a confirmation gate before any action ('Wait for approval before modifying any file') and feedback loops for style drift detection (list → propose → wait for approval). | 3 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers and a table for styling categories, but everything is inline in a single file. The styling consistency detection section is fairly detailed and could potentially be split into a reference file, though the overall length is manageable. | 2 / 3 |
Total | 11 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
Reviewed
Table of Contents