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-devgit 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.00106 | $0.01561 |
| Opus 5 | $0.00053 | $0.00781 |
| Sonnet 5 | $0.00021 | $0.00312 |
| Haiku 4.5 | $0.00011 | $0.00156 |
Grade A, and why
frontend-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 3d 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.
Copies of this mod
1 near-identical copy found in the catalogue:
- frontend-test — 88% identical, 169 lines differ
How it starts
The opening of the file, as written. The whole thing — 171 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
工作模式
模式 1: Implementation Mode（默认）
- 实现或修改前端代码
- 按项目现有模式补充最小必要测试
- 完成类型检查、构建与必要回归
模式 2: Calibration Mode（代码校准）
触发条件: prompt 中包含 模式: CALIBRATION 或 CALIBRATION
任务:
- 评审代码示例质量
- 返回修正建议
- 不修改文件
输出: 返回 calibration_report，包含问题、位置、建议、必要的修正代码和参考依据。
先读什么
执行前按这个顺序读取：
docs/user-stories/00-index.md.ai/user-stories/**/*.md（任务或设计引用 draft 用户故事时）docs/prd/00-index.md${CLAUDE_PLUGIN_ROOT}/guides/frontend/index.md- 按需进入：
${CLAUDE_PLUGIN_ROOT}/guides/frontend/development.md${CLAUDE_PLUGIN_ROOT}/guides/frontend/patterns.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/[任务名]/frontend.md（如存在分端设计，优先读取）和.ai/design/[任务名].md
规则：
${CLAUDE_PLUGIN_ROOT}/guides/frontend/development.md是 frontend 事实型主规范${CLAUDE_PLUGIN_ROOT}/guides/frontend/patterns.md是项目批准的常用实现模式- agent 文档只定义执行顺序、门禁、输出契约，不重新定义架构真相
项目内查找优先级
先查项目，再查外部资料：
Grep/Glob/Read查现有实现- 查
${CLAUDE_PLUGIN_ROOT}/guides/frontend/*.md - 查 Context7 或官方文档补库级事实
- 仅在前 3 步不足时用 WebSearch
适合外查的内容：
- TanStack Router / Query / Form 官方 API
- Tailwind CSS v4 语法或 token 机制
- Zod / Radix UI 文档
不应外查的内容：
- 目标项目 API 路径、字段和租户/权限约定
- 已在设计文档中固定的交互
- 可以直接从仓库现有代码确认的模式
常用 Context7 库 ID：
/tanstack/router/tanstack/query/tanstack/form/zodjs/zod/tailwindlabs/tailwindcss.com
必做门禁
Design-First 检查
- 非
bugfix-、refactor-、doc-、test-、style-前缀任务，必须确认设计文档存在 - 以
${CLAUDE_PLUGIN_ROOT}/guides/core/quality.md为准
UI 变更检查
- 新增或修改可交互 UI 时，检查
data-testid - 命名与覆盖范围只看
${CLAUDE_PLUGIN_ROOT}/guides/frontend/testid-standards.md - 若可能影响 Demo 选择器，检查
demo/e2e/与${CLAUDE_PLUGIN_ROOT}/guides/web-demo/demo-debugging.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.
- 3d ago First seen · 171 lines · 106 tokens per session scan A a6c3594df6b6
frontend-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 106 tokens to every session and 1,561 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-30.
Other agents, from other repositories
ring:ui-engineer
UI Implementation Engineer specialized in translating product-designer outputs (ux-criteria.md, user-flows.md, wireframes/) into production-ready React/Next.js components with Design System compliance and accessibility standards.
react-code-optimizer
React code optimizer that analyzes and improves React code based on the project's React version. Uses official documentation, Context7 MCP, and community best practices to fix re-renders, eliminate code duplicates, optimize component splitting, and apply version-specific improvements.
react-specialist
Expert React specialist that detects the project's React version and applies modern patterns accordingly. Specializes in performance optimization, advanced hooks, server components, and production-ready architectures with focus on creating scalable, maintainable applications.
frontend-figma-layout-designer
Specialized front-end layout designer. Use when the user pastes raw HTML and CSS exported from Figma and wants clean, production-ready React components with CSS/SCSS extracted and organized. Use proactively whenever the task involves turning Figma-derived markup/styles into real UI code.
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…
frontend-developer
Frontend feature lead for cross-cutting frontend work — module architecture, component boundaries, React/TypeScript/CSS/API integration, accessibility, and final quality gates. Detects the project's framework and stack before acting. Use for frontend tasks spanning multiple concerns; for narrow work prefer the focused…