菜单
Console 前端交付范式：4 道门禁驱动的前端开发流程。Use when: 新增前端能力、settings section 迁移、新增页面、重构布局、或 F190/Console 级前端流程需要 Product/Design/Implementation/Verification gate。 Not for: 小样式点改、纯后端 API、纯计算逻辑、独立 Design System token 定义。 Output: 通过 Product / Design-System / Implementation / Verification gate 的前端代码与证据。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/zts212653/clowder-ai --skill console-dev命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | console-dev |
| tips_exempt | internal shared-reference coordinate repair; no user-visible capability change |
| description | Console 前端交付范式：4 道门禁驱动的前端开发流程。Use when: 新增前端能力、settings section 迁移、新增页面、重构布局、或 F190/Console 级前端流程需要 Product/Design/Implementation/Verification gate。 Not for: 小样式点改、纯后端 API、纯计算逻辑、独立 Design System token 定义。 Output: 通过 Product / Design-System / Implementation / Verification gate 的前端代码与证据。 |
Console 前端开发先定入口和状态，再写组件。这个 skill 不替代 tdd / quality-gate，它补齐前端特有的产品路径、设计 token、交互状态和视觉证明。
先回答：用户从哪里进入？这个能力属于哪个层级？
| 层级 | 用途 | 门槛 |
|---|---|---|
| L1 Activity Bar | 每天使用的核心入口 | 极慎重，通常需要 operator 决策 |
L2 /settings | 管理/配置 UI | 默认放这里 |
| L3 settings 子 tab | 只读、分析、运维子视图 | 自助选择合适分区 |
| L4 独立 route | 需要专属布局/流程的体验 | 先讨论入口理由 |
涉及状态的 UI 必须列状态矩阵：loading / empty / partial / full / error，owner / member / guest / unauthenticated，desktop / mobile。
新代码 token first：颜色、边框、语义状态优先复用现有 CSS variables 和组件 primitive。旧代码迁移可以渐进，但 debt 清单只能减少，不能因为新功能扩大豁免。
| 规则 | 处置 |
|---|---|
| 200 行 | 触发拆分审查 |
| 350 行 | 默认必须拆，除非结构理由写清楚 |
| 敏感值 | 展示值和提交值分离；redacted placeholder 不能回写 |
| settings migration | 写清 Source Behavior / Must Preserve Home Behavior / Decision / Proof |
拆分方向优先是视觉独立 sub-component，不是把小工具函数切碎。
必须给证据：
| 错误 | 后果 | 修复 |
|---|---|---|
| 先写组件再找入口 | L1 导航膨胀，后续难回滚 | 先过 Product Gate |
| 把 source PR 整块搬进 settings | 带入 service/auth/chat 红区 | manual-port 到最小 source intent |
| 用 hardcoded 视觉值补样式 | 设计体系继续分叉 | 先查 token / primitive |
| 展示用 redacted 值进入 draft | 覆盖真实 secret | display value 和 submit payload 分层 |
| 只跑类型检查 | UI 状态、滚动、modal 回归漏检 | focused test + 浏览器 proof |
tdd：负责测试驱动实现；console-dev 负责前端入口、状态和视觉门禁。browser-preview：负责打开/验证页面；console-dev 定义你要验证什么。quality-gate：交付前总门禁；console-dev 是前端子门禁。pencil-design：产出设计稿；console-dev 把设计稿落到运行态。../.cat-cafe-shared-refs/f190-frontend-lessons.md — F190 Console intake 的具体案例。docs/architecture/feature-placement.md — Console 入口层级决策树。