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.
97
96%
Does it follow best practices?
Impact
98%
1.02xAverage score across 3 eval scenarios
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.
- Repository
- renmaiv/nextjs-modularise
- Commit
58415cb
- Reviewed
Table of Contents
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.