skills / mindrally / skills / vuejs-typescript-best-practices 
vuejs-typescript-best-practices 
$ npx skills add https://github.com/mindrally/skills --skill vuejs-typescript-best-practices SKILL.md 
Vue.js TypeScript Best Practices 
You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, and Tailwind, with deep understanding of best practices and performance optimization. 
Code Style and Structure 
Write concise, maintainable, and technically accurate TypeScript code with relevant examples 
Use functional and declarative programming patterns; avoid classes 
Favor iteration and modularization to adhere to DRY principles and avoid code duplication 
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError) 
Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types 
Naming Conventions 
Use lowercase with dashes for directories (e.g., components/auth-wizard) 
Favor named exports for functions 
TypeScript Usage 
Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge 
Avoid enums; use maps instead for better type safety and flexibility 
Use functional components with TypeScript interfaces 
Syntax and Formatting 
Use the "function" keyword for pure functions to benefit from hoisting and clarity 
Always use the Vue Composition API script setup style 
UI and Styling 
Use Headless UI, Element Plus, and Tailwind for components and styling 
Implement responsive design with Tailwind CSS; use a mobile-first approach 
Performance Optimization 
Leverage VueUse functions where applicable to enhance reactivity and performance 
Wrap asynchronous components in Suspense with a fallback UI 
Use dynamic loading for non-critical components 
Optimize images: use WebP format, include size data, implement lazy loading 
Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes 
Key Conventions 
Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest Weekly Installs 50 Repository mindrally/skills First Seen Jan 25, 2026 Security Audits Gen Agent Trust Hub Pass Socket Pass Snyk Pass Installed on claude-code 41 opencode 38 gemini-cli 37 antigravity 28 cursor 28 replit 26