component-refactoring
Component Refactoring Skill
Refactor high-complexity React components with proven patterns and workflows.
Complexity Threshold: Components with cyclomatic complexity > 50 or line count > 300 should be candidates for refactoring.
Use When:
bun analyze-componentshows high complexity.- Users ask for "code splitting", "hook extraction", or "cleanup".
- A component file exceeds 300 lines of code.
Core Refactoring Patterns
1. Extract Custom Hooks
Goal: Separate UI from State/Logic.
Before:
More from first-fluke/fullstack-starter
fastapi-router-creator
Guide for creating and organizing FastAPI routes using a file-based routing system or modular router pattern. Helps organize complex API structures.
46ui-ux-pro-max
Advanced design intelligence for professional UI/UX. Use for implementing modern design patterns (Glassmorphism, Bento Grid), ensuring accessibility, and generating tailored design systems for web and mobile.
26frontend-code-review
Standardized checklist and process for reviewing frontend code (.tsx, .ts, .js).
23frontend-engineer
Develop production-grade frontend code using shadcn/ui, best practices, and strict design alignment.
17skill-lookup
Discover, retrieve, and learn about available Agent Skills. key capability for finding tools to solve specific problems.
16fastapi-templates
Production-ready FastAPI project templates and patterns. Use when starting new FastAPI projects, services, or adding standard components like auth, DB connection, or middleware.
15