KIMJINWOO4KIMJINWOO4/vue-skills/skills/vue-clean-components/SKILL.md

vue-clean-components

Skill28 starsChanged 30 days agoMITView on GitHub

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.

In this repository16 other files it gives its agents.
- antfuSkill
- build-toolingSkill
- designSkill
- find-skillsSkill
- nuxtSkill
- vitepressSkill
- vue-a11ySkill
- vue-ciSkill
- vue-dataSkill
- vue-debugSkill
- vue-formsSkill
- vue-performanceSkill
- vue-reviewSkill
- vueSkill
- vue-uiSkill
- vue-upgradeSkill

The file

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 2 are distinctive, and 0 are very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
A composable is a lifecycle unit: keep a related ref, its watcher and its cleanup together
line 36
Distinctive:
No props drilling beyond one level: use provide/inject or a store
line 38

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

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 and the 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
A composable is a lifecycle unit: keep a related ref, its watcher and its cleanup together
Core-Adapter separation: business logic in plain TypeScript, Vue reactivity in thin composables
No props drilling beyond one level: use provide/inject or a store
Stores hold only shared business state: UI-only state stays in components
Extract boilerplate after three repetitions, not before

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)

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free