vue-typescript
Expert in Vue.js TypeScript development with Vite, Pinia, and modern UI frameworks
Works with
Agent Skills format with YAML frontmatter. Claude Code reads it as-is.
--- name: "vue-typescript" description: "Expert in Vue.js TypeScript development with Vite, Pinia, and modern UI frameworks" license: "Apache-2.0" --- # 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.
More Frontend Frameworks skills
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
design-taste-frontend
leonxlnx/taste-skill
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
