organize-page-specific-components
Installation
SKILL.md
Summary
Do not cram all logic and UI into the page entry point. Instead, build a page-specific structure by scoping components under components/pages/[PageName]/, preventing global namespace pollution.
Rationale
- Decomposition: Avoids monolithic page files by breaking down the UI into smaller, manageable pieces within the page's scope.
- Encapsulation: Components that are only relevant to a specific page should be co-located with that page's logic.
- Organization: Prevents the top-level
components/folder from becoming cluttered with single-use components. - Maintainability: Makes it obvious which components can be safely deleted when a page is removed.
Guidance
- Entry Point: Place the main page component at
components/pages/[PageName]/index.vue(or.tsx). - Internal Logic: Place private sub-components and logic in
components/pages/[PageName]/internals/. - Exports: Explicitly export shared types or constants from
components/pages/[PageName]/types.ts(or similar) if needed by other parts of the app. - Refactoring: If a component in
components/pages/...becomes useful elsewhere, promote it to a standardized shared directory (e.g.,components/ui/,components/shared/).