vue-best-practices

Name: vue-best-practices
Author: vinayakkulkarni

38stars2forks

How to install vue-best-practices?

vinayakkulkarni/vue-nuxt-best-practices/vue-best-practices

$npx -y skills add vinayakkulkarni/vue-nuxt-best-practices --skill vue-best-practices

Installs into the current project.

Summary

Vue.js performance optimization guidelines for building fast, maintainable applications. This skill should be used when writing, reviewing, or refactoring Vue.js code to ensure optimal performance patterns. Triggers on tasks involving Vue components, reactivity, Composition API,

Files · 1

View on GitHub

SKILL.md

1	# Vue Best Practices
2
3	Comprehensive performance optimization guide for Vue.js applications (verified against the official Vue 3.5+ docs). Contains 18 rules across 5 categories, prioritized by impact to guide automated refactoring and code generation.
4
5	## When to Apply
6
7	Reference these guidelines when:
8
9	- Writing new Vue components
10	- Implementing reactive state and computed properties
11	- Reviewing code for performance issues
12	- Refactoring existing Vue code
13	- Optimizing rendering and re-renders
14	- Working with Composition API or Options API
15
16	## Rule Categories by Priority
17
18	\| Priority \| Category \| Impact \| Prefix \|
19	\| -------- \| ------------------------ \| ----------- \| ---------------------- \|
20	\| 1 \| Reactivity Fundamentals \| CRITICAL \| `reactivity-` \|
21	\| 2 \| Component Performance \| CRITICAL \| `component-` \|
22	\| 3 \| Computed & Watchers \| HIGH \| `computed-` / `watch-` \|
23	\| 4 \| Template Optimization \| MEDIUM-HIGH \| `template-` \|
24	\| 5 \| Composition API Patterns \| MEDIUM \| `composable-` \|
25
26	## Quick Reference
27
28	### 1. Reactivity Fundamentals (CRITICAL)
29
30	- `reactivity-ref-vs-reactive` - Prefer ref() as the primary reactivity API
31	- `reactivity-avoid-destructure` - Don't destructure reactive objects
32	- `reactivity-toRefs` - Use toRefs()/getters when destructuring is needed
33	- `reactivity-shallowRef` - Use shallowRef() for large non-reactive data
34	- `reactivity-raw-values` - Treat toRaw() as a narrow escape hatch
35
36	### 2. Component Performance (CRITICAL)
37
38	- `component-async` - Use defineAsyncComponent for heavy components
39	- `component-keep-alive` - Cache component state with KeepAlive
40	- `component-v-memo` - v-memo micro-optimization for 1000+ item lists
41	- `component-v-once` - Use v-once for static content
42	- `component-functional` - Keep stateless components simple
43
44	### 3. Computed & Watchers (HIGH)
45
46	- `computed-cache` - Use computed() for derived values, not methods
47	- `computed-dependencies` - Understand fine-grained per-property dependency tracking
48	- `watch-deep-avoid` - Avoid deep watchers on large objects
49
50	### 4. Template Optimization (MEDIUM-HIGH)
51
52	- `template-v-show-vs-if` - v-show for frequent toggles, v-if for rare
53	- `template-key-attribute` - Always use unique primitive keys in v-for
54	- `template-avoid-v-if-v-for` - Never use v-if and v-for on same element
55
56	### 5. Composition API Patterns (MEDIUM)
57
58	- `composable-single-responsibility` - One concern per composable
59	- `composable-return-refs` - Return refs, not reactive objects
60
61	## How to Use
62
63	Read individual rule files for detailed explanations and code examples:
64
65	```
66	rules/reactivity-ref-vs-reactive.md
67	rules/component-v-memo.md
68	rules/_sections.md
69	```
70
71	Each rule file contains:
72
73	- Brief explanation of why it matters
74	- Incorrect code example with explanation
75	- Correct code example with explanation
76	- Additional context and references
77
78	## Full Compiled Document
79
80	For the complete guide with all rules expanded: `AGENTS.md`

People who liked this also viewed

6 picks

Type

vue-best-practices

38stars2forks

View on GitHub

How to install vue-best-practices?

vinayakkulkarni/vue-nuxt-best-practices/vue-best-practices

$npx -y skills add vinayakkulkarni/vue-nuxt-best-practices --skill vue-best-practices

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Vue Best Practices
2
3	Comprehensive performance optimization guide for Vue.js applications (verified against the official Vue 3.5+ docs). Contains 18 rules across 5 categories, prioritized by impact to guide automated refactoring and code generation.
4
5	## When to Apply
6
7	Reference these guidelines when:
8
9	- Writing new Vue components
10	- Implementing reactive state and computed properties
11	- Reviewing code for performance issues
12	- Refactoring existing Vue code
13	- Optimizing rendering and re-renders
14	- Working with Composition API or Options API
15
16	## Rule Categories by Priority
17
18	\| Priority \| Category \| Impact \| Prefix \|
19	\| -------- \| ------------------------ \| ----------- \| ---------------------- \|
20	\| 1 \| Reactivity Fundamentals \| CRITICAL \| `reactivity-` \|
21	\| 2 \| Component Performance \| CRITICAL \| `component-` \|
22	\| 3 \| Computed & Watchers \| HIGH \| `computed-` / `watch-` \|
23	\| 4 \| Template Optimization \| MEDIUM-HIGH \| `template-` \|
24	\| 5 \| Composition API Patterns \| MEDIUM \| `composable-` \|
25
26	## Quick Reference
27
28	### 1. Reactivity Fundamentals (CRITICAL)
29
30	- `reactivity-ref-vs-reactive` - Prefer ref() as the primary reactivity API
31	- `reactivity-avoid-destructure` - Don't destructure reactive objects
32	- `reactivity-toRefs` - Use toRefs()/getters when destructuring is needed
33	- `reactivity-shallowRef` - Use shallowRef() for large non-reactive data
34	- `reactivity-raw-values` - Treat toRaw() as a narrow escape hatch
35
36	### 2. Component Performance (CRITICAL)
37
38	- `component-async` - Use defineAsyncComponent for heavy components
39	- `component-keep-alive` - Cache component state with KeepAlive
40	- `component-v-memo` - v-memo micro-optimization for 1000+ item lists
41	- `component-v-once` - Use v-once for static content
42	- `component-functional` - Keep stateless components simple
43
44	### 3. Computed & Watchers (HIGH)
45
46	- `computed-cache` - Use computed() for derived values, not methods
47	- `computed-dependencies` - Understand fine-grained per-property dependency tracking
48	- `watch-deep-avoid` - Avoid deep watchers on large objects
49
50	### 4. Template Optimization (MEDIUM-HIGH)
51
52	- `template-v-show-vs-if` - v-show for frequent toggles, v-if for rare
53	- `template-key-attribute` - Always use unique primitive keys in v-for
54	- `template-avoid-v-if-v-for` - Never use v-if and v-for on same element
55
56	### 5. Composition API Patterns (MEDIUM)
57
58	- `composable-single-responsibility` - One concern per composable
59	- `composable-return-refs` - Return refs, not reactive objects
60
61	## How to Use
62
63	Read individual rule files for detailed explanations and code examples:
64
65	```
66	rules/reactivity-ref-vs-reactive.md
67	rules/component-v-memo.md
68	rules/_sections.md
69	```
70
71	Each rule file contains:
72
73	- Brief explanation of why it matters
74	- Incorrect code example with explanation
75	- Correct code example with explanation
76	- Additional context and references
77
78	## Full Compiled Document
79
80	For the complete guide with all rules expanded: `AGENTS.md`

People who liked this also viewed

6 picks

Type