Component Refactoring

by Ohh-889

Component Refactoring is a Quality skill for Claude Code, published by Ohh-889 in skyroc-admin.

786 stars169 forkson Ohh-889/skyroc-adminAdded 2026/07/20Repository updated 2026/07/22

View source on GitHub Download repo ZIP

adminantdreactreact-adminreact19tanstack-querytanstack-router

Install in seconds

Install Component Refactoring

Copy Component Refactoring into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/Ohh-889/skyroc-admin/tree/master/.agents/skills/component-refactoring ~/.claude/skills/component-refactoring

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/Ohh-889/skyroc-admin.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: .agents/skills/component-refactoring/SKILL.md in Ohh-889/skyroc-admin
Installs to: ~/.claude/skills/component-refactoring
Collection: One of 20 skills cataloged from this repository
Category: Quality — 1897 skills

What Component Refactoring does

Refactors high-complexity React components in the Dify frontend codebase using patterns like hook extraction, sub-component splitting, and conditional simplification. Apply when component complexity exceeds thresholds or before testing.

Component Refactoring is cataloged under Quality on DirSkills. Component Refactoring comes from a repository tagged admin, antd, react, react-admin and react19.

Documentation

README

Excerpt

Dify Component Refactoring Skill

Refactor high-complexity React components in the Dify frontend codebase with the patterns and workflow below.

Complexity Threshold: Components with complexity > 50 (measured by pnpm analyze-component) should be refactored before testing.

Quick Reference

Commands (run from `web/`)

Use paths relative to web/ (e.g., app/components/...). Use refactor-component for refactoring prompts and analyze-component for testing prompts and metrics.

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Component Refactoring

What else does Ohh-889 publish alongside Component Refactoring?
Component Refactoring is one of 20 skills that DirSkills catalogs from Ohh-889/skyroc-admin, the repository it ships in. Its siblings there include Code Simplifier, Code Simplifier and Component Doc. Each one is a separate skill with its own page in this directory, installs the same way Component Refactoring does, and is maintained by Ohh-889 in that same repository. The rest of the collection is listed on the Ohh-889/skyroc-admin page.
How does Component Refactoring compare to other Quality skills?
Component Refactoring ranks #984 by stars among the 1897 Quality skills in this catalog. The most-starred ones next to it are Benchmark, Benchmark Optimization Loop and API Design Patterns. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Component Refactoring against them. Open each page to compare what they document and how they install.