vue-best-practices

Name: vue-best-practices
Author: hyf0

byhyf0· 8 skills

Installs

25k

Stars

2.7k

Forks

157

How to install vue-best-practices?

hyf0/vue-skills/vue-best-practices

$npx -y skills add hyf0/vue-skills --skill vue-best-practices

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/hyf0/vue-skills" --skill "hyf0/vue-skills/vue-best-practices"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/hyf0/vue-skills" that are relevant to the current task. Run `npx skills add "https://github.com/hyf0/vue-skills"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# Vue Best Practices Workflow
2
3	Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order.
4
5	## Core Principles
6	- Keep state predictable: one source of truth, derive everything else.
7	- Make data flow explicit: Props down, Events up for most cases.
8	- Favor small, focused components: easier to test, reuse, and maintain.
9	- Avoid unnecessary re-renders: use computed properties and watchers wisely.
10	- Readability counts: write clear, self-documenting code.
11
12	## 1) Confirm architecture before coding (required)
13
14	- Default stack: Vue 3 + Composition API + `<script setup lang="ts">`.
15	- If the project explicitly uses Options API, load `vue-options-api-best-practices` skill if available.
16	- If the project explicitly uses JSX, load `vue-jsx-best-practices` skill if available.
17
18	### 1.1 Must-read core references (required)
19
20	- Before implementing any Vue task, make sure to read and apply these core references:
21	- `references/reactivity.md`
22	- `references/sfc.md`
23	- `references/component-data-flow.md`
24	- `references/composables.md`
25	- Keep these references in active working context for the entire task, not only when a specific issue appears.
26
27	### 1.2 Plan component boundaries before coding (required)
28
29	Create a brief component map before implementation for any non-trivial feature.
30
31	- Define each component's single responsibility in one sentence.
32	- Keep entry/root and route-level view components as composition surfaces by default.
33	- Move feature UI and feature logic out of entry/root/view components unless the task is intentionally a tiny single-file demo.
34	- Define props/emits contracts for each child component in the map.
35	- Prefer a feature folder layout (`components/<feature>/...`, `composables/use<Feature>.ts`) when adding more than one component.
36
37	## 2) Apply essential Vue foundations (required)
38
39	These are essential, must-know foundations. Apply all of them in every Vue task using the core references already loaded in section `1.1`.
40
41	### Reactivity
42
43	- Must-read reference from `1.1`: [reactivity](references/reactivity.md)
44	- Keep source state minimal (`ref`/`reactive`), derive everything possible with `computed`.
45	- Use watchers for side effects if needed.
46	- Avoid recomputing expensive logic in templates.
47
48	### SFC structure and template safety
49
50	- Must-read reference from `1.1`: [sfc](references/sfc.md)
51	- Keep SFC sections in this order: `<script>` → `<template>` → `<style>`.
52	- Keep SFC responsibilities focused; split large components.
53	- Keep templates declarative; move branching/derivation to script.
54	- Apply Vue template safety rules (`v-html`, list rendering, conditional rendering choices).
55
56	### Keep components focused
57
58	Split a component when it has more than one clear responsibility (e.g. data orchestration + UI, or multiple independent UI sections).
59
60	- Prefer smaller components + composables over one “mega component”
61	- Move UI sections into child components (props in, events out).
62	- Move state/side effects into composables (`useXxx()`).
63
64	Apply objective split triggers. Split the component if any condition is true:
65
66	- It owns both orchestration/state and substantial presentational markup for multiple sections.
67	- It has 3+ distinct UI sections (for example: form, filters, list, footer/status).
68	- A template block is repeated or could become reusable (item rows, cards, list entries).
69
70	Entry/root and route view rule:
71
72	- Keep entry/root and route view components thin: app shell/layout, provider wiring, and feature composition.
73	- Do not place full feature implementations in entry/root/view components when those features contain independent parts.
74	- For CRUD/list features (todo, table, catalog, inbox), split at least into:
75	- feature container component
76	- input/form component
77	- list (and/or item) component
78	- footer/actions or filter/status component
79	- Allow a single-file implementation only for very small throwaway demos; if chosen, explicitly justify why splitting is unnecessary.
80
81	### Component data flow
82
83	- Must-read reference from `1.1`: [component-data-flow](references/component-data-flow.md)
84	- Use props down, events up as the primary model.
85	- Use `v-model` only for true two-way component contracts.
86	- Use provide/inject only for deep-tree dependencies or shared context.
87	- Keep contracts explicit and typed with `defineProps`, `defineEmits`, and `InjectionKey` as needed.
88
89	### Composables
90
91	- Must-read reference from `1.1`: [composables](references/composables.md)
92	- Extract logic into composables when it is reused, stateful, or side-effect heavy.
93	- Keep composable APIs small, typed, and predictable.
94	- Separate feature logic from presentational components.
95
96	## 3) Consider optional features only when requirements call for them
97
98	### 3.1 Standard optional features
99
100	Do not add these by default. Load the matching reference only when the requirement exists.
101
102	- Slots: parent needs to control child content/layout -> [component-slots](references/component-slots.md)
103	- Fallthrough attributes: wrapper/base components must forward attrs/events safely -> [component-fallthrough-attrs](references/component-fallthrough-attrs.md)
104	- Built-in component `<KeepAlive>` for stateful view caching -> [component-keep-alive](references/component-keep-alive.md)
105	- Built-in component `<Teleport>` for overlays/portals -> [component-teleport](references/component-teleport.md)
106	- Built-in component `<Suspense>` for async subtree fallback boundaries -> [component-suspense](references/component-suspense.md)
107	- Animation-related features: pick the simplest approach that matches the required motion behavior.
108	- Built-in component `<Transition>` for enter/leave effects -> [transition](references/component-transition.md)
109	- Built-in component `<TransitionGroup>` for animated list mutations -> [transition-group](references/component-transition-group.md)
110	- Class-based animation for non-enter/leave effects -> [animation-class-based-technique](references/animation-class-based-technique.md)
111	- State-driven animation for user-input-driven animation -> [animation-state-driven-technique](references/animation-state-driven-technique.md)
112
113	### 3.2 Less-common optional features
114
115	Use these only when there is explicit product or technical need.
116
117	- Directives: behavior is DOM-specific and not a good composable/component fit -> [directives](references/directives.md)
118	- Async components: heavy/rarely-used UI should be lazy loaded -> [component-async](references/component-async.md)
119	- Render functions only when templates cannot express the requirement -> [render-functions](references/render-functions.md)
120	- Plugins when behavior must be installed app-wide -> [plugins](references/plugins.md)
121	- State management patterns: app-wide shared state crosses feature boundaries -> [state-management](references/state-management.md)
122
123	## 4) Run performance optimization after behavior is correct
124
125	Performance work is a post-functionality pass. Do not optimize before core behavior is implemented and verified.
126
127	- Large list rendering bottlenecks -> [perf-virtualize-large-lists](references/perf-virtualize-large-lists.md)
128	- Static subtrees re-rendering unnecessarily -> [perf-v-once-v-memo-directives](references/perf-v-once-v-memo-directives.md)
129	- Over-abstraction in hot list paths -> [perf-avoid-component-abstraction-in-lists](references/perf-avoid-component-abstraction-in-lists.md)
130	- Expensive updates triggered too often -> [updated-hook-performance](references/updated-hook-performance.md)
131
132	## 5) Final self-check before finishing
133
134	- Core behavior works and matches requirements.
135	- All must-read references were read and applied.
136	- Reactivity model is minimal and predictable.
137	- SFC structure and template rules are followed.
138	- Components are focused and well-factored, splitting when needed.
139	- Entry/root and route view components remain composition surfaces unless there is an explicit small-demo exception.
140	- Component split decisions are explicit and defensible (responsibility boundaries are clear).
141	- Data flow contracts are explicit and typed.
142	- Composables are used where reuse/complexity justifies them.
143	- Moved state/side effects into composables if applicable
144	- Optional features are used only when requirements demand them.
145	- Performance changes were applied only after functionality was complete.

6 picks

Type

Run `npx skills use "https://github.com/hyf0/vue-skills" --skill "hyf0/vue-skills/vue-best-practices"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/hyf0/vue-skills" that are relevant to the current task. Run `npx skills add "https://github.com/hyf0/vue-skills"` and select the relevant skills, then follow their instructions.

vue-best-practices

How to install vue-best-practices?

Related

vue-best-practices

How to install vue-best-practices?

Related