YuDefine

change-loop

Use when 使用者要把 change 自主推進到 ready（「自動推」），或 routine --unattended fire。NOT for 一次性任務、interval 盲跑（用 /loop）、逐項拍板（用 /goal）。

Data & Documents Featured

data-sanity

Use when running spectra Design Review, before /spectra-archive, or ad-hoc on changes touching paginated queries. Detects client-server schema mismatch (e.g. perPage: 200 vs max(100)).

guide

Hub skill 地圖：所有 hub-core skill 的使用場景、邊界與銜接流程（router，零 context 成本）。

handoff

Use when user types /handoff. Session 交接管理：有 in-progress 工作時寫入交接，沒有時整理 HANDOFF.md + 推薦 outstanding。

nuxt-data-audit

Use when 審計 Nuxt 專案 data-fetching 模式與效能 golden path checklist。

bp

把一條最佳實踐登記進 clade 的正確落點，或查新專案該套用哪些既有標準。Use when 使用者送 `\bp`、說「這個記成最佳實踐」「這條規範收進 clade」，或問新專案該套哪些現成標準。NOT for 寫進 memory，NOT for 散播既有改動（走 clade-publish）。

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.

work-loop

Use when 使用者要把待辦自主推進（「自動推」「把待辦跑完」「無人值守推進」）——spectra change、HANDOFF、tech-debt、ROADMAP 全在 scope 內，或 runner.sh --unattended fire。NOT for 單次盤點交接（用 /handoff）、逐項拍板（用 /goal）、interval 盲跑（用 /loop）。

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.

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.

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.

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.

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

vue-testing-best-practices

Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

Code & Development Solid

commit

Use when 使用者要求把工作區的變更寫進版本歷史，不論用詞是 commit、提交、送進 git 還是「整理一下」；需要拆成多筆時同樣適用。NOT for 把 clade 改動散播到 consumer（走 /clade-publish），NOT for 建 / 合併 worktree（走 /wt）。

dep-upgrade

單 consumer outdated batch 或跨 fleet 單套件 sweep 的依賴升級流程。

DevOps & Infrastructure Solid

gh-ci-watch

Use when 需要監看或查詢 GitHub Actions（push 後盯 CI / deploy 綠燈、等某 run 或某 SHA 完成、撈 run log 證據、查 runner 佇列）。NOT for 修 CI 紅燈本身（那是拿到結果後的除錯流程）。

design

Use for /design new, /design improve, /design iterate, /design health. NOT for coding UI or single-skill tasks.

design-retro

分析 docs/design-review-findings.md 歷史，識別跨 spec 的重複 UI 問題模式，提出流程改善建議。spectra-archive 完成或 findings 累積 5 倍數時主動觸發。

Code & Development Solid

review-archive

Use when 人工檢查已結束需歸檔 review 結果 — spectra 流程自動觸發，或使用者要求歸檔 review。

Data & Documents Solid

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.

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

Use when working on Nuxt 4+ projects — server routes, routing, middleware, composables, h3 v1 helpers, nitropack v2. Updated for Nuxt 4.3+.

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.

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.

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

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

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.

Data & Documents Solid

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.

harden

Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.

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.

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）。

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.

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.

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.

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

cf-crawl

Use when 要爬整個網站、匯入文件站、抓 knowledge base、或批次擷取 web content。需 CLOUDFLARE_ACCOUNT_ID + CLOUDFLARE_API_TOKEN。

pinia-store

Pinia Store 架構規範。Use when creating app/stores/**/*.ts files, working with defineStore, managing global state, or building Pinia stores. Always use this skill for store design patterns, naming conventions, and state management architecture.

supabase-arch

Supabase 架構決策指南。Use when planning new features, deciding between RPC vs Edge Function, choosing tech approaches, or asking architecture questions. Always use this skill for Supabase architecture decisions and technology routing.