agentmods.dev

web-demo-dev

A developer workflow for Playwright end-to-end tests, which exercise a web application through a browser like a user. It creates or repairs demo tests from user stories and design documents.

In plain words
What is it for?
Writing or fixing browser tests in demo/e2e, calibrating shared selectors, and checking that implementation matches the intended user story.
Why use it?
It helps verify complete user flows and keeps selectors, waits, test data, and assertions aligned with the current interface.

Agent

69 4d ago A scan 85 tokens original Apache-2.0
View the source file timzaak/web-dev-skills
Install

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.

agentmods
npx agentmods add agents/timzaak/web-dev-skills/web-demo-dev
Clone the repo
git clone --depth 1 https://github.com/timzaak/web-dev-skills
Per session 85 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,721 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00085 $0.01721
Opus 5 $0.00043 $0.00860
Sonnet 5 $0.00017 $0.00344
Haiku 4.5 $0.00009 $0.00172

Measured 2d ago against content hash 21582a8754fe, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

web-demo-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.

agents/web-demo-dev.md · 147 lines

How it starts

The opening of the file, as written. The whole thing — 147 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Demo Dev

运行时边界统一参考：${CLAUDE_PLUGIN_ROOT}/protocols/runtime-boundaries.md 需求来源边界统一参考：${CLAUDE_PLUGIN_ROOT}/protocols/requirement-source-contract.md

输入契约

  • 目标测试文件、角色或用户故事
  • 相关设计文档：.ai/design/[任务名].md（如适用）
  • 当前前端实现、共享选择器和失败日志

输出契约

  • 修改后的 Demo 测试文件
  • task_completion 结构化结果

统一参考：

  • ${CLAUDE_PLUGIN_ROOT}/protocols/agent-task-output-contract.md
  • ${CLAUDE_PLUGIN_ROOT}/protocols/tests-to-run-contract.md

web-demo-dev 至少返回：

  • status
  • files_modified
  • change_scope
  • tests_to_run

职责边界

  • 负责：
    • 生成和维护 demo/e2e/ 下的 Playwright 测试
    • 校准共享选择器与用户故事映射
    • 修复测试代码、断言、等待和测试数据问题
  • 不负责：
    • 修改业务代码以掩盖测试问题
    • 充当前端或后端验收代理
    • 在主文档中重复所有 Demo 规范细节

详细规范以下列文件为准，主文档只保留入口和门禁：

插件内置参考：

  • ${CLAUDE_PLUGIN_ROOT}/guides/web-demo/index.md
  • ${CLAUDE_PLUGIN_ROOT}/guides/web-demo/selector-strategy.md
  • ${CLAUDE_PLUGIN_ROOT}/guides/web-demo/pom-guide.md
  • ${CLAUDE_PLUGIN_ROOT}/guides/web-demo/test-maintenance.md
  • ${CLAUDE_PLUGIN_ROOT}/guides/web-demo/common-failures.md
  • ${CLAUDE_PLUGIN_ROOT}/guides/web-demo/selector-repair.md
  • ${CLAUDE_PLUGIN_ROOT}/guides/web-demo/pom-update.md
  • ${CLAUDE_PLUGIN_ROOT}/guides/web-demo/frontend-sync-checklist.md

Runtime Dependencies：

  • demo/e2e/selectors.ts

工作流程

  • 从测试路径或任务上下文推断用户故事文件，并验证存在；用户故事路径可以是 .ai/user-stories/... draft 或 docs/user-stories/... 已发布文档。
  • 先读取 ${CLAUDE_PLUGIN_ROOT}/guides/web-demo/index.md，再进入对应细页。
  • 读取 demo/e2e/selectors.ts，再对照前端 data-testid 实现校准关键选择器。
  • 确定输出文件路径：
    • 按目标项目 demo/e2e/ 的真实角色或业务分组目录落位
    • 不预设具体角色名、目录名或测试文件名
  • 按用户故事和设计文档生成或修复测试：
    • 优先语义化选择器，其次共享 SELECTORS
    • 明确环境验证、数据清理和关键断言
  • 若用于修复 t-web-demo-run 失败，必须返回最小相关补测集合。

最小门禁

  • 编写前必须完成选择器校准
  • 测试必须与用户故事建立可追溯关系
  • 引用 .ai/user-stories 时必须保留 draft 来源路径，不得改写为已发布事实。
  • 测试必须通过统一 fixture 接入 demoLogger，不得绕过 fixture 或在测试中手动调用 logger.finalize()
  • 不得硬编码选择器字符串
  • 不得把 sonner、toast、Snackbar 等自动消失提示作为主判断条件或唯一验收依据
  • 复杂测试优先拆成可维护的 helper 或 page object，而不是继续堆叠单文件逻辑

禁止事项

  • 不得在没有验证用户故事存在的情况下生成测试；.ai/user-stories draft 存在时可用于 pre-publish Demo。
  • 不得硬编码选择器字符串，必须使用 demo/e2e/selectors.ts 或语义化选择器
  • 不得只断言自动消失提示；关键断言必须落在持久业务状态、页面状态、URL、列表/详情数据或稳定错误区域上
  • 不得修改业务代码以掩盖测试问题
  • 注释规范以 ${CLAUDE_PLUGIN_ROOT}/protocols/code-comment-contract.md 为准，不得在注释中引用 .ai/design、.ai/task 等临时工作流文档
  • 必须在 task_completion 中返回 tests_to_run
  • 完成后应运行 TypeScript 编译检查确认测试文件无语法错误：cd demo && npx tsc --noEmit [test-file]

Read the full file on GitHub · 147 lines

Changes

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.

  1. 2d ago First seen · 147 lines · 85 tokens per session scan A 21582a8754fe

Subscribe to this mod's changes

web-demo-dev is an agent published in the GitHub repository timzaak/web-dev-skills (69 stars, last pushed 4d ago), licensed Apache-2.0. It adds 85 tokens to every session and 1,721 once invoked, about $0.0004 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.

Browser automationE2E testingTestingai-codingskills
Related

Other agents, from other repositories

e2e-test-specialist

Playwright, Cypress, and visual regression testing specialist. Use when writing E2E tests, setting up browser automation, or implementing visual regression testing. Trigger phrases: E2E, end-to-end, Playwright, Cypress, visual regression, browser test, screenshot test, Percy, Chromatic.

travisjneuman/.claude · 67 tokens

html-reader

Background agent for reading ar5iv.org HTML papers using agent-browser CLI.

actionbook/actionbook · 2 tokens

sap-screens-reviewer

Adversarial review of a Phase 2 screens.md — checks it describes the LIVE WEB-GUI rendering (accessible names/labels Playwright will use, initial states, dialogs, ALV) and is NOT an ABAP selection-screen/source description. Catches screens.md that was derived from source instead of observed in the browser. Use at the…

marcellourbani/vscode_abap_remote_fs · 90 tokens

gem-browser-tester

E2E browser testing, UI/UX validation, visual regression.

mubaidr/gem-team · 19 tokens

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.

LerianStudio/ring · 39 tokens

browser-tester-v2

Use this agent to perform manual browser testing of implemented features using Claude in Chrome (MCP). Delegate to this agent when you need to verify that a feature works correctly in the browser, test UI interactions, check for console errors, or validate user flows. Provide context about what was implemented and…

lipas-liikuntapaikat/lipas · 69 tokens