菜单
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 的前端代码与证据。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
约定图发现方法论：进一个 repo 先识别 repo-specific conventions，再定义 domain/extractor 接 Convention Graph 引擎。Use when: 进入陌生 repo、要画约定图、要找“改 X 影响谁”的约定层关联、 F242/Convention Graph Layer 工作。Not for: 普通符号跳转/LSP、文档索引检索、记忆图谱、直接使用 codegraph/GitNexus。Output: domain 定义 + extractor 计划 + gap/freshness/provenance 报告。 GOTCHA: 沉淀的是“怎么画图”的方法，不是把 cat-cafe 的 extractor 硬搬到所有 repo。
跨 thread 协同：发现平行 session → 通知（3+2 件套）→ 争用协调 → 确认。 Use when: 平行 session 之间需要协同、收到跨线程消息、通知改动影响、共享文件争用。 Not for: 跨猫工作交接（用 cross-cat-handoff）、需要新建 thread 时（用 propose_thread / thread-orchestration）。 GOTCHA: 收到跨线程 ACTION 不等于接活；先做 thread/feat ownership gate，不属于当前 thread 就 cross-post 退回。 Boundary with F128: 发现跨 scope 问题 → 先 list_threads 查有没有已有 thread → 有 = 本 skill（cross_post）→ 没有 = propose_thread。 Output: cross-post 通知 + 争用协调完成。
Feature 立项、讨论、完成的全生命周期管理。 Use when: 开个新功能、new feature、F0xx、立项、feature 完成、验收通过、讨论新功能需求。 Not for: 代码实现、review、merge（那些有专门的 skill）。 Output: Feature 聚合文件 + BACKLOG 索引 + 真相源同步。
明星开源项目拆解：从宣传/PPT/README 进入源码，验证真实架构、明星特性、算法含量、营销水分、可学习点和不 follow 的 tradeoff。 Use when: operator要求拆解热门 GitHub 项目、竞品 agent/runtime、外部 skill/tool 框架，或问“它到底有什么真本事/我们能学什么”。 Not for: 普通资料搜索（用 deep-research）、社区 issue/PR 运营（用 opensource-ops）、只需要架构头脑风暴（用 collaborative-thinking）。 Output: feature-discussions/YYYY-MM-DD-{project}-deep-dive/ 下的代码证据报告 + 对比结论 + 候选 lesson/skill。 GOTCHA: 不许只看 README 下判断；每个明星特性必须追到代码路径、状态突变点、反馈闭环和算法输入输出。
开发完成后的自检门禁：愿景对照 + spec 合规 + 验证。 Use when: 开发完了准备提 review、声称完成了、准备交付。 Not for: 收到 review 反馈（用 receive-review）、merge（用 merge-gate）。 Output: Spec 合规报告（含愿景覆盖度）。
接球前真相核验三问：claim → resolver → verdict (sourceTier T0/T1/T2 + actionFamily)， 防止把传球者当无审视真相源（F167 Phase O 第一性原理）。 Use when: 即将调 hold_ball / register_pr_tracking / register_issue_tracking / merge / takeover / 改 owner / 任何 irreversible action / 基于 "operator signoff" 或 "你是 owner" 类 claim 行动之前。 Not for: 纯阅读 cross_post（无 actionFamily 后续）；本 thread 日常 @mention 无副作用； implementation continuation（自检通过的下一步）。 Output: claim grounding verdict (verified/mismatch/insufficient) + 接球决策 (proceed / block / push back to source thread)。
| name | console-dev |
| 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 把设计稿落到运行态。refs/f190-frontend-lessons.md — F190 Console intake 的具体案例。docs/architecture/feature-placement.md — Console 入口层级决策树。