Comprehensive best practices guide for Vue.js 3 applications. Contains guidelines across multiple categories to ensure idiomatic, maintainable, and scalable Vue.js code, including Tailwind CSS integration patterns for utility-first styling and PrimeVue component library best practices.
Fetches vue-best-practices from dedalus-erp-pas/foundation-skills and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/vue-best-practices
Restart Cursor to activate vue-best-practices. Access via /vue-best-practices in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Comprehensive best practices guide for Vue.js 3 applications. Contains guidelines across multiple categories to ensure idiomatic, maintainable, and scalable Vue.js code, including Tailwind CSS integration patterns for utility-first styling and PrimeVue component library best practices.
When to Apply
Reference these guidelines when:
Writing new Vue components or composables
Implementing features with Composition API
Reviewing code for Vue.js patterns compliance
Refactoring existing Vue.js code
Setting up component architecture
Working with Nuxt.js applications
Styling Vue components with Tailwind CSS utility classes
Creating design systems with Tailwind and Vue
Using PrimeVue component library natively
Customizing PrimeVue theme through design tokens and definePreset()
Rule Categories
Category
Focus
Prefix
Composition API
Proper use of Composition API patterns
composition-
Component Design
Component structure and organization
component-
Reactivity
Reactive state management patterns
reactive-
Props & Events
Component communication patterns
props-
Template Patterns
Template syntax best practices
template-
Code Organization
Project and code structure
organization-
TypeScript
Type-safe Vue.js patterns
typescript-
Error Handling
Error boundaries and handling
error-
Tailwind CSS
Utility-first styling patterns
tailwind-
PrimeVue
Component library integration patterns
primevue-
Quick Reference
1. Composition API Best Practices
composition-script-setup - Always use <script setup> for single-file components
composition-ref-vs-reactive - Use ref() for primitives, reactive() for objects
composition-computed-derived - Use computed() for all derived state
composition-watch-side-effects - Use watch()/watchEffect() only for side effects
composition-composables - Extract reusable logic into composables
composition-lifecycle-order - Place lifecycle hooks after reactive state declarations
composition-avoid-this - Never use this in Composition API
2. Component Design
component-single-responsibility - One component, one purpose
component-naming-convention - Use PascalCase for components, kebab-case in templates
component-small-focused - Keep components under 200 lines
component-presentational-container - Separate logic from presentation when beneficial
component-slots-flexibility - Use slots for flexible component composition
component-expose-minimal - Only expose what's necessary via defineExpose()
3. Reactivity Patterns
reactive-const-refs - Always declare refs with const
reactive-unwrap-template - Let Vue unwrap refs in templates (no .value)
reactive-shallow-large-data - Use shallowRef()/shallowReactive() for large non-reactive data
reactive-readonly-props - Use readonly() to prevent mutations
reactive-toRefs-destructure - Use toRefs() when destructuring reactive objects
reactive-avoid-mutation - Prefer immutable updates for complex state
4. Props & Events
props-define-types - Always define prop types with defineProps<T>()
props-required-explicit - Be explicit about required vs optional props
props-default-values - Provide sensible defaults with withDefaults()
props-immutable - Never mutate props directly
props-validation - Use validator functions for complex prop validation
events-define-emits - Always define emits with defineEmits<T>()
events-naming - Use kebab-case for event names in templates
events-payload-objects - Pass objects for events with multiple values
5. Template Patterns
template-v-if-v-show - Use v-if for conditional rendering, v-show for toggling
template-v-for-key - Always use unique, stable :key with v-for
template-v-if-v-for - Never use v-if and v-for on the same element
template-computed-expressions - Move complex expressions to computed properties
template-event-modifiers - Use event modifiers (.prevent, .stop) appropriately
template-v-bind-shorthand - Use shorthand syntax (: for v-bind, @ for v-on)
template-v-model-modifiers - Use v-model modifiers (.trim, .number, .lazy)
6. Code Organization
organization-feature-folders - Organize by feature, not by type
organization-composables-folder - Keep composables in dedicated composables/ folder
organization-barrel-exports - Use index files for clean imports
›Claude Desktop or compatible AI client with skill support
›Clear understanding of task or problem to solve
›Willingness to iterate and refine outputs
Time Estimate
15-45 minutes depending on use case complexity
Steps
1Install skill using provided installation command
2Test with simple use case relevant to your work
3Evaluate output quality and relevance
4Iterate on prompts to improve results
5Integrate into regular workflow if valuable
Common Pitfalls
⚠Expecting perfect results without iteration
⚠Not providing enough context in prompts
⚠Using skill for tasks outside its intended scope
⚠Accepting outputs without review and validation
Best Practices
✓ Do
+Start with clear, specific prompts
+Provide relevant context and constraints
+Review and refine all outputs before using
+Iterate to improve output quality
+Document successful prompt patterns
✗ Don't
−Don't use without understanding skill limitations
−Don't skip validation of outputs
−Don't share sensitive information in prompts
−Don't expect skill to replace human judgment
💡 Pro Tips
★Be specific about desired format and style
★Ask for multiple options to choose from
★Request explanations to understand reasoning
★Combine AI efficiency with human expertise
When to Use This
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
Learning Path
1Familiarize yourself with skill capabilities and limitations
2Start with low-risk, non-critical tasks
3Progress to more complex and valuable use cases
4Build expertise through regular use and experimentation
