SkillsAdd

smithery.ai

frontend-vue-development

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

First seen Mar 15, 2026

Installation

$ npx skills add https://smithery.ai
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent development Similar name
anthropics/claude-code

This skill should be used when the user asks to "create an agent", "add an agent", "write a sub…

18.1K installs
skill development Similar name
anthropics/claude-code

This skill should be used when the user wants to "create a skill", "add a skill to plugin", "wr…

18K installs
command development Similar name
anthropics/claude-code

This skill should be used when the user asks to "create a slash command", "add a command", "wri…

13.5K installs
hook development Similar name
anthropics/claude-code

This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/…

13.2K installs
apify-actor-development Similar name
apify/agent-skills

Develop, debug, and deploy Apify Actors - serverless cloud programs for web scraping, automatio…

10.3K installs
agent-development Similar name
anthropics/claude-plugins-official

This skill should be used when the user asks to "create an agent", "add an agent", "write a sub…

6.2K installs

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai
smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,704 B
  • docs SUMMARY.md 266 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 4 installs

SKILL.md

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