前言¶

让模型改一个列表页，常见结果是：改完了，样式对不上，回滚时找不到改过哪些文件，下次同类需求又从头摸索一遍。这类问题的根因不是模型能力，而是缺少流程约束和上下文留存。前端开发流水线这个 Skill 的作用，就是把前端需求拆成固定阶段，每阶段留下证据，项目记忆写到本地目录里。

下面介绍这个 Skill 的定位、工作流和使用方式。

这是什么¶

「前端开发流水线」是一个面向前端 UI 改动的 Skill，坐标 @indiv-duanmk/frontend-pipeline，版本 2.11.0，由 SkillHub 社区用户 user_30eff25b 发布，分类为 dev-programming。它不绑定具体框架，React、Vue 或原生项目都按同一条流程走。

它解决的问题是：把「改个页面」「加个组件」「对接接口」这类需求，从随意改动变成有阶段、有证据、可复盘的过程。

核心功能¶

工作流分三步。

1、侦察现有代码（recon existing code）。动手前先读项目结构、已有组件和样式约定，避免按想象新建一套。

2、选择档位。提供 quick、standard、full 三档，按改动量选，而不是一律走全流程。

3、七阶段执行。按 7-phase 的顺序推进 implement → review → ship，每个阶段产出证据（evidence），并把项目记忆写入 .frontend-pipeline/memory/，供后续需求和复盘使用。

触发条件覆盖中英文描述：页面、组件、布局、样式、CSS、表单、列表、表格、筛选、弹窗、路由，以及「加个功能」「改一下」「修 bug」「对接接口」「设计稿」「不好看」「卡顿」；也响应「开发流程」「走流程」「frontend-pipeline」这类流程指令，以及前端改动后的「复盘」「自我反思」。

明确跳过的场景：纯后端逻辑、纯配置文件、非 UI 文档。

安装与启用¶

按 SkillHub 的 SKILL.md 通用格式安装，通常做法是把该 Skill 目录放进项目的 Skill 加载路径（如 Cursor 的 .cursor/skills、Claude Code 的 .claude/skills），再在对话中引用 Skill 名称。

官方资料未给出该 Skill 的具体安装命令、依赖项和 Skill 文件路径。已知配置信息：requires_api_key=false，即不需要额外 API Key；来源标记为 community，属社区发布，非官方团队维护。安装前建议先打开页面确认最新说明。

典型用法¶

工作方式是在对话里提出前端需求，并明确要走流程：

帮我在这个 Vue 项目里加一个筛选列表页，组件按现有列表页的写法来，走标准流程。

这个 React 表格有性能问题，滚动时明显卡顿，先排查再修，修完做复盘。

Skill 收到后先侦察代码，再按你指定的档位进入七阶段流程，过程中把证据和记忆写入 .frontend-pipeline/memory/。

适用场景与注意¶

适合用在：多文件、多组件的前端改动；需要可追溯证据的改动；改完要做复盘的项目。

注意几点：

• 只对前端 UI 相关需求触发，纯后端逻辑、纯配置、非 UI 文档会被跳过。
• 项目记忆依赖 .frontend-pipeline/memory/ 目录，需确认该项目目录下有写入权限。
• 三档流程的取舍规则官方资料未细化，档位选择仍需人工判断。
• 社区发布、评分 100000、下载 1461、安装 0，样本量小，实际效果建议在小改动上先试一轮。

结尾¶

这个 Skill 的价值在于给前端改动加了流程约束和上下文留存：先侦察、再选档、然后分阶段执行与交付，证据和记忆留在项目里。适合想给 AI 编程加一层流程规范的团队或个人。

官方地址：https://api.skillhub.cn/indiv-duanmk/frontend-pipeline