Skip to content
CI/CD
Skill

/frontend-vue-development

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

BOOST
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.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • 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 态必须一起设计

关键陷阱

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

延伸阅读

  • 如果你在改接口契约:再看 `api-interface-design`
  • 如果你在改后端实现:再看 `backend-microservice-development`
Ships withbk-ci

蓝鲸持续集成平台(蓝盾)

Get the whole plugin

Other skills on bk-ci.

00-bkci-global-architecture
Skill

00-bkci-global-archite…

用于跨模块开发、排查链路归属、判断某个需求应该落在哪个 BK-CI 模块,或需要快速理解流水线全链路协作时使用。单模块修改时优先读取对应模块 skill,而不是停留在这里。

agent-module-architecture
Skill

agent-module-architect…

处理 BK-CI Agent 构建机侧能力时使用,例如守护进程、心跳、Ask 轮询、任务拉起、升级更新和与 Dispatch/Worker 的协作。当用户要改构建机宿主侧行为而不是…

api-interface-design
Skill

api-interface-design

设计 BK-CI API 契约时使用,例如 Resource 路径设计、HTTP 方法选择、请求响应对象、错误码和版本策略。当用户要定义接口而不是实现业务逻辑时优先使用。

auth-module-architecture
Skill

auth-module-architectu…

处理 BK-CI Auth 模块时使用,例如 RBAC 权限校验、用户组与资源管理、IAM 集成、授权迁移和 OAuth2 认证。当用户要改权限平台实现而不是单次权限模型变更时优先使用。