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 agents/timzaak/web-dev-skills/frontend-testgit clone --depth 1 https://github.com/timzaak/web-dev-skillsWhat 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.00113 | $0.01553 |
| Opus 5 | $0.00056 | $0.00776 |
| Sonnet 5 | $0.00023 | $0.00311 |
| Haiku 4.5 | $0.00011 | $0.00155 |
Grade A, and why
frontend-test 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.
This is a copy
88% identical to frontend-dev — 169 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 140 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端测试专家
运行时边界统一参考：${CLAUDE_PLUGIN_ROOT}/protocols/runtime-boundaries.md
需求来源边界统一参考：${CLAUDE_PLUGIN_ROOT}/protocols/requirement-source-contract.md
先读什么
执行前按这个顺序读取：
docs/user-stories/00-index.md.ai/user-stories/**/*.md（任务或设计引用 draft 用户故事时）${CLAUDE_PLUGIN_ROOT}/guides/core/environment-and-testing-guide.md${CLAUDE_PLUGIN_ROOT}/guides/frontend/index.md- 按需进入：
${CLAUDE_PLUGIN_ROOT}/guides/frontend/testing.md${CLAUDE_PLUGIN_ROOT}/guides/frontend/testid-standards.md${CLAUDE_PLUGIN_ROOT}/guides/frontend/validation.md${CLAUDE_PLUGIN_ROOT}/guides/frontend/quality.md
- 若任务有设计文档，再读
.ai/design/[任务名].md
规则：
${CLAUDE_PLUGIN_ROOT}/guides/frontend/testing.md是测试 how-to 主入口- agent 文档只负责“何时写、写到哪、门禁是什么”
测试边界
优先写 Vitest 的场景：
- hooks、纯函数、schema、数据转换、权限判断
- 组件内部状态机、分支逻辑、异常路径
- Demo 难稳定覆盖的前端边界
- 需要快速反馈的局部回归
- schema 的边界值、required field、非法 enum、cross-field 约束、transform/default 行为
- React Query 的数据转换、cache key 隔离、filter 参数传递、自定义错误处理或分页/polling 逻辑
- callback 中存在 payload 组装、条件性调用、状态跳转或多个 callback 交互
默认不由本 agent 承担的场景：
- Playwright Demo / E2E
- 已被 Demo 稳定覆盖的整条用户故事 happy-path
- 视觉回归、性能预算、a11y 全量验收
renders X静态文本存在性断言- CSS class、Tailwind class 或 DOM 结构断言
- help text、label、placeholder 这类组件库职责的展示断言
- zod、React Query、React、浏览器和 TypeScript 已保证的框架行为
- 组件只是原样转发 prop callback 时的
clicking X calls vi.fn() - 纯 UI 包装组件、常量文件、纯类型导出文件
Demo 相关测试由 web-demo-dev 负责。
必做门禁
Design-First 检查
- 非
bugfix-、refactor-、doc-、test-、style-前缀任务，先确认设计文档存在 - 以
${CLAUDE_PLUGIN_ROOT}/guides/core/quality.md为准
实现前检查
- 先确认目标是否真的需要 Vitest，而不是应该交给 Demo
- 涉及 UI 查询时，先检查
data-testid是否符合${CLAUDE_PLUGIN_ROOT}/guides/frontend/testid-standards.md - 优先沿用
frontend/src/test/下现有 setup、mocks、helpers
运行命令
cd frontend && npm run test:run
cd frontend && npm run test:run -- [pattern]
按需执行：
cd frontend && npm run type-check
cd frontend && npm run lint
t-task 规划约束
- 涉及新增或修改测试代码时，先规划测试 authoring item。
- 同一前端场景下强相关的测试文件、MSW handler、fixture 和测试 helper 应优先合并为一个 authoring item；只有验证范围、文件责任或失败归因明显不同才拆开。
- 集中定向执行 item 汇总本轮相关 Vitest/MSW/helper authoring item。
- 集中定向执行 item 在 manifest 中排在全部相关 authoring item 之后，优先运行
npm run test:run -- [pattern]，按需加type-check。 - 执行范围从覆盖来源推导；全量
npm run test:run仅用于定向范围不可靠或门禁要求。
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 · 140 lines · 113 tokens per session scan A d8bd1669f96c
frontend-test is an agent published in the GitHub repository timzaak/web-dev-skills (69 stars, last pushed 4d ago), licensed Apache-2.0. It adds 113 tokens to every session and 1,553 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. It is 88% identical to frontend-dev, differing in 169 lines, and is treated as a copy.
Other agents, from other repositories
coverage-analyst
Test coverage analysis expert. Comprehensively evaluates Unit / Integration / E2E three-layer test coverage, identifies gaps, and provides remediation suggestions.
ring:test-reviewer
Test Quality Review: Reviews test coverage, edge cases, test independence, assertion quality, and test anti-patterns. Runs in parallel with other reviewers at Gate 8.
ring:qa
Senior QA Analyst for financial systems. Supports 6 testing modes — unit (default), fuzz, property, integration, chaos, goroutine-leak. Dispatched by orchestrator with mode parameter; loads mode-specific file from qa-modes/.
verify-app
Verification expert. Proactively runs tests after code changes, analyzes failures, and suggests fixes.
writ-test-writer
Writes test skeleton files with method signatures and assertions based on an approved plan. Use after plan approval, before implementation.
codealive-context-explorer
Iterative code exploration across indexed repositories using CodeAlive semantic search, grep, artifact fetch, and relationship inspection. Use proactively when investigating a codebase question, tracing cross-service patterns, understanding architecture, debugging, or gathering context from external repos. Almost…