mcpField
F
frontend-vue-development

frontend-vue-development

github.com/tencentblueking開発2.5k179 回インストール2 日前に更新
リポジトリ

frontend-vue-development について

BK-CI のフロントエンド開発者向け Vue 開発スキルです。コンポーネント、状態、ルーティング、API 連携を扱い、プロジェクトの規約とページロジック・データ・表示状態の分離を重視します。

主な機能

  1. 01Vue コンポーネントの規約
  2. 02Vuex の状態とルーティング
  3. 03バックエンド API 呼び出しとデータ表示
  4. 04エラー状態とローディング状態の設計
  5. 05コンポーネントの責務と境界

活用シーン

  1. 01Vue コンポーネントの開発・変更
  2. 02ページ状態とルート連携の処理
  3. 03API 呼び出しとページデータの表示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/tencentblueking/bk-ci --skill frontend-vue-development

インストール後、Claude Code で/frontend-vue-developmentを入力して読み込まれたか確認します。

詳細

プロジェクトの README より

前端 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

コメント

Markdown 対応