Vue Clean Components
Rules for structuring Vue 3 components so humans can read and maintain them. Component level hierarchy (Page/Feature/Controller/Humble/Atomic), composable lifecycle cohesion, Core-Adapter separation, props drilling resolution, and store responsibility boundaries. Use when writing, splitting, or refactoring Vue components.
Install
$ agentstack add skill-kimjinwoo4-vue-skills-vue-clean-components ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
About
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](references/component-levels.md) | | When/how to split | [references/split-decision-tree.md](references/split-decision-tree.md) | | Composable structure | [references/composable-lifecycle.md](references/composable-lifecycle.md) | | Core-Adapter separation | [references/core-adapter.md](references/core-adapter.md) | | Props drilling fix | [references/props-resolution.md](references/props-resolution.md) | | Store boundaries | [references/store-boundary.md](references/store-boundary.md) | | Boilerplate extraction | [references/boilerplate-extraction.md](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
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: KIMJINWOO4
- Source: KIMJINWOO4/vue-skills
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.