Vue.js
FrontendCommonly used with
Skills using Vue.js (341)
web-design-reviewer
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
ai-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 proxy. Covers generateText and streamText; models via ai.createModel with groups cloudbase, hunyuan-exp, or custom-*, model id in the `model` field. MUST run two-step preflight before code — see body. NOT for Node.js backend (use ai-model-nodejs), Mini Program (use ai-model-wechat), or image generation (Node SDK only).
development
开发语言能力索引。Python、Go、Rust、TypeScript、Java、C++、Shell。当用户提到编程、开发、代码、语言时路由到此。
aurakit
Sonnet Amplified fullstack engine. 34 modes, SEC-01~15 OWASP security, 13 runtime hooks, 75% token reduction. Install: npx @smorky85/aurakit
sharedtech-stack-detection
检测项目技术栈的通用方法，通过分析配置文件识别语言、框架、工具链
app-builder
App scaffolding: Next.js, Vite, Nuxt, Astro, FastAPI, Django, Laravel, RN, Flutter. Triggers: scaffold, bootstrap, new project, starter, dashboard, mobile app.
explore
Explores codebase structure, stack, and architecture. Triggers: explore codebase, project structure, stack overview, architecture map.
angular
Use when building, refactoring, or debugging Angular (v20/21+): standalone components, signals, zoneless change detection, @if/@for/@defer control flow, inject() DI, resource()/httpResource(), RxJS interop, NgRx SignalStore, ng CLI. NOT React (that is react), NOT Next.js (that is nextjs), NOT a TypeScript language question (that is typescript).
frontend-component
Create React/Vue component with TypeScript, tests, and styles. Auto-invoke when user says "create component", "add component", "new component", or "build component".
better-auth
Skill for integrating Better Auth - comprehensive TypeScript authentication framework for Cloudflare D1, Next.js, Nuxt, and 15+ frameworks. Use when adding auth, encountering D1 adapter errors, or implementing OAuth/2FA/RBAC features.
bun-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.
gsap-frameworks
Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framework animation unless another library is specified. For React use gsap-react.
adapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
animate
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
audit
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
blog-scout
掃描內部知識資產（clade pitfalls / conventions / bp 沉澱），對照 yudefine-blog 已發表文章去重後，產出一份排序過的部落格選題建議報告。Use when 使用者說「掃一下有什麼可以寫成文章」「部落格選題」「blog scout」「下一��要寫什麼」「盤點部落格素材」。只做選題建議，NOT for 寫文章成稿（成稿一律主線自己寫，per agent-routing § 派不派），NOT for 直接改 yudefine-blog 任何檔案（產出是給人看的建議，落地是另一步）。
bolder
Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.
change-loop
Use when 使用者要把 change 自主推進到 ready（「自動推」），或 routine --unattended fire。NOT for 一次性任務、interval 盲跑（用 /loop）、逐項拍板（用 /goal）。
clarify
Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.
colorize
Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.
critique
Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.
delight
Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.
distill
Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.
guide
Hub skill 地圖：所有 hub-core skill 的使用場景、邊界與銜接流程（router，零 context 成本）。
handoff
Use when user types /handoff. Session 交接管理：有 in-progress 工作時寫入交接，沒有時整理 HANDOFF.md + 推薦 outstanding。
layout
Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
nuxt-data-audit
Use when 審計 Nuxt 專案 data-fetching 模式與效能 golden path checklist。
optimize
Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.
overdrive
Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.
polish
Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.
quieter
Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.
spectra-audit
Audit changed code for security sharp edges — dangerous defaults, type confusion, and silent failures
spectra-debug
Systematically debug a problem using a four-phase workflow
spectra-discuss
Have a focused discussion about a topic and reach a conclusion
spectra-drift
Detect drift between a Spectra change and the current codebase state
spectra-ingest
Update an existing Spectra change from external context
spectra-propose
Create a change proposal with all required artifacts
vueuse-functions
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
spectra-analyze
Analyze artifact consistency for a change
spectra-apply
Implement or resume tasks from a Spectra change
spectra-archive
Archive a completed change
spectra-ask
Query openspec/documents and answer questions
spectra-commit
Commit files related to a specific Spectra change
spectra-verify
Verify implementation matches artifacts
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks (React, Next.js, Vue, Nuxt, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, WPF, WinUI, Avalonia, Uno Platform, UWP, Three.js, and HTML/CSS). Use when designing, building, or reviewing UI: pages, components, color schemes, typography, layout, accessibility, animation, or data visualization.
vue-testing-best-practices
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
analyze-logs
Analyze application logs from the .evlog/logs/ directory. Use when debugging errors, investigating slow requests, understanding request patterns, or answering questions about application behavior. Reads structured NDJSON wide events written by evlog's file system drain.
bp
把一條最佳實踐登記進 clade 的正確落點，或查新專案該套用哪些既有標準。Use when 使用者送 `\bp`、說「這個記成最佳實踐」「這條規範收進 clade」，或問新專案該套哪些現成標準。NOT for 寫進 memory，NOT for 散播既有改動（走 clade-publish）。
commit
Use when 使用者要求提交工作區變更、merge back 已完成 worktree，或 worktree 就緒佇列達到提交條件；需要拆成多筆時同樣適用。NOT for 把 clade 改動散播到 consumer（走 /clade-publish），NOT for 新建實作 worktree（走 /wt）。
data-sanity
Use when running Design Review, before delivering a work item for manual review, or ad-hoc on changes touching paginated queries. Detects client-server schema mismatch. NOT for 一般 code review（走 review-rules）。
dep-upgrade
單 consumer outdated batch、跨 fleet 單套件 sweep，或第三方 skill 的上游偵測與同步。
design
Use for /design new, /design improve, /design iterate, /design health. NOT for coding UI or single-skill tasks.
design-retro
Design review findings 的跨 spec 回顧。Use when 一件含 UI 的工作收尾完成、`docs/design-review-findings.md` 累積到 5 的倍數，或使用者要檢討重複出現的 UI 問題。NOT for 單一 spec 的 design review（走 /design）。
document-writer
Use when writing blog posts or documentation markdown files - provides writing style guide (active voice, present tense), content structure patterns, and MDC component usage. Overrides brevity rules for proper grammar. Use nuxt-content for MDC syntax, nuxt-ui for component props.
gh-ci-watch
Use when 需要監看或查詢 GitHub Actions（push 後盯 CI / deploy 綠燈、等某 run 或某 SHA 完成、撈 run log 證據、查 runner 佇列）。NOT for 修 CI 紅燈本身（那是拿到結果後的除錯流程）。
harden
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.
motion
Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt
nuxt
Use when working on Nuxt 4+ projects — server routes, routing, middleware, composables, h3 v1 helpers, nitropack v2. Updated for Nuxt 4.3+.
nuxt-better-auth
Use when implementing auth in Nuxt apps with @onmax/nuxt-better-auth - provides useUserSession composable, server auth helpers, route protection, and Better Auth plugins integration.
nuxt-content
Use when working with Nuxt Content v3, markdown content, or CMS features in Nuxt - provides collections (local/remote/API sources), queryCollection API, MDC rendering, database configuration, NuxtStudio integration, hooks, i18n patterns, and LLMs integration
nuxt-modules
Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation.
nuxthub
Use when building NuxtHub v0.10.6 applications - provides database (Drizzle ORM with sqlite/postgresql/mysql), KV storage, blob storage, and cache APIs. Covers configuration, schema definition, migrations, multi-cloud deployment (Cloudflare, Vercel), and the new hub:db, hub:kv, hub:blob virtual module imports.
pinia
Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.
playwright-best-practices
Use when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, testing accessibility (axe-core), file uploads/downloads, date/time mocking, WebSockets, geolocation, permissions, multi-tab/popup flows, mobile/responsive layouts, touch gestures, GraphQL, error handling, offline mode, multi-user collaboration, third-party services (payments, email verification), console error monitoring, global setup/teardown, test annotations (skip, fixme, slow), test tags (@smoke, @fast, @critical, filtering with --grep), project dependencies, security testing (XSS, CSRF, auth), performance budgets (Web Vitals, Lighthouse), iframes, component testing, canvas/WebGL, service workers/PWA, test coverage, i18n/localization, Electron apps, or browser extension testing. Covers E2E, component, API, visual, accessibility, security, Electron, and extension testing.
reka-ui
Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.
review-archive
Use when 人工檢查已結束需歸檔 review 結果 — spectra 流程自動觸發，或使用者要求歸檔 review。
review-logging-patterns
Review code for logging patterns and suggest evlog adoption. Guides setup on Nuxt, Next.js, SvelteKit, Nitro, TanStack Start, React Router, NestJS, Express, Hono, Fastify, Elysia, Cloudflare Workers, and standalone TypeScript. Detects console.log spam, unstructured errors, and missing context. Covers wide events, structured errors, drain adapters (Axiom, OTLP, HyperDX, PostHog, Sentry, Better Stack, Datadog), sampling, enrichers, and AI SDK integration (token usage, tool calls, streaming metrics, telemetry integration, cost estimation, embedding metadata).
review-readiness-scan
Use when 批次掃描多個 change 的 manual review readiness。NOT for 單一 change 逐項 review（走 pnpm review GUI）。
spectra
Spectra orchestrator — auto-detect which spectra sub-skill to invoke based on project state and user intent. NOT for clade 中央倉自身（不使用 spectra），NOT for 已知要跑哪一支時（直接呼叫該 skill）。
supabase
Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, declarative schemas, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector); debugging and troubleshooting errors or unexpected behavior on Supabase projects (HTTP errors, Postgres errors, RLS surprises, permission denied, schema cache issues, timeouts, Edge Function crashes, Realtime drops, Storage failures) and reading or querying logs (Logs Explorer, ClickHouse).
vitepress
VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
vitest
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
vue
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.
vue-best-practices
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.
work-loop
Use when 使用者要把待辦自主推進（「自動推」「把待辦跑完」「無人值守推進」）——plan package、tasks 檔、HANDOFF、tech-debt、ROADMAP 全在 scope 內，或 runner.sh --unattended fire。NOT for 單次盤點交接（用 /handoff）、逐項拍板（用 /goal）、interval 盲跑（用 /loop）。
ui-ux-pro-max
UI/UX design intelligence. Searchable local database with 67 styles, 161 palettes, 57 font pairings, 25 charts, and 21 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, WPF, WinUI 3, UWP, Avalonia, Uno Platform, Nuxt, Nuxt UI, Tailwind, shadcn/ui, Jetpack Compose, Three.js, Angular, Laravel). Use when designing, building, or reviewing UI: pages, components, color schemes, typography, layout, accessibility, animation, or data visualization.
scaffold-project
Scaffold a new project with standard structure, configs, and CLAUDE.md
tech-radar
MUST use when user asks 'what's new?', 'any updates?', 'latest versions?', 'breaking changes?', 'should we upgrade?', 'what changed in X?', or when starting a new project. Detects dependencies dynamically from `package.json` / `requirements.txt` / `go.mod` / `composer.json` first, then reports per-package: latest version (vs. installed), breaking changes since installed version, security advisories (CRITICAL/HIGH), and deprecation warnings. Falls back to a generic stack table only when no manifest file is found.
delivery-bootstrap
Use when starting implementation on a new or unfamiliar codebase. Auto-detects tech stack and sets up development context.
lazy-agent-loader
Load agent definitions on-demand to reduce context usage. Only loads full agent when needed.
holix-studio-frontend-backend
Run frontend (and FE+BE) apps in Holix Studio: always bind 0.0.0.0, always open Studio preview links in chat, always prefer docker-compose with an nginx reverse proxy that joins frontend and backend. Use when starting Vite/Next/Nuxt/React, SPA+API monorepos, or any web app the user should open in Studio Browser. Invoke via /holix-studio-frontend-backend.
security-evidence
Use when 要判一則 Codex Security finding 是真漏洞還是假警報（finding mode），或上線前要分清 repo / staging / production 各層還缺哪些安全證據（map mode）。NOT for 修 code、跑掃描、寫 SECURITY.md。
supabase-postgres-best-practices
Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill BEFORE writing or changing anything that lives in a Postgres database: creating or altering tables and columns (including choosing column types), schema design, migrations and declarative schema files, RLS policies and the tests that verify them, indexes, triggers, database functions, queues and scheduled jobs (pg_cron, pgmq), vector/semantic search (pgvector), and restoring dumps (pg_restore) or importing data. Also load it when diagnosing slow queries, high CPU, timeouts, EXPLAIN plans, connection exhaustion, locking, bloat, or rows visible to the wrong user or tenant. This is not just a performance guide — schema, migration, security, and SQL authoring tasks need these rules too, even for a one-column change or a single query.
all-deploy
Deploys websites, web apps, APIs, and agents to the internet with a strict pre-deploy audit and a preview → health-check → prod flow. Handles plain HTML/CSS/JS pages and static sites (Astro, Hugo, Jekyll, Eleventy, Vite) as well as Next, Remix, Nuxt, SvelteKit, FastAPI, Flask, Express, MCP servers, Claude Agent SDK scripts, Python workers, and Dockerized projects. Routes to free static hosts — Cloudflare Pages, Netlify, GitHub Pages, Render — or to Vercel, Railway, Docker+SSH VPS, or a cloudflared tunnel, and can also run the project locally. Use when the user says "/all-deploy", "/deploy", "/despliega", "deploy this", "ship this", "push to prod", "get this online", "publish my website", "sube mi página web", "publicar mi página", "hosting gratis", "free hosting", "custom domain", "dominio propio", "run it locally", "corre esto localmente", or otherwise asks to publish a site or project to a URL.
better-auth-best-practices
Configure Better Auth server and client, set up database adapters, manage sessions, add plugins, and handle environment variables. Use when users mention Better Auth, betterauth, auth.ts, or need to set up TypeScript authentication with email/password, OAuth, or plugin configuration.
better-auth-security-best-practices
Configure rate limiting, manage auth secrets, set up CSRF protection, define trusted origins, secure sessions and cookies, encrypt OAuth tokens, track IP addresses, and implement audit logging for Better Auth. Use when users need to secure their auth setup, prevent brute force attacks, or harden a Better Auth deployment.
build-audit-logs
Build or review audit trails in TypeScript/JavaScript apps using evlog (pipelines, typed actions, denials, retention, compliance-style reviews). For application code, not for extending the evlog package.
cf-crawl
Use when 要爬整個網站、匯入文件站、抓 knowledge base、或批次擷取 web content。需 CLOUDFLARE_ACCOUNT_ID + CLOUDFLARE_API_TOKEN。
impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
nuxt-auth-utils
Use when implementing auth in Nuxt apps with nuxt-auth-utils - provides useUserSession composable, OAuth handlers, cookie-based sessions, and route protection. Works on all deployment targets without DB dependency.
nuxt-ui
Use when building styled UI with @nuxt/ui v4 components — forms, data tables, modals, theming. Use vue for raw patterns, reka-ui for headless.
server-api
Server API 設計規範。Use when creating server/api/**/*.ts files, building API endpoints, or working with defineEventHandler. Always use this skill for API route design, request validation, error handling, and response formatting.
supabase-migration
Supabase Migration 規範。Use when running supabase migration new, editing migration SQL files, creating database functions, or modifying database schema. Always use this skill when you see CREATE FUNCTION, ALTER TABLE, CREATE INDEX, or migration-related work.
supabase-rls
Supabase RLS 政策規範。Use when creating or modifying RLS policies (CREATE POLICY, ALTER POLICY), setting up Row Level Security, or working with database access control. Always use this skill for RLS design, policy templates, and role-based access patterns.
test-driven-development
Use when implementing any feature or bugfix, before writing implementation code
verification-create
Use when user requests verification setup. NOT for maintenance.
verification-maintain
Use when user requests verification maintenance. NOT for setup.
workers-best-practices
Reviews and authors Cloudflare Workers code against production best practices. Load when writing new Workers, reviewing Worker code, configuring wrangler.jsonc, or checking for common Workers anti-patterns (streaming, floating promises, global state, secrets, bindings, observability). Biases towards retrieval from Cloudflare docs over pre-trained knowledge.
wrangler
Cloudflare Workers CLI for deploying, developing, and managing Workers, KV, R2, D1, Vectorize, Hyperdrive, Workers AI, Containers, Queues, Workflows, Pipelines, and Secrets Store. Load before running wrangler commands to ensure correct syntax and best practices. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.
zod
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
Showing top 100 of 341 skills using Vue.js by quality score.
See all 341 skills via search →Integration detected automatically from skill content. Some results may be false positives.