菜单
Frontend design & UI guide. Production-grade interface building, Web Interface Guidelines compliance review, UnoCSS semantic token system (antfu-design). Use when building web components, pages, dashboards, landing pages, or when reviewing UI/accessibility/design quality.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Unified frontend build tooling guide. Vite 8 (Rolldown bundler / dev server), Vitest 4 (testing), tsdown (library bundling), pnpm 11 (package management), Turborepo (monorepos), TypeScript 7 native compiler. Use when working with vite.config.ts, vitest, tsdown.config.ts, pnpm-workspace.yaml, turbo.json, or tsconfig.
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.
VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
Accessibility (a11y) for Vue 3 apps. Semantic templates, ARIA component patterns (modal, tabs, menu, combobox), focus management with Teleport and router navigation, accessible forms and errors, automated testing with axe. Use when building UI components, reviewing for accessibility, WCAG compliance, keyboard navigation, or screen reader support.
Server-state and data fetching for Vue 3. Pinia Colada (useQuery/useMutation, caching, invalidation, optimistic updates), Vue Router Data Loaders, choosing between fetch layers, race conditions, SSR concerns. Use when fetching API data, caching server responses, handling loading/error states, or wiring mutations in Vue apps.
Forms and validation in Vue 3. v-model/defineModel patterns, custom form controls, schema validation with VeeValidate 4 + Zod, async validation, multi-step wizards, submission states, unsaved-changes guards, accessible error messaging. Use when building or reviewing forms, inputs, validation, or file uploads in Vue.
基于 SOC 职业分类
| name | design |
| description | Frontend design & UI guide. Production-grade interface building, Web Interface Guidelines compliance review, UnoCSS semantic token system (antfu-design). Use when building web components, pages, dashboards, landing pages, or when reviewing UI/accessibility/design quality. |
Read the reference you need to load detailed knowledge.
| Area | Description | Path |
|---|---|---|
| Frontend Aesthetics | Typography, color, motion, layout, avoiding AI-generated-looking UI | frontend-aesthetics |
| Web Interface Guidelines | Vercel Web Interface Guidelines compliance review | web-guidelines |
| UnoCSS Semantic Tokens | antfu-design condensed: semantic shortcuts, dual light/dark tokens, named z-index | unocss-semantic-tokens |
For accessibility-specific reviews (WCAG, focus, ARIA) use the vue-a11y skill.
