component-extraction

What problem does it solve?

This Skill provides guidance on how to break down large, complex UI files into smaller, reusable components, improving code maintainability and developer productivity.

Core Features & Use Cases

• Component Extraction Strategies: Offers clear rules and patterns for deciding when and how to extract components.
• Code Examples: Demonstrates before-and-after scenarios for common UI patterns like filter panels, data tables, and form sections.
• Communication Patterns: Explains how extracted components can communicate effectively using props, events, stores, and context.
• Use Case: You have a Svelte page component that has grown to over 1000 lines of code, making it difficult to manage. Use this Skill to learn how to identify logical sections and refactor them into separate, reusable Svelte components.

Quick Start

Use the component-extraction skill to understand how to split a large Svelte page into smaller components.