Design & media

Vue3 Project Standard

Try it

Use when designing or reviewing Vue 3 + TypeScript project structure, SFC/component boundaries, composables organization, route composition, Pinia ownership, API/error/styling defaults, directives, or repository-wide Vue conventions. Prefer narrower skills for forms, data fetching, tests, accessibil

What it does

为 Vue 3 + TypeScript 项目提供工程结构、组件边界、Composables 和默认实现约定，确保约定式开发和类型安全。

The skill document

Vue 3 项目规范

适用于使用 Vue 3 + TypeScript 的仓库。

Purpose

为 Vue 3 + TypeScript 项目提供工程结构、组件边界、Composables 和默认实现约定，确保约定式开发和类型安全。

Procedure

  1. 识别仓库已有 Vue 约定：目录、路由、Pinia、请求层、样式体系、组件库和测试框架。
  2. 划分页面、业务组件、通用组件、composables、stores、services 和 utils 的边界。
  3. 优先沿用 ``、组合式 API 和仓库现有自动导入/模块出口约定。
  4. 输出时补齐状态归属、API 层、错误处理、样式隔离和专项 skill 分流。
  5. 页面和模块要有可恢复错误 UI；全局 errorHandler、onErrorCaptured、请求错误映射和路由错误页分工明确。
  6. Tailwind token/variant 或响应式布局需求应分流到对应专项 skill，避免把样式系统规则塞进 Vue 组件规范。
  7. 状态归属复杂时先做状态清单；DTO、公共 props、泛型 composable 或 tsconfig 边界复杂时，先使用 TypeScript 项目规范流程收敛跨框架类型契约。
  8. 设计可复用 composable 时明确输入是否支持 plain value、ref、computed 或 getter；测试 Vue 组件时覆盖 Pinia、Router、Teleport、Suspense 和 async setup 的常见边界。

详细参考

按需要加载更细的参考文件：

  • 项目目录、组件分层、组件规范、注释和 TypeScript：加载 references/vue3-project-structure.md。
  • Composables、slots、Provide/Inject 和路由组织：加载 references/vue3-composables-routing.md。
  • Pinia、API 层、错误处理、指令、样式、测试、反模式和输出检查清单：加载 references/vue3-state-api-quality.md。
  • Vue 项目规范层面的轻量性能约定：加载 references/vue3-performance-patterns.md。

Constraints

  • 使用 ``，禁止使用 Options API 新增组件
  • 组件文件规模宜约 300 行内；逾 500 行或复杂度过高须拆子组件与 Composables
  • Props / Emits 必须使用 TypeScript interface 定义，禁止使用 any
  • Composable 返回 readonly 引用，防止外部意外修改
  • 不要在 store 中存放 UI 临时状态（modal 开关、表单输入等）
  • 服务端数据优先用请求库管理，而非手动存入 Pinia
  • 避免在 v-for 中使用 v-if（提取为 computed 过滤）
  • 禁止直接从 feature 内部深层路径导入，绕过 index.ts
  • 不用全局错误处理吞掉组件内可恢复的 API、表单或权限错误。
  • 不把函数型参数误当 getter 自动调用；composable 参数若可能是回调，应避免使用 getter 型输入约定。
  • 不依赖快照作为 Vue 组件唯一断言；异步组件、Teleport 和 Pinia 场景要有用户可见行为断言。

Expected Output

  • 组件使用 ``，Props / Emits 类型完整
  • 可复用逻辑已提取到 composable，返回 readonly 引用
  • Loading / Error / Empty / Data 状态均已处理
  • 路由组件使用动态 import 加载，状态管理符合就近原则
  • URL 状态、服务端状态、表单状态和 Pinia 全局状态边界明确
  • API 调用有类型约束和统一错误处理
  • 样式使用 scoped 隔离，关键行为有测试覆盖
  • 文件结构与项目约定一致（pages / features / components 分离）
  • 可复用 composable 的输入响应性、Pinia/Router 边界和异步组件测试策略已说明

Related skills

diagram-generator

Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.

by nssa.io1.0k installs47 stars

Productivity

Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.

by Iván855 installs69 stars

Memory

Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.

by Iván559 installs18 stars

Join meeting

Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.

by johnpatternai22 installs8 stars

AdMapix

Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.

by fly0pants4.3k installs296 stars

More from bovinphang

Browse all skills

Image Generation

Generate or edit diagrams, visual assets, and image workflows with reviewable PNG self-checks and bounded self-repair.

by bovinphang9 installs1 stars

Drawio Studio

Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI expo

by bovinphang5 installs

UI Design

Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or

by bovinphang8 installs

Nextjs Project Standard

Use when creating or reviewing Next.js 14+ App Router projects, file routes, layouts, server/client component boundaries, SSR/SSG/ISR, streaming, metadata, middleware, server actions, or Next-specific data fetching. For generic client React component architecture, apply the project's React conventio

by bovinphang10 installs1 stars

Monorepo Project Standard

Use when creating, reviewing, or restructuring frontend monorepos with pnpm workspace, Turborepo, Nx, multi-package dependency boundaries, task orchestration, package naming, or package publishing; Chinese triggers include monorepo, workspace, multi-package.

by bovinphang10 installs1 stars

Nuxt Project Standard

Use when creating or reviewing Nuxt 3 projects, file routes, pages, layouts, SSR/SSG/SPA behavior, Nuxt data fetching, route middleware, plugins, modules, server routes, or Nuxt-specific Vue 3 conventions. For generic Vue component architecture, apply the project's Vue conventions separately; Chines

by bovinphang10 installs1 stars