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/derricktang/pm-workflow-plugin/fb-design-querynpx skills add derricktang/pm-workflow-plugin --skill fb-design-querygit clone --depth 1 https://github.com/derricktang/pm-workflow-pluginWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/derricktang/pm-workflow-plugin/fb-design-query)<a href="https://agentmods.dev/skills/derricktang/pm-workflow-plugin/fb-design-query"><img src="https://agentmods.dev/badge/skills/derricktang/pm-workflow-plugin/fb-design-query.svg" alt="Measured on agentmods" height="20"></a>What 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.00092 | $0.08825 |
| Opus 5 | $0.00046 | $0.04412 |
| Sonnet 5 | $0.00018 | $0.01765 |
| Haiku 4.5 | $0.00009 | $0.00882 |
Grade A, and why
fb-design-query 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 4d 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.
How it starts
The opening of the file, as written. The whole thing — 496 lines — stays where its author put it; the contents beside it link to each section on GitHub.
fb-design-query — fb 设计系统查询决策树
一、何时调用 + 调用方式
调用时机
| PM Agent 阶段 | 强度 | 触发场景 |
|---|---|---|
| 子阶段五 Module PRD Agent（写 prd_M[XX]_draft.html） | [Must] |
写每段 HTML 涉及 class="fb-*" 组件引用前，必走本 skill 决策树 |
| 子阶段三 Module Spec Agent（写 spec_M[XX]_draft.md） | [Should] |
触点表 / 状态描述 / 业务规则涉及具体组件语义时调用 |
调用方式
按 feedback-pm-self-reported-precheck-numbers + skill-design-principle 纪律：
- PM Read 本 SKILL.md 全文
- 按 §二 8 维度决策树逐题答（不可跳题 / 不可凭直觉）
- 落地到 §三 分支路径终点 → Read 指定真源段
- 按 §四 输出 5 部分模板写答案到模块子进度文件「## fb-design-query 查询记录」段
- PRD 章节内引用本次查询结果（HTML class / token 变量）
为什么必走（治 PM L2 推断错诊根因）
NB-pub-phone-bar 实证（参 s4-28-v3-action-bar-unification）：PM 漏读 fb-fallback-manifest.md §3.2 移动端 Action Sheet 自动适配（827 行 manifest 中第 41% 位置）→ 凭直觉推断"pub 缺 phone 底栏类" → 上报 L2 缺陷错诊 → 推 5 轮深度质疑驱动 v2→v3 重大重构。
根因 = PM 无强制核查路径。本 skill = 治本路径 = 强制 PM 按 8 维度查询，自动覆盖所有"深埋真源段"。
二、决策树主干（8 维度，按顺序逐题答）
Q1: 业务需求类型？（6 大场景）
| 选项 | 含义 | 走分支 |
|---|---|---|
| A | 数据展示（卡片 / 标签 / 徽章 / 头像） | §三 分支 A（→ Read pub_components_index.md §4.1） |
| B | 数据输入（输入框 / 单选 / 多选 / 开关 / 上传） | §三 分支 B（→ Read §4.2） |
| C | 反馈 / 状态（空 / 加载 / 错误 / 浮层提示） | §三 分支 C（→ Read §4.3） |
| D | 操作 / 导航（按钮 / 弹框 / 分页 / Tab） | §三 分支 D（→ Read §4.4） |
| E | 容器 / 布局（卡片 / modal / drawer / 底栏 / 顶栏 / 列表 / 表格） | §三 分支 E（→ Read §4.5）⚠ 含底栏跨平台陷阱 |
| F | 多类组合（一个段同时涉及 2+ 类） | 拆分多个需求，分别走 Q1 |
Q2: 容器上下文？
| 选项 | 含义 |
|---|---|
| 1 | 独立（直接在 page 内，非 modal/drawer/card 内） |
| 2 | .fb-modal 内（modal 弹框） |
| 3 | .fb-drawer 内（侧栏抽屉） |
| 4 | .fb-card 内（卡片） |
| 5 | .{*}-frame 直接子层（frame 末位 / 首位 sticky 位置） |
| 6 | 嵌套（如 phone-frame 内 modal 内）— 取最近祖先（CSS 变量就近继承） |
⚠ 关键陷阱：phone-frame 内的 modal 自动变 Action Sheet 形态（由 .phone-frame .fb-modal 真源 CSS 触发，详 manifest §3.2）。这是 NB-pub-phone-bar 错诊根源 — 漏看此段会误判"pub 缺 phone 类"。
Q3: 适用端口？
| 选项 | 端口 | 关联规范 |
|---|---|---|
| 1 | desktop（桌面 Web） | proto_platform_desktop.md |
| 2 | tablet（PAD 横屏） | proto_platform_app.md §PAD |
| 3 | phone（移动 Web / APP） | proto_platform_app.md §手机 + proto_cross_platform.md §三 移动端操作布局 |
| 4 | h5（H5 端） | proto_platform_h5.md |
| 5 | miniprogram（小程序） | proto_platform_miniprogram.md |
| 6 | 跨端（多端覆盖） | proto_cross_platform.md 全文 |
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.
- 4d ago First seen · 496 lines · 92 tokens per session scan A ba6f0935099d
fb-design-query is a skill published in the GitHub repository derricktang/pm-workflow-plugin (2 stars, last pushed 2mo ago), licensed MIT. It adds 92 tokens to every session and 8,825 once invoked, about $0.0005 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-31.
Other skills, from other repositories
reproduce-frontend-bug
Build a bounded, replayable browser or UI bug reproduction from GitHub Issues, Jira, Aone, user-provided exports, screenshots, videos, comments, or attachments. Use for browser, WebView, IDE or desktop UI, interaction, responsive, rendering, accessibility, or visual defects that need evidence-preserving reproduction…
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design…
mstar-design-md
DESIGN.md design system specification for Morning Star projects. Create, audit, and maintain project-level design tokens (Colors, Typography, Spacing, Elevation, Motion, Shapes, Components, Voice & Content) using Vercel Geist as reference template. Three-level completeness checklist (MVP/Standard/Production) with…
mstar-host
Morning Star host adapter for OpenCode, Cursor, Codex, Kimi, ZCode, omp, and dsh. Use after mstar-harness-core whenever host entry, clarify, dispatch, plan mode, or tool UX differs by platform - per-host subagent invoke, plan-mode bridge, parallel dispatch, and skill/command loading. Auto-detect the host from session…
frontend
Two-mode frontend skill: (1) authoring — accessibility, responsive layout, loading/error states, performance, DESIGN.md authoring, visual direction; (2) critique — READ-only scored review of built UI against anchored rubric, AI-slop detection, two isolated assessments. Router invokes mode via context.
design-review
Reviews UI/UX designs, wireframes, and design systems for usability, accessibility, consistency, and implementation feasibility. Use when reviewing design specs or when the user mentions design review, UX review, or design feedback.