/frontend-vue-development

编写 BK-CI 前端 Vue 页面和组件时使用，例如 Vue 组件开发、Vuex 状态管理、接口调用、样式约定和页面交互实现。当用户要改前端页面而不是后端服务时优先使用。

tencentblueking@tencentblueking

GitHub

From plugin

bk-ci

2.5k42 skills

Install

$ npx -y skills add tencentblueking/bk-ci --skill frontend-vue-development --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/frontend-vue-development

Context preview

The summary Claude sees to decide when to auto-load this skill.

编写 BK-CI 前端 Vue 页面和组件时使用，例如 Vue 组件开发、Vuex 状态管理、接口调用、样式约定和页面交互实现。当用户要改前端页面而不是后端服务时优先使用。

SKILL.md

frontend-vue-development.SKILL.md

name: frontend-vue-development
description: 编写 BK-CI 前端 Vue 页面和组件时使用，例如 Vue 组件开发、Vuex 状态管理、接口调用、样式约定和页面交互实现。当用户要改前端页面而不是后端服务时优先使用。

前端 Vue 开发

适用场景

开发或修改 Vue 组件
处理 Vuex 状态、路由和页面交互
调用后端接口并渲染页面数据
按项目约定组织样式和组件结构

不适用场景

后端接口设计与实现
Go Agent 或后端服务开发
只是修改普通文档或 skill

快速指导

1. 这个 skill 关注的是 BK-CI 前端页面开发约定，不是通用 Vue 教程。 2. 先保持组件职责单一，页面状态和接口调用不要混成不可维护的大组件。 3. 项目里更重要的是一致性：命名、缩进、组件顺序、API 调用方式和错误处理模式要统一。 4. 组件开发时优先明确三件事：数据来源、交互状态、和谁通信。 5. 如果需求本质是后端契约变化，先联动看 `api-interface-design` 和 `backend-microservice-development`。

高信号规则

页面逻辑、接口调用和展示状态要有清晰边界
组件越靠近业务交互，越要避免隐式副作用
与后端交互时，错误态和 loading 态必须一起设计

关键陷阱

把接口请求、复杂状态和展示细节全堆在一个组件里
只做成功路径，不处理空态、失败态和权限态
因为赶进度绕开现有约定，导致风格碎片化

Other skills on bk-ci.

See all 42 skills in bk-ci