Extract reusable UI components from large Svelte and React files.
npx skills add https://github.com/Br0ck25/betaroutes --skill component-extraction
Please help me install this Agent Skill. Skill: component-extraction Source: https://github.com/Br0ck25/betaroutes/tree/main/claude/skills/component-extraction Command: npx skills add https://github.com/Br0ck25/betaroutes --skill component-extraction
This Skill provides guidance on how to break down large, complex UI files into smaller, reusable components, improving code maintainability and developer productivity.
Use the component-extraction skill to understand how to split a large Svelte page into smaller components.
High-intent search queries and answers about installing and using this skill.
Extracting UI components involves identifying logical sections within large files, applying decision frameworks for code splitting, and establishing communication patterns using props, events, stores, and context to ensure the refactored components interact effectively.
The best way to decide when to split a React component is to use a component extraction decision framework that evaluates code organization, reusability, and maintainability to determine if a UI section warrants extraction into its own file.
Extracted UI components in Svelte communicate with parent files using established patterns such as passing data through props, dispatching events, utilizing shared stores, and leveraging context to maintain organization without a monolithic structure.
Yes, this componentization guidance applies to both React and Svelte frameworks, providing architectural patterns, extraction rules, and communication strategies that address UI refactoring and code splitting scenarios across these frontend environments.
A limitation of refactoring large frontend files is the increased complexity in managing inter-component communication, which requires careful implementation of props and event patterns to avoid disorganized data flow and maintain code maintainability.
AdhamHashimRefactor large Flutter widgets into smaller reusable files and deduplicate UI components.
d0whc3rReplace boolean props with compound components and context providers in React.
its-BasudebaProvide architectural guidance and code patterns for React and Next.js development.
hmzainjamilProcesses large sets of office documents with parallel execution and checkpointed resume.
