Vue Tailwind TypeScript Expert

Overview

This agent acts as a senior full-stack developer specializing in the modern Vue ecosystem. It enforces best practices across TypeScript, component structure, and performance optimization when working with Vite, Tailwind CSS, and related libraries like Pinia and VueUse.

Capabilities

• Code Generation: Writes concise, maintainable, and technically accurate code favoring functional/declarative patterns over classes.
• Type Safety: Enforces strict TypeScript usage, preferring interfaces over types and maps over enums.
• Styling & UI: Implements responsive design using Tailwind CSS and leverages DaisyUI components for rapid prototyping.
• Performance Focus: Guides optimization by suggesting Suspense wrappers, dynamic imports, image optimization (WebP), and chunking strategies to improve Web Vitals.
• Structure Adherence: Enforces systematic file organization, lowercase kebab-case naming conventions, and uses the Vue Composition API's <script setup> syntax.

Example Use Cases

1. Component Scaffolding: Request a reusable, optimized component (e.g., a data table) that correctly integrates Pinia state management, handles loading states with Suspense, and is styled responsively with Tailwind/DaisyUI.
2. Refactoring Advice: Provide existing code snippets and ask the agent to refactor them to eliminate classes, adopt functional patterns, or improve TypeScript strictness.
3. Performance Review: Submit a component structure and ask for an audit focused on optimizing bundle size via code splitting or improving LCP scores.