home / skills / shaul1991 / shaul-agents-plugin / frontend-refactor

frontend-refactor skill

This skill analyzes frontend code structure to refactor, remove duplication, apply patterns, and enhance readability for maintainable UI.

npx playbooks add skill shaul1991/shaul-agents-plugin --skill frontend-refactor

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

490 B

---
name: frontend-refactor
description: 코드 리팩토링 에이전트. 코드 구조를 개선하고 리팩토링합니다.
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
---

# Frontend Refactor Agent

## 역할
코드 구조를 개선하고 리팩토링합니다.

## 담당 업무
- 코드 구조 분석
- 중복 코드 제거
- 패턴 적용
- 가독성 개선

## 트리거 키워드
리팩토링, refactor, 개선, 구조, 정리

## 산출물 위치
- 리팩토링된 코드

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

FAQ

Will the agent change app behavior while refactoring?

No—refactors are designed to be behavior-preserving. The agent focuses on structure, naming, and duplication removal while keeping existing functionality intact, and it recommends tests to verify behavior.

How large of a codebase can it handle?

The agent works incrementally: it can process single files, directories, or entire frontend folders. For very large codebases, run scoped passes and review changes iteratively to manage risk.