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 skills add dhslegen/digital-delivery-team --skill frontend-developmentgit clone --depth 1 https://github.com/dhslegen/digital-delivery-teamWrote 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/dhslegen/digital-delivery-team/frontend-development)<a href="https://agentmods.dev/skills/dhslegen/digital-delivery-team/frontend-development"><img src="https://agentmods.dev/badge/skills/dhslegen/digital-delivery-team/frontend-development.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.1 | $0.00075 | $0.02415 |
| Opus 5 | $0.00037 | $0.01208 |
| Sonnet 5 | $0.00015 | $0.00483 |
| Haiku 4.5 | $0.00007 | $0.00242 |
Grade A, and why
frontend-development 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 7d 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 — 172 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Development · 前端实现知识包
M6.4 整改：v0.6.x 用 frontend-agent subagent 黑盒派发。v0.7.0 改 main thread + 6-phase 范式。 本 skill 是 main thread 实现 web/ 时的"必读知识包"。
Triggers
/build-web命令的 IMPLEMENT phase（仅frontend.type === "spa"；server-side/none由 build-web Phase 1 提前 noop 退出）/impl命令串行执行前端阶段- 任何 main thread 写
web/**/*.{tsx,ts,vue,html,css}文件时 /design-brief编译 brief 与/design-execute --channel <type>派发/摄取外部设计稿时
PR-E（v0.7.2）：当
.ddt/tech-stack.json::frontend.type是server-side（Thymeleaf/JSP/FreeMarker/...）或none时，没有独立的web/工程，本 skill 不应被触发。模板由 backend 项目（如src/main/resources/templates/）承载，归/build-api+skills/backend-development处理。
Inputs（main thread 必读清单）
docs/api-contract.yaml（唯一接口真相源）docs/prd.md（UX 语义参考）.ddt/tech-stack.json（前端栈 + ai_design 选项 SSoT，禁止偏离）skills/api-contract-first/SKILL.md（契约优先原则）skills/ai-native-design/SKILL.md（AI 设计稿工作流：claude-design / figma / v0）contexts/delivery.md（DDT 全局上下文）rules/delivery/agent-invariants.md（6 条全局不变量）
Hard Requirements（main thread 必须遵守）
- 严格按契约：不得擅自发明字段、改字段名、改错误码（contract 不清写 blocker，不要猜）
- build/lint/typecheck：完成后必须跑构建 + lint + type-check + 最小 happy-path UI 测试
- 代码组织：
web/目录；组件测试放web/__tests__/ - 统一 client：所有网络调用走统一 client（自动从 OpenAPI 生成 types，如
openapi-typescript） - 栈刚性约束：必须使用
.ddt/tech-stack.json::frontend段定义的 framework / bundler / ui / state / data_fetching；禁止偏离 - AI-native UI 工作流：按
tech-stack.json::ai_design.type决定 UI 来源（claude-design / figma / v0）；接入流程统一为/design-brief→/design-execute --channel <type>→ main thread 按ai-native-design SKILL §7改写 - SSoT 锁死：
.ddt/tech-stack.json仅可 Read，严禁 Write/Edit/MultiEdit（PreToolUse hook 硬拦截） - validation loop：每完成一个组件立即跑 build / lint / type-check / 组件测试，失败立即停下
6-Phase 实施流程（main thread）
Phase 1: EXPLORE
如果 web/ 已有代码：
- 用 Grep / Glob / Read 扫描组件树 + 已有 hooks / store / api client
- 找类似页面作参照
- 落
docs/build-web-exploration.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.
- 7d ago First seen · 172 lines · 75 tokens per session scan A 702f14c6e719
frontend-development is a skill published in the GitHub repository dhslegen/digital-delivery-team (1 stars, last pushed 3mo ago), licensed MIT. It adds 75 tokens to every session and 2,415 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-31.
Other skills, from other repositories
design-system-reference
Style guides and implementation rules for frontend design. Works with design-discovery agent which handles context gathering and VS-based style recommendations. Contains detailed style guides, anti-patterns, and implementation checklists.
site-to-prompt
Use when given a website URL and asked to reverse-engineer it — to produce a detailed reconstruction prompt and/or rebuild the site in HTML/CSS or React/Tailwind. Covers animated, scroll-driven, and WebGL sites.
scroll-craft
Build premium scroll-driven landing pages for service, product, food, and drink brands. Plan the visitor journey, page grammar, emotional peak, and bespoke signature move. Create dimensional heroes with independent visual planes, restrained motion, and separate mobile composition. Use supplied photos and footage or…
interface-redesign
Upgrades an existing interface to a higher standard without rebuilding it — auditing what is there, identifying what reads as generic or unfinished, and sequencing changes by impact. Use this when a product works but looks dated or default, when a redesign is being considered, when deciding whether to restyle or…
team-memory-protocol
A shared-memory process for teams of coding agents working on the same build. It stores project knowledge, shared context, and task progress in separate files or repositories.
knowledge-wiki
A tool that turns useful lessons from coding sessions into general articles for a team wiki. A wiki is a collection of linked reference pages, and this one can be kept locally or shared through a Git repository.