KIMJINWOO4 Vue Clean Components
Rules for writing Vue 3 components that are easy for humans to read and maintain. Based on Michael Thiessen's Clean Components Toolkit + toss.tech Core-Adapter pattern.
When to Use
- Writing or refactoring Vue components
- A component exceeds 150 lines
- Props exceed 5 or include 3+ handler functions
- A composable exceeds 200 lines or mixes unrelated lifecycle concerns
- A store mixes UI state with business state
- User requests "component split", "refactor", or "readability improvement"
Quick Reference
| Working on... | Load file |
|---|---|
| Deciding component level | references/component-levels.md |
| When/how to split | references/split-decision-tree.md |
| Composable structure | references/composable-lifecycle.md |
| Core-Adapter separation | references/core-adapter.md |
| Props drilling fix | references/props-resolution.md |
| Store boundaries | references/store-boundary.md |
| Boilerplate extraction | references/boilerplate-extraction.md |
Key Principles
- Every component has a level (L0-Page → L4-Atomic) with strict responsibility boundaries
- Composable = lifecycle cohesion unit — group related ref + watch + cleanup together, like React hooks
- Core-Adapter separation — business logic in pure TypeScript, Vue reactivity in thin composables
- No props drilling beyond 1 level — use provide/inject or store
- Store holds only shared business state — UI-only state stays in components
- Extract boilerplate at 3+ repetitions — never prematurely
Pattern Sources
| Rule | Source |
|---|---|
| Level Hierarchy | Controller + Humble Components (Thiessen) |
| Split Decision | Long Components + Hidden Components (Thiessen) |
| Core-Adapter | Thin Composables (Thiessen) + Framework Agnostic (toss.tech) |
| Lifecycle Cohesion | React Custom Hooks principle |
| Props Resolution | Props Down Events Up + Preserve Whole Object (Thiessen) |
| Store Boundary | Data Store + Lightweight State Management (Thiessen) |
| Conditional Split | Extract Conditional + Strategy (Thiessen) |
| Loop Split | List Component + Item Component (Thiessen) |
Token efficiency: Main skill ~400 tokens, each reference ~600-1000 tokens