component-refactoring
by Charlie85270The component-refactoring skill helps you refactor high-complexity React components in the Dify frontend using analyzer-driven guidance. Use it when `pnpm analyze-component --json` shows complexity above 50, line count above 300, or when you need code splitting, hook extraction, or a safer component-refactoring guide instead of a generic rewrite.
This skill scores 84/100, which means it is a solid listing candidate for directory users who need a targeted React component refactoring workflow. The repository gives enough trigger rules, metrics, and pattern guidance to help an agent decide when to use it and how to start with less guesswork than a generic prompt.
- Explicit triggerability: use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, or when asked for code splitting/hook extraction.
- Operational workflow is concrete: it includes command examples, JSON output options, and a defined complexity threshold/target.
- Substantial guidance content: multiple reference docs cover component splitting, hook extraction, and complexity reduction patterns.
- Workflow is focused on the Dify frontend and `web/` paths, so it is less transferable outside that codebase.
- No install command or scripts are provided, so users must already have the related CLI tooling available in their environment.
Overview of component-refactoring skill
What component-refactoring does
The component-refactoring skill helps you refactor high-complexity React components in the Dify frontend without guessing where to start. It is built for cases where a component is already too large, too nested, or too hard to test cleanly, and you need a structured plan for splitting UI, extracting hooks, or reducing cognitive complexity.
When it is the right fit
Use the component-refactoring skill when pnpm analyze-component --json reports complexity above 50, line count above 300, or when the analyzer explicitly recommends refactoring before testing. It is also a good fit when the task is specifically about code splitting, hook extraction, or simplifying a component that has accumulated too many conditional branches.
What makes it useful
This skill is more decision-oriented than a generic refactor prompt. It gives you a workflow tied to Dify’s component analysis tools, plus concrete reduction patterns such as section-based splitting and hook extraction. That matters because the main failure mode in large React files is not syntax; it is preserving behavior while reducing coupling.
How to Use component-refactoring skill
Install and point it at the right repo
Install the component-refactoring skill with npx skills add Charlie85270/Dorothy --skill component-refactoring. The workflow assumes the Dify frontend layout, so run the commands from web/ and use paths relative to that directory, such as app/components/....
Start with analysis, not a rewrite
A strong component-refactoring usage flow is: analyze the component, inspect the generated prompt, then refactor only the parts that are actually driving complexity. Use pnpm analyze-component <path> --json to confirm the score and line count, and pnpm refactor-component <path> --json when you want a machine-readable refactoring brief. If the file is not over threshold, the skill may be unnecessary.
Read these files first
For practical component-refactoring guide value, read SKILL.md first, then the reference docs that explain the patterns behind the prompt: references/complexity-patterns.md, references/component-splitting.md, and references/hook-extraction.md. Those files tell you what the skill considers complexity and which kinds of changes actually reduce it.
Turn a rough goal into a better prompt
The skill works best when your input names the target component, the goal, and any constraints. For example, instead of “refactor this component,” say: “Refactor app/components/foo/index.tsx to reduce cognitive complexity below 50. Prefer extracting hooks for state/effects and splitting the modal section, but do not change behavior or public props.” That level of specificity improves the output because it tells the skill what to preserve and what to optimize.
component-refactoring skill FAQ
Is component-refactoring only for Dify?
Yes, the component-refactoring for Refactoring workflow is designed around Dify frontend conventions, command names, and component paths. You can adapt the ideas elsewhere, but the install and usage guidance is most valuable if you are working in that codebase or a very similar React monorepo.
Can I use it instead of a normal prompt?
You can, but the skill is better than a generic prompt when you need repeatable refactoring guidance tied to measurable complexity. A plain prompt may suggest broad cleanup; component-refactoring is more useful when you need the next action to be evidence-based and bounded by the analyzer output.
Do I need to be advanced to use it?
No. The skill is suitable for beginners who can identify a target file and run the analysis commands. The main requirement is that you can provide a specific component path and tell the model whether the priority is splitting, hook extraction, or lowering complexity.
When should I not use it?
Do not use the component-refactoring skill for simple components, third-party wrappers, or cases where you only want tests without changing structure. If a component is already readable and under the threshold, refactoring it may add unnecessary churn.
How to Improve component-refactoring skill
Give better input metrics
The fastest way to improve component-refactoring usage is to include the analyzer output in your request: complexity score, maxComplexity, lineCount, and any warning text. Those details help the skill focus on the real pressure point instead of treating every large file the same.
Specify the refactor style you want
If you want a particular result, say so up front. For example: “Split UI sections first,” “extract a custom hook for shared state/effects,” or “reduce conditional rendering in the main return.” This is better than a vague “make it cleaner” request because the skill can map your goal to the right pattern from the references.
Watch for the common failure modes
The biggest mistakes are over-splitting, moving logic without simplifying it, and changing behavior while chasing lower complexity. Stronger inputs reduce those risks: identify which props, side effects, and modal flows must stay stable, and ask for minimal external API changes.
Iterate after the first pass
After the first refactor, rerun pnpm analyze-component <path> --json and compare the score to the target. If complexity is still high, ask the skill to focus on the remaining branch-heavy block or a single hook candidate rather than reworking the whole file again.