Skip to main content
affpapa.org
RU EN
skill CX Codex

vue-typescript — Claude Code skill: what it does, how to install

Strict standards for Vue 3 and TypeScript development with Vite, Pinia, and Tailwind CSS. Enforces Composition API and frontend performance rules.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Mindrally/skills --skill vue-typescript -a claude-code
Open on GitHub

What vue-typescript does

This skill guides coding agents to produce declarative TypeScript for Vue 3. It enforces the Composition API <script setup> pattern and bans classes entirely. Pure functions must use the function keyword for hoisting benefits, while variables take descriptive prefixes like isLoading or hasError.

The instructions cover modern tooling including Pinia, Vue Router, VueUse, Headless UI, and Element Plus. Layouts follow a mobile-first Tailwind CSS approach. Directory names stick to lowercase with dashes, and functions rely on named exports rather than default exports.

Codebases relying on Options API or TypeScript enums will clash directly with these rules. The skill explicitly bans enums in favor of maps and mandates Suspense fallbacks for all asynchronous components, paired with Vite chunk splitting and WebP image optimizations.

What it helps with

  • scaffold Vue 3 components using Composition API script setup
  • replace TypeScript enums with type-safe maps and interfaces
  • configure async components with Suspense and fallback states
  • structure Pinia stores with standardized state naming conventions

Example prompts for the agent

  • Create a login form component using Vue 3, Tailwind CSS, and Headless UI
  • Write a Pinia store for user settings with isLoading and hasError states
  • Set up an async dashboard widget wrapped in Suspense with dynamic loading

How to install vue-typescript

1Skills CLI (Vercel)

npx skills add Mindrally/skills --skill vue-typescript -a claude-code

2Manually: put the files in place

~/.claude/skills/vue-typescript/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vue-typescript/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about vue-typescript

How to install vue-typescript in Claude Code?

Run npx skills add Mindrally/skills --skill vue-typescript -a claude-code. The file will be placed at ~/.claude/skills/vue-typescript/SKILL.md.

What coding style does vue-typescript enforce?

It mandates functional, declarative TypeScript with Vue Composition API <script setup>. Classes are prohibited, and pure functions must use the function keyword.

Why does the skill avoid TypeScript enums?

The instructions avoid enums and use maps instead for improved type safety. It also prefers interface over type because interfaces are extensible.

Source text

SKILL.md · Apache-2.0 
---
name: vue-typescript
description: Expert in Vue.js TypeScript development with Vite, Pinia, and modern UI frameworks
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# 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.

© Mindrally · Apache-2.0 · Mindrally/skills

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set214

general-best-practices A skill that hands your coding agent a set of rules on code quality, testing, security and architecture. Useful when you want consistent code across a project. CX Codex +1 794installs sql-best-practices SQL guidelines for coding agents: covers query formatting, indexing, explicit joins, and injection defenses for database workflows. CX Codex +1 790installs logging-best-practices A skill that spells out logging rules: structured JSON, log levels, shared fields and request context. Useful when every service logs its own way. CX Codex +1 791installs python-odoo-cursor-rules A rule set for Python and Odoo development: ORM, XML views, module architecture. Useful when the agent writes ERP code. CX Codex +1 790installs android-development A rule set that keeps your coding agent on track with Kotlin and Android: clean architecture, MVI, Material 3. Useful when generated code drifts in style and layering. CX Codex +1 782installs kysely A skill that gives the agent rules for writing Kysely code: schema typing, joins, transactions, type generation. Useful when your project is TypeScript and SQL. CX Codex +1 780installs github-workflow A rule set that tells your agent how to work with GitHub: pull requests, review comments, Actions workflows, issue templates and branch protection. Useful whenever the agent touches a repo. CX Codex +1 780installs expo-react-native-javascript-best-practices Guidelines for building Expo React Native apps using JavaScript. Guides your AI agent on functional components, Expo Router navigation, and FlatList tuning. CX Codex +1 777installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor