Claude skills for Vue
123 public Claude skills touch on Vue. These 50 are the closest fit, best-known sources first. Each links to its folder; copy it into ~/.claude/skills/ to use it.
vue expert js
Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only — no TypeScript. Generates JSDoc-typed code with @typedef, @param, and @returns annotations for full type…
Jeffallan/claude-skills★ 12kMITFolder:
vue-expert-jsvue expert
Builds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR/SSG projects, sets up Pinia stores, scaffolds Quasar/Capacitor mobile apps, implements PWA features, and optimises Vite builds. Use when creating Vue 3 applications with…
Jeffallan/claude-skills★ 12kMITFolder:
vue-expertnuxt
Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.
antfu/skills★ 6kMITFolder:
nuxtvue
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.
antfu/skills★ 6kMITFolder:
vuenuxtjs vue typescript
Best practices for building Nuxt 3 and Vue 3 applications with TypeScript, the Composition API, and Tailwind CSS. Use when structuring Nuxt/Vue projects, writing composables, typing components and props, wiring up server routes and plugins, or optimizing…
Mindrally/skills★ 288Apache-2.0Folder:
nuxtjs-vue-typescriptbun nuxt
Use when running Nuxt 3 with Bun runtime, building Vue/Nuxt apps with Bun, or configuring Nuxt projects to use Bun for development and production.
secondsky/claude-skills★ 240MITFolder:
bun-nuxtnuxt content
Nuxt Content v3 Git-based CMS for Markdown/MDC content sites. Use for blogs, docs, content-driven apps with type-safe queries, schema validation (Zod/Valibot), full-text search, navigation utilities. Supports Nuxt Studio production editing, Cloudflare…
secondsky/claude-skills★ 240MITFolder:
nuxt-contentnuxt seo
Nuxt SEO v5 modules (robots, sitemap, og-image, schema-org, link-checker, seo-utils, site-config). Use when implementing SEO, robots.txt, sitemaps, Schema.org, or meta tags in Nuxt apps.
secondsky/claude-skills★ 240MITFolder:
nuxt-seoexample vue
Patterns for using Helios with Vue. Use when building compositions in a Vue environment.
BintzGavin/helios★ 123Apache-2.0Folder:
vuevue frontend expert
Expert guide for Vue 3 (Composition API), Nuxt 3, and Pinia. Covers advanced reactive state management, `<script setup>` syntax, Vue Router, VueUse, and SPA/SSR architectural patterns in English and Indonesian.
roedyrustam/vibes-plug★ 116MITFolder:
vue-frontend-expertvue ops
Vue 3 development patterns, Composition API, Pinia state management, Vue Router, and Nuxt 4. Use for: vue, vuejs, composition api, pinia, vue router, nuxt, nuxt4, nuxt3, script setup, composable, reactive, defineProps, defineEmits, defineModel, v-model,…
0xDarkMatter/claude-mods★ 78MITFolder:
vue-opsfec nuxt project standard
用于创建或审查 Nuxt 3 项目、文件路由、pages、layouts、SSR/SSG/SPA 行为、Nuxt 数据获取、route middleware、plugins、modules、server routes 或 Nuxt 特定 Vue 3 约定。通用 Vue 组件架构另按项目 Vue 约定处理;中文触发词包括 Nuxt、Nuxt 3。
bovinphang/frontend-craft★ 22MITFolder:
fec-nuxt-project-standardkit vue
Vue 3 guardrails pack — reactivity loss, ref unwrapping, v-if/v-for precedence, compiler macros, plus UI state/a11y discipline. Use when writing Vue single-file components or composables.
altafino/FableClaudeMDForOpus★ 7No licence statedFolder:
kit-vueapi breaking change detector
Cross-references C# Web API controllers/DTOs against their TypeScript/JavaScript consumers (React, Angular, Vue, Svelte, Node.js, or hand-written/auto-generated HTTP clients like Fetch, Axios, NSwag) to catch contract drift in both directions: backend…
github/awesome-copilot★ 41kMITFolder:
api-breaking-change-detectornitro
Nitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere. Use when working with nitro.config, server routes/event handlers, route rules, caching, storage, tasks, websockets, or deploying to…
antfu/skills★ 6kMITFolder:
nitroplaywright core
Battle-tested Playwright patterns for E2E, API, component, visual, accessibility, and security testing. Covers locators, assertions, fixtures, network mocking, auth flows, debugging, and framework recipes for React, Next.js, Vue, and Angular. TypeScript…
zebbern/claude-code-guide★ 4.7kMITFolder:
coreplaywright skill
Battle-tested Playwright patterns for E2E, API, component, visual, accessibility, and security testing. Covers locators, fixtures, POM, network mocking, auth flows, debugging, CI/CD (GitHub Actions, GitLab, CircleCI, Azure, Jenkins), framework recipes…
zebbern/claude-code-guide★ 4.7kMITFolder:
playwrightdesign code
Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS). Use when the user…
plugin87/ux-ui-agent-skills★ 3.1kMITFolder:
design-codesyndic
Gère un parc de copropriétés en France avec vue portfolio consolidée. Couvre administration, comptabilité (décret 2005, plan comptable copro, 5 annexes), assemblées générales (convocation, PV, notification), appels de fonds, travaux, fournisseurs,…
romainsimon/paperasse★ 2.6kMITFolder:
syndicai model web
Use this skill when a browser/Web app (React, Vue, Next, Nuxt, static sites, SPAs, dashboards, AI chat UI, 页面, 前端, 网页) needs AI models via @cloudbase/js-sdk. Default routing for Web/frontend AI — call directly from the browser, do NOT propose a Node.js…
TencentCloudBase/CloudBase-AI-Toolkit★ 1.2kMITFolder:
ai-model-webweb development
Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.
TencentCloudBase/CloudBase-AI-Toolkit★ 1.2kMITFolder:
web-developmentcloudbase sites runtime
Use when the user wants to develop, run, preview, save, deploy, or roll back a CloudBase Web app in this conversation as a Lovable/Codex-Sites-like vibe- coding session — i.e. any request that maps to "spin up a React+Vite project, see it live in the…
TencentCloudBase/CloudBase-AI-Toolkit★ 1.2kMITFolder:
cloudbase-sites-runtimeadd localization
Adds or extends multilingual localization in a Power Pages code-site SPA. Use whenever the user asks to translate, localize, internationalize, support multiple languages, add a language selector, add locale routes, repair an i18n setup, or add languages to…
microsoft/power-platform-skills★ 1.1kMITFolder:
add-localizationcreate site
Creates a new Power Pages site from an SPA or non-SPA template, or scaffolds an SPA from scratch using React, Angular, Vue, or Astro. Guides requirements discovery, template selection, provisioning, design, validation, and deployment. Use when the user…
microsoft/power-platform-skills★ 1.1kMITFolder:
create-sitefrontend dev
前端开发规范,包含 Vue 3 编码规范、UI 风格约束、TypeScript 规范等
doccker/cc-use-exp★ 1.1kLicence: see repoFolder:
frontend-devcc frontend dev
前端开发规范,包含 Vue 3 编码规范、UI 风格约束、TypeScript 规范等
doccker/cc-use-exp★ 1.1kLicence: see repoFolder:
cc-frontend-devfrontend safety
前端修改安全约束。当用户修改 Vue/React 组件、调整页面布局、创建覆盖层/蒙版组件时激活。提供数据绑定保护、布局一致性规范、覆盖层定位规范。
doccker/cc-use-exp★ 1.1kLicence: see repoFolder:
frontend-safetybtc connect
专业的比特币钱包连接技能,支持btc-connect core、react、vue包在React、Vue、Next.js、Nuxt 3项目中的完整集成,包含UniSat和OKX钱包适配、网络切换功能、SSR环境配置、统一Hook API和v0.5.0最新特性
Microck/ordinary-claude-skills★ 408Licence: see repoFolder:
btc-connectplaywright frontend
For frontend engineers authoring UI — how to make components reliably locatable by tests and AI agents. Covers the official Playwright locator priority, semantic/accessible markup first, and how to add valid, unique, stable `data-testid` attributes (naming…
testdino-hq/playwright-skill★ 405MITFolder:
frontendvueuse functions
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
vueuse/skills★ 402MITFolder:
vueuse-functionstailwind css patterns
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive…
giuseppe-trisciuoglio/developer-kit★ 366MITFolder:
tailwind-css-patternstypescript docs
Generates comprehensive TypeScript documentation using JSDoc, TypeDoc, and multi-layered documentation patterns for different audiences. Use when creating API documentation, architectural decision records (ADRs), code examples, and framework-specific…
giuseppe-trisciuoglio/developer-kit★ 366MITFolder:
typescript-docsseo autopilot
全自动 SEO 内容新鲜度引擎。监听关键词研究报告目录,自动生成落地页和博客文章,运行 SEO 审计后推送更新。适用于任何需要定期更新内容以保持 Google 排名新鲜度的网站项目。支持 Next.js / Astro / Nuxt 等主流框架。
kennyzir/7deer_skills★ 331MITFolder:
seo-autopilotnodejs development
Node.js development guidelines covering Payload CMS, Vue.js with TypeScript, and general TypeScript best practices
Mindrally/skills★ 288Apache-2.0Folder:
nodejs-developmentui ux pro max
Use when planning, building, designing, code review, refactor, fixing, improving, optimizing, enhancing, or checking UI/UX work. Covers product patterns, landing pages, chart choices, visual styles, palettes, typography, UX rules, and 9 stacks (React,…
majiayu000/spellbook★ 288MITFolder:
ui-ux-pro-maxiphone duo capacitor
Adapt a Capacitor or Ionic app to iPhone Duo, Apple's first foldable iPhone — why the standard Device Posture and Viewport Segments CSS does not reach a web view, what CSS gives you today, and how to get fold state, hinge angle and bar placement from the…
mirzaaghazadeh/iphone-duo-skills★ 258Licence: see repoFolder:
iphone-duo-capacitorCypress Component Testing
Component testing with Cypress including mount API, React/Vue/Angular component testing, stub patterns, and visual snapshot testing.
PramodDutta/qaskills★ 244MITFolder:
cypress-component-testingCypress v14 Component Testing
Component testing patterns with Cypress v14 including React, Vue, and Angular component mounting, custom mount commands, interaction testing, visual snapshots, and integration with Vite and Webpack bundlers.
PramodDutta/qaskills★ 244MITFolder:
cypress-component-v14marking up pages
Let the user draw on a live web page in Chrome (circle, underline, arrow) and type a note per mark, then read back what each mark points at - element, selector, computed styles, React/Vue/Svelte component and source file - plus console errors and failed…
oaustegard/claude-skills★ 157MITFolder:
marking-up-pageshig doctor audit
Audit interface source with HIG Doctor when the user asks to scan, lint, review, or remediate Swift, UIKit, AppKit, React, Vue, Svelte, Angular, Compose, Android XML, Flutter, CSS, or HTML for HIG-aligned interface and accessibility concerns. Do not…
raintree-technology/hig-doctor★ 148MITFolder:
hig-doctor-auditmicro frontend architect
Expert guide for designing Micro-Frontend architectures using Webpack Module Federation, Vite Federation, and Single-SPA for large scale Vue and React applications.
roedyrustam/vibes-plug★ 116MITFolder:
micro-frontend-architectartisan
Implementing production frontend code for React/Vue/Svelte: hooks design, state management, Server Components, form handling, data fetching. Converts Forge prototypes to production quality.
simota/agent-skills★ 96MITFolder:
artisancraft site
Craft CMS 5 front-end Twig development — atomic design, template architecture, components, Vite buildchain. Covers atoms/molecules/organisms, props/extends/block patterns, layout chains, view routing, content builders, image presets, Tailwind named-key…
michtio/craftcms-claude-skills★ 86MITFolder:
craft-siteuniver integrate
Integrate Univer Sheets, Docs, or Slides into React, Vue 3, HTML, or Node.js projects. Use when embedding Univer, choosing preset or plugin mode, initializing instances, configuring themes/locales/workers, or manipulating workbooks, worksheets, ranges,…
dream-num/skills★ 79Apache-2.0Folder:
univer-integratefrontend upgrade ops
Upgrade a server-rendered Craft CMS/Twig front end: Laravel Mix or Webpack to Vite via craft-vite (manifest, DDEV dev server, HMR, Tailwind v3, legacy builds, Twig asset URLs) and Vue 2 to Vue 3 (@vue/compat, Vuex to Pinia, plugin swaps, Vue islands in…
0xDarkMatter/claude-mods★ 78MITFolder:
frontend-upgrade-opsmigrate ops
Framework and language migration patterns - version upgrades, breaking changes, dependency audit, safe rollback. Use for: migrate, migration, upgrade, version bump, breaking changes, deprecation, dependency audit, npm audit, pip-audit, codemod,…
0xDarkMatter/claude-mods★ 78MITFolder:
migrate-opsfrontend patterns
Framework-agnostic React/Vue patterns — component composition, hooks, TanStack Query, memoization, error boundaries. Use for generic React/Vue work (Vite, CRA, Storybook). For Next.js App Router / Server Components specifically, use `senior-frontend` instead.
tranhieutt/software_development_department★ 74MITFolder:
frontend-patternssenior frontend
Next.js App Router specific patterns — Server Components, Client Components boundary, parallel fetching, bundle analysis, a11y. Use ONLY for Next.js 13+ App Router projects. For generic React/Vue patterns, use `frontend-patterns` instead.
tranhieutt/software_development_department★ 74MITFolder:
senior-frontendchrome extension wxt
Build Chrome extensions with the WXT framework and TypeScript, React, Vue, or Svelte. Use when creating browser extensions or cross-browser add-ons. Triggers on "chrome extension", "browser extension", WXT, manifest v3, or wxt.config.ts.
tenequm/skills★ 40MITFolder:
chrome-extension-wxttanstack form
Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, Lit, and Svelte.
tanstack-skills/tanstack-skills★ 36MITFolder:
tanstack-form
Claude skills for Vue: what people ask
Is there a Claude skill for Vue?
There are 123 of them, spread over 49 repositories on GitHub. Named for it and most starred: vue expert js (Jeffallan/claude-skills, ★ 12k), vue expert (Jeffallan/claude-skills, ★ 12k) and nuxt (antfu/skills, ★ 6k). Stars rate the repository a skill sits in, not the skill.
How do I install a Claude skill for Vue?
For Vue, take the vue-expert-js folder from Jeffallan/claude-skills (the folder that holds SKILL.md) into ~/.claude/skills/ to use it in every Claude Code project, or into .claude/skills/ for one project. In the Claude apps, zip that folder and upload it as a custom skill in settings.
What should I check before installing a Vue skill?
A Vue skill is instructions Claude follows, and it can bundle scripts Claude runs, so read SKILL.md and every script first: for vue expert js, that is everything in the vue-expert-js folder. 1 of the 50 here, kit vue, come from repositories with under 10 stars, so few people have looked at it. Red flags: piping a download into a shell, sending files to a URL, and instructions to hide what it does from you.
Are these Vue skills maintained?
65 of the 123 Vue skills sit in repositories that changed in the 30 days before 31 Oct 2026.
Are these Vue skills official?
No. None of the 123 Vue skills comes from Anthropic's own skills repository, so all of them are community-made across 49 repositories.
Can I use these Vue skills at work?
Of the 50 Vue skills listed here, 44 sit in repositories under an open licence such as MIT or Apache 2.0, and kit vue states no licence at all, which legally means you may not reuse it. Check the licence file before you copy one into company work.
More topics: every “Claude skills for…” page.