442 skills · sorted by relevance
Build or review Vue.js 3 and Nuxt interfaces using practical patterns for components, shared state, navigation, and tests. Learn how to organize code and manage reactivity, the mechanism that updates the interface when data changes.
Build Vue 3 interfaces from JSON specifications, including AI-generated layouts. The skill covers component registration, named content areas, synchronized form values, conditional visibility, validation, actions, and connections to external state management.
Build Vue 3 applications using JavaScript and JSDoc comments that describe data types. Create components and reusable logic, configure Vite, routing, and state management, and check annotations and behavior with ESLint and Vitest.
Convert batches of design screenshots into Vue 3 page components, reusable interface sections, and initial routing code. Map visual elements to Vant, Element Plus, or Ant Design Vue, while using supplied image assets where appropriate.
Build Vue 3 components and reusable logic, manage shared application data with Pinia, and configure Nuxt 3 projects. Supports mobile apps, offline web features, TypeScript checks, component tests, and Vite build optimization.
Develop and modify the Handsontable wrapper for Vue 3 with guidance on component structure, settings updates, column configuration, and shared data references. It also explains the build order and tests used to check wrapper changes.
Migrate Vue applications from Table v8 to v9 by checking table creation, rendering, and reactive state updates. Combine Vue-specific changes with the shared core migration checklist, then verify types and affected feature behavior.
Add and configure an inspection panel for Vue json-render apps. This skill guides setup and troubleshooting so you can inspect UI definitions, edit state, review action and stream timelines, browse catalogs, and select page elements.
Build Vue 3 components with TypeScript and Composition API, a way to organize component logic. Define inputs, events, and two-way bindings, manage reactive data, and use built-in components for transitions and state preservation.
State management decision tree for Vue 3 SPAs: ref/reactive locally, composables for shared logic, Pinia for app-wide state, provide/inject for DI, TanStack Query Vue for server state. Vuex pointer for Vue 2 legacy. Use this skill to: - Pick the right state tool for the data shape (local / shared / server / form). - Implement a Pinia store (Setup syntax preferred). - Use provide/inject correctly with InjectionKey<T>. - Set up TanStack Query Vue for server state. - Migrate from Vuex (with caution; only if BA asks). Do NOT use this skill for: - General SFC conventions (see vue-conventions). - Form state (see vue-forms — vee-validate handles that). - Routing state (see vue-routing — use vue-router useRoute). - Testing stores (see vue-testing).
The English summary is being prepared. Showing the original description.
Build GSAP animations in Vue, Svelte, and related frameworks with clear setup and cleanup patterns. Scope element selection to each component, start animations after elements exist, and remove animations when the component is destroyed.
Implement and review GSAP animations in Vue, Nuxt, Svelte, and SvelteKit. It explains when to start animations, how to limit element selection to one component, and how to clean up when that component is removed.
Read and control TanStack Table v9 state in Vue while keeping updates synchronized with the interface. Covers reactive reads, externally controlled state, update callbacks, shared state containers, and component boundaries for rendering.
Build and render Table v9 tables in Vue with guidance on keeping data updates reactive, reusing shared table components, and connecting TanStack Query for data fetching or TanStack Virtual for displaying large tables.
Connect Vue Table v9 to Devtools and troubleshoot missing tables. Covers unique table keys, reactive references that track table replacement, cleanup when targets change, and the development settings that determine whether the integration runs.
Add GSAP animations to Vue, Nuxt, Svelte, and SvelteKit components with guidance on when animations should start, which elements they affect, and how to remove animations and restore styles when components are removed.
Vue 3 SFC structure, Composition API + <script setup>, file naming, project layout, props/emits/slots typing, defineModel, composables, lifecycle, watchers, UI library detection. Vue 2 fallback notes. Use this skill to: - Structure a new SFC with `<script setup>`, template, scoped styles. - Type props/emits/slots correctly via macros. - Pick `ref` vs `reactive` (prefer `ref`). - Build composables that compose cleanly. - Apply lifecycle hooks correctly. - Detect UI library (Vuetify/Quasar/PrimeVue/Naive UI/Element Plus/shadcn-vue) and mirror its patterns. Do NOT use this skill for: - State management lib choice (see vue-state-management). - Routing (see vue-routing). - Forms (see vue-forms). - Testing (see vue-testing).
The English summary is being prepared. Showing the original description.
Vue Router v4 (Vue 3 default) — route configuration, nested routes, dynamic segments, navigation guards, lazy loading, typed routes, route meta, programmatic navigation. Vue Router v3 (Vue 2) pointer only. Use this skill to: - Configure routes with createRouter + createWebHistory. - Use useRoute / useRouter composables in components. - Lazy-load route components for code splitting. - Implement auth guards via meta + beforeEach. - Type route params for safer access. Do NOT use this skill for: - General Vue conventions (see vue-conventions). - State management (see vue-state-management). - Forms (see vue-forms). - Testing routes (see vue-testing).
The English summary is being prepared. Showing the original description.
Use for Vue 3 testing best-practices review and recommendations — designing and auditing Vitest + Vue Test Utils tests for components, composables, Pinia stores, Vue Router, async/Suspense, Teleport, forms, and accessibility, plus Playwright E2E test-design strategy. Advisory/review only — recommends patterns and flags test smells; does not run tests. Complements mk:vue-best-practices (feature code). Invoke for "review my Vue tests", "how should I test this component/composable/store", or "Vue test best practices".
The English summary is being prepared. Showing the original description.
Create Handsontable documentation examples for JavaScript, TypeScript, React, Angular, and Vue. The skill explains source files, generated JavaScript, required imports and license settings, embedding examples in guides, and checking that each framework version displays correctly.
Organize shared data and update logic in Vue apps using Pinia stores, containers for application state. The skill guides store definitions, reactive data access, communication between stores, testing, and integration with Nuxt and server-side rendering.
Build documentation sites from Markdown with VitePress, then configure navigation, search, and themes. The skill also covers embedding Vue components, organizing multilingual content, and preparing deployment settings for supported hosting platforms.
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
The English summary is being prepared. Showing the original description.
Testing Vue 3 SPAs: Vitest + @vue/test-utils, RTL-style alternatives, Pinia testing via createTestingPinia, composable testing, msw for network mocks, Cypress component testing, Playwright e2e. Use this skill to: - Set up Vitest for Vue 3 with jsdom + @vue/test-utils. - Pick mount vs shallowMount. - Test components by props/emits/slots contract. - Mock Pinia stores in tests. - Test composables in isolation. - Set up Playwright or Cypress for end-to-end. Do NOT use this skill for: - General Vue conventions (see vue-conventions). - State patterns (see vue-state-management). - Form-specific patterns (see vue-forms).
The English summary is being prepared. Showing the original description.