frontend-vue-development
Provides standards and best practices for Vue component development, Vuex state management, and API integration.
Install
mkdir -p .claude/skills/frontend-vue-development && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/2149" && unzip -o skill.zip -d .claude/skills/frontend-vue-development && rm skill.zipInstalls to .claude/skills/frontend-vue-development
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
编写 BK-CI 前端 Vue 页面和组件时使用，例如 Vue 组件开发、Vuex 状态管理、接口调用、样式约定和页面交互实现。当用户要改前端页面而不是后端服务时优先使用。Key capabilities
- →Develop and refactor Vue components
- →Implement Vuex state management patterns
- →Integrate frontend services with backend APIs
- →Enforce consistent naming and styling conventions
- →Handle error and loading states for API calls
How it works
The skill provides a set of development conventions for Vue projects. It guides the user to separate concerns between logic, interface, and state, ensuring consistent API communication and error handling.
Inputs & outputs
When to use frontend-vue-development
- →Develop or refactor Vue components
- →Implement Vuex state management
- →Integrate frontend services with backend APIs
About this skill
前端 Vue 开发
适用场景
- 开发或修改 Vue 组件
- 处理 Vuex 状态、路由和页面交互
- 调用后端接口并渲染页面数据
- 按项目约定组织样式和组件结构
不适用场景
- 后端接口设计与实现
- Go Agent 或后端服务开发
- 只是修改普通文档或 skill
快速指导
- 这个 skill 关注的是 BK-CI 前端页面开发约定，不是通用 Vue 教程。
- 先保持组件职责单一，页面状态和接口调用不要混成不可维护的大组件。
- 项目里更重要的是一致性：命名、缩进、组件顺序、API 调用方式和错误处理模式要统一。
- 组件开发时优先明确三件事：数据来源、交互状态、和谁通信。
- 如果需求本质是后端契约变化，先联动看
api-interface-design和backend-microservice-development。
高信号规则
- 页面逻辑、接口调用和展示状态要有清晰边界
- 组件越靠近业务交互，越要避免隐式副作用
- 与后端交互时，错误态和 loading 态必须一起设计
关键陷阱
- 把接口请求、复杂状态和展示细节全堆在一个组件里
- 只做成功路径，不处理空态、失败态和权限态
- 因为赶进度绕开现有约定，导致风格碎片化
延伸阅读
- 如果你在改接口契约：再看
api-interface-design - 如果你在改后端实现：再看
backend-microservice-development
When not to use it
- →When modifying backend services or Go agents
- →When editing general documentation
Limitations
- →Focuses on BK-CI frontend conventions
- →Does not cover backend interface design or implementation
How it compares
It enforces project-specific BK-CI frontend standards rather than providing generic Vue tutorials, ensuring consistency across the codebase.
Compared to similar skills
frontend-vue-development side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-vue-development (this skill) | 3 | 3mo | No flags | Intermediate |
| vue-best-practices | 19 | 4mo | No flags | Intermediate |
| vue-testing-best-practices | 5 | 6mo | No flags | Intermediate |
| vue-debug-guides | 4 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by TencentBlueKing
View all by TencentBlueKing →You might also like
vue-best-practices
antfu
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-testing-best-practices
vuejs-ai
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
vue-debug-guides
vuejs-ai
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
vue-router-best-practices
antfu
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
vueuse
onmax
Use when working with VueUse composables - provides reactive utilities for state, browser APIs, sensors, network, animations. Check VueUse before writing custom composables - most patterns already implemented.
reka-ui
onmax
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.