Component Refactoring

langgenius/difyOfficial

This handles the messy work of breaking down overgrown React components in the Dify frontend. It kicks in when complexity scores hit 50+ or line counts exceed 300, using metrics from their analyze-component tooling. The patterns are practical: extract custom hooks for state management, split UI into focused sub-components, flatten nested conditionals with lookup tables, and pull modal management into dedicated hooks. It's opinionated about Dify's conventions, like where hooks live and how to use their existing form infrastructure. The refactor-component command generates structured prompts based on actual code analysis. If you're staring at a 500-line component wondering where to start cutting, this gives you a methodical approach that fits how Dify's codebase is already organized.

skills.sh installs

3.7K

GitHub stars

160.8K

last updated

Aug 21, 2026

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Recommended

More Frontend Development

1swiftui-ui-patternsdimillian/skillsBest practices and example-driven guidance for building SwiftUI views and components, including navigation hierarchies, custom view modifiers, and responsive la3.7Kskills.sh installs

2building-ui-bundle-appforcedotcom/sf-skillsMUST activate when the user wants to build, create, or generate a React application, React app, web application, single-page application (SPA), or frontend appl3.7Kskills.sh installs

3chakra-ui-builderchakra-ui/chakra-uiBuild responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable them3.6Kskills.sh installs

4shadcn-uijezweb/claude-skillsInstall and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semanti3.6Kskills.sh installs

5implementing-ui-bundle-agentforce-conversation-clientforcedotcom/sf-skillsUse this skill when the user asks to add, embed, integrate, configure, style, or remove an agent, chatbot, chat widget, conversation client, or AI assistant in 3.5Kskills.sh installs

6tailwind-theme-builderjezweb/claude-skillsSet up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever th3.3Kskills.sh installs