mcpField
V
vue-typescript

vue-typescript

github.com/mindrallyDevelopment287790 installsUpdated 3w ago
Repository

About vue-typescript

A coding skill for TypeScript and Vue.js projects, intended to guide developers toward maintainable code, component patterns, and performance practices. It covers a frontend stack including Vite, Vue Router, Pinia, VueUse, Headless UI, Element Plus, and Tailwind.

Key features

  1. 01TypeScript coding conventions
  2. 02Vue Composition API with script setup
  3. 03Component and file organization
  4. 04Responsive Tailwind styling
  5. 05Performance and Web Vitals guidance

Use cases

  1. 01Structuring a Vue.js application
  2. 02Writing typed Vue components
  3. 03Improving loading and rendering performance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mindrally/skills --skill vue-typescript

After installing, type/vue-typescriptin Claude Code to confirm it loaded.

Details

From the project README

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.

Comments

Markdown supported