frontend-refactor_skill

Overview

This skill is a frontend refactor agent that improves code structure, reduces duplication, and increases maintainability. It focuses on applying consistent patterns, simplifying component logic, and enhancing readability without changing behavior. The agent produces refactored code ready to integrate into your project.

How this skill works

The agent analyzes the frontend codebase to detect structural issues, repeated logic, and anti-patterns. It proposes and applies refactorings such as component extraction, utility creation, and naming normalization. Changes prioritize minimal risk: tests and usage patterns are preserved and small, reviewable diffs are produced.

When to use it

• Before major feature development to reduce technical debt
• When you see repeated logic across components or pages
• When component complexity or file size grows beyond maintainable limits
• Prior to a performance audit or UI redesign
• When onboarding new team members to simplify the codebase

Best practices

• Run automated tests and snapshot checks before applying refactors
• Scope refactors to small, reviewable commits to ease code review
• Document public API changes for components and utilities
• Prefer explicit, well-named abstractions over clever one-off utilities
• Keep visual and behavioral tests to ensure refactors are behavior-preserving

Example use cases

• Extract shared UI patterns from multiple pages into reusable components
• Remove duplicated data-fetching logic into a single hook or service
• Rename and reorganize folders to reflect feature boundaries
• Simplify complex component render logic by splitting into smaller subcomponents
• Convert inline styles or repeated CSS into shared style modules