Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/zts212653/clowder-ai/console-devnpx skills add zts212653/clowder-ai --skill console-devgit clone --depth 1 https://github.com/zts212653/clowder-aiWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00114 | $0.00932 |
| Opus 5 | $0.00057 | $0.00466 |
| Sonnet 5 | $0.00023 | $0.00186 |
| Haiku 4.5 | $0.00011 | $0.00093 |
Grade A, and why
console-dev scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
Console-Dev
Console 前端开发先定入口和状态，再写组件。这个 skill 不替代 tdd / quality-gate，它补齐前端特有的产品路径、设计 token、交互状态和视觉证明。
Gate 1: Product Gate
先回答：用户从哪里进入？这个能力属于哪个层级？
| 层级 | 用途 | 门槛 |
|---|---|---|
| L1 Activity Bar | 每天使用的核心入口 | 极慎重，通常需要 operator 决策 |
L2 /settings |
管理/配置 UI | 默认放这里 |
| L3 settings 子 tab | 只读、分析、运维子视图 | 自助选择合适分区 |
| L4 独立 route | 需要专属布局/流程的体验 | 先讨论入口理由 |
涉及状态的 UI 必须列状态矩阵：loading / empty / partial / full / error，owner / member / guest / unauthenticated，desktop / mobile。
Gate 2: Design-System Gate
新代码 token first：颜色、边框、语义状态优先复用现有 CSS variables 和组件 primitive。旧代码迁移可以渐进，但 debt 清单只能减少，不能因为新功能扩大豁免。
Gate 3: Implementation Gate
| 规则 | 处置 |
|---|---|
| 200 行 | 触发拆分审查 |
| 350 行 | 默认必须拆，除非结构理由写清楚 |
| 敏感值 | 展示值和提交值分离；redacted placeholder 不能回写 |
| settings migration | 写清 Source Behavior / Must Preserve Home Behavior / Decision / Proof |
拆分方向优先是视觉独立 sub-component，不是把小工具函数切碎。
Gate 4: Verification Gate
必须给证据：
- Golden path 走通
- 至少覆盖一个非 happy path 状态
- 改共享 primitive 时抽样兄弟页面
- modal 检查 footer、滚动容器、sticky action、ESC/关闭行为
- 暗色/移动端如果会被影响，必须抽样
Common Mistakes
| 错误 | 后果 | 修复 |
|---|---|---|
| 先写组件再找入口 | 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 |
和其他 Skill 的区别
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 入口层级决策树。
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 74 lines · 114 tokens per session scan A 5a0d419e9d7d
console-dev is a skill published in the GitHub repository zts212653/clowder-ai (2,854 stars, last pushed yesterday), licensed MIT. It adds 114 tokens to every session and 932 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
chat-pet-sprite-creation
Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.
cpu-profile-analysis
Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…
agent-host-chat-contributions
Build and review cross-cutting agent-host chat behavior through lifecycle contributions. Use when adding turn lifecycle side effects, prompt or context injection, restored-history transformation, protocol-action observation, or when reviewing changes that add code to AgentSideEffects or AgentService.
auto-perf-optimize
Run agent-driven VS Code performance or memory investigations. Use when asked to launch Code OSS, automate a VS Code scenario, run the Chat memory smoke runner, capture renderer heap snapshots, take workflow screenshots, compare run summaries, or drive a repeatable scenario before heap-snapshot analysis.