skills.rest
nghyane
nghyaneCOMMUNITY
Explore all skills by this author →
Website𝕏@nghyaneGitHub

refactor

Analyzes and refactors frontend codebases for structure, consistency, and dead code issues.

3|1|Updated Jan 12, 2026
Search Tags:#typescript#code review#refactoring#react#biome#dead code#component design
One-click install
npx skills add https://github.com/nghyane/VSTEP --skill refactor-nghyane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactor
Source: https://github.com/nghyane/VSTEP/tree/main/apps/_deprecated/frontend-v2/.agents/skills/refactor
Command: npx skills add https://github.com/nghyane/VSTEP --skill refactor-nghyane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Large frontend codebases accumulate design problems over time: oversized components, duplicated patterns, inconsistent styling, and dead code that nobody notices. This Skill provides a structured review workflow to find real design issues, report them clearly, and execute approved fixes safely. ## Core Features & Use Cases - Structured Analysis Workflow: Follows a six-step process from reading and understanding code, through analysis and reporting, to user-approved execution and verification. - Multi-Angle Review: Examines flow and UX gaps, component design (size, responsibility, copy-paste patterns), cross-page consistency, and dead code such as unused exports and unwired features. - Enforced Hard Limits: Applies concrete constraints like route pages under 80 lines, components under 300 lines, functions under 50 lines, and cn() for conditional classes. - Use Case: A React frontend has grown messy after months of feature work. Use this Skill to audit the codebase, get a report of oversized components and dead files, decide what to fix, and have the refactor verified with tsc and biome. ## Quick Start Ask the assistant to review the frontend codebase for refactoring opportunities and report oversized components, inconsistent patterns, and dead code before making any changes.

Frequently Asked Questions about refactor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I refactor a large React component?▼

First read the component and its context to understand the flow, then identify whether it mixes display, logic, and data fetching. Components over 300 lines should be split, and route pages over 80 lines should move logic into separate component files.

How to find dead code in a frontend codebase?▼

Look for exports that nothing imports, duplicated files, and features that were coded but never wired into the app. A systematic review of imports and render paths reveals code that can be safely removed.

What tools verify a TypeScript refactor is safe?▼

Run tsc --noEmit to confirm type correctness and biome check to validate lint and formatting rules. Both must pass after refactoring to confirm the changes did not break the codebase.

When should route page logic be moved to components?▼

Move logic out when a route page exceeds 80 lines. Route pages should stay thin, with business logic and rendering delegated to dedicated component files for better maintainability.

Does this refactoring approach change code automatically?▼

No. The workflow analyzes and reports problems first, then waits for the user to decide what to fix. Changes are only executed after explicit approval, keeping the developer in control of scope.

Related Skills

Explore More Software Engineering Skills→
rebyteai-templaterebyteai-template
15

express-typescript-starter

Set up an Express.js project with TypeScript, Biome, Docker, and Vitest.

Official
Intermediate
The-Vibe-CompanyThe-Vibe-Company
2.4k

implement

Implement work from a spec or tickets using TDD and code review.

Official
Basic
CuriousLearnerCuriousLearner
27

dead-code-detector

Detects and categorizes unused code, imports, and dependencies in six programming languages.

Community
Advanced
duanbiao2000duanbiao2000
3

react-modernization

Migrate React class components to hooks and adopt React 18 features.

Community
Advanced