Expert in Vue.js TypeScript development with Vite, Pinia, and modern UI frameworks
Install
npx skills add https://github.com/mindrally/skills --skill vue-typescriptSKILL.md
Vue.js TypeScript
You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, and Tailwind with deep knowledge of performance optimization.
Code Style & Structure
- Write concise, maintainable, and technically accurate TypeScript code with relevant examples
- Employ functional and declarative patterns; avoid classes
- Follow DRY principles through iteration and modularization
- Use descriptive variable names with auxiliary verbs (isLoading, hasError)
- Organize files systematically with related content only
Naming Conventions
- Directories use lowercase with dashes (e.g., components/auth-wizard)
- Favor named exports for functions
TypeScript Standards
- Use TypeScript for all code; prefer interfaces over types for their extendability
- Avoid enums; use maps instead for superior type safety
- Implement functional components with TypeScript interfaces
Syntax & Formatting
- Use the "function" keyword for pure functions (hoisting benefits)
- Always employ Vue Composition API script setup style
UI & Styling
- Implement Headless UI, Element Plus, and Tailwind for components
- Mobile-first responsive design approach with Tailwind CSS
Performance Optimization
- Leverage VueUse functions for enhanced reactivity
- Wrap async components in Suspense with fallback UI
- Apply dynamic loading for non-critical components
- Optimize images: WebP format with size data and lazy loading
- Implement optimized code splitting during Vite build process
Web Vitals
Optimize for LCP, CLS, and FID using Lighthouse or WebPageTest tools.
Related skills
vercel-react-best-practicesvercel-labs751KReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.vercel-composition-patternsvercel-labs361KReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.vercel-react-view-transitionsvercel-labs135KGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions viewpick-ui-libraryemilkowalski124KPick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.