vue-best-practices
This skill provides a structured workflow for Vue.js development, mandating the use of the Composition API, TypeScript, and specific architectural patterns. It requires developers to plan component boundaries, follow strict SFC structure, and apply core reactivity and data flow principles before implementing features.
Is vue-best-practices safe to install?
Safe to install: our audit of vue-best-practices's source files found 0 shell commands, 0 external URLs, file reads and writes (low risk). Every command and URL listed appears verbatim in the skill's source. The skill requires reading local reference files to guide development, but it does not execute shell commands or perform network requests.
How we audit skills: our security review methodology.
Who is this skill for?
Vue.js developers and AI agents working on Vue 3 projects.
What can you do with it?
- Standardizing Vue 3 component architecture
- Refactoring large components into smaller, focused units
- Implementing predictable state management using composables
- Planning component boundaries for new features
- Applying performance optimizations after core functionality is verified
How good is this skill?
Quality score: 5/10. The skill provides a clear, actionable, and highly structured workflow for Vue development. It enforces best practices through mandatory reference reading and logical planning steps.
What does the skill file contain?
# Vue Best Practices Workflow Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order. ## Core Principles - **Keep state predictable:** one source of truth, derive everything else. - **Make data flow explicit:** Props down, Events up for most cases. - **Favor small, focused components:** easier to test, reuse, and maintain. - **Avoid unnecessary re-renders:** use computed properties and watchers wisely. - **Readability counts:** write clear, self-documenting code. ## 1) Confirm architecture before coding (required) - Default ...
Frequently asked questions
Which Vue API does this skill mandate?
It mandates the Composition API with <script setup lang="ts">.
When should I split a component?
Split a component if it owns both orchestration and presentational markup, contains three or more distinct UI sections, or contains repeated template blocks.
What is the required order for SFC sections?
The required order is <script>, then <template>, then <style>.
Are performance optimizations applied during initial development?
No, performance optimization is a post-functionality pass performed only after core behavior is correct.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
simple
221.4KDevelopers and project managers who need a fast, lightweight decision-making process for feature design or component creation
A structured brainstorming framework for architectural and creative tasks that guides users from discovery to decision-making through a defined process flow.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
developing-genkit-js
50.1KDevelopers building AI agents, flows, and tools using the Genkit framework in JavaScript or TypeScript environments
This skill provides guidance for developing AI-powered applications using Genkit in Node.js and TypeScript. It enforces a strict troubleshooting protocol that prioritizes reading local documentation via the Genkit CLI over internal knowledge to account for recent breaking API changes.