Borrowing it
Nothing to install: this file belongs to taichuy/1flowbase. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/taichuy/1flowbase/main/.agents/skills/frontend-development/SKILL.mdgit clone --depth 1 https://github.com/taichuy/1flowbaseWrote 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/taichuy/1flowbase/frontend-development)<a href="https://agentmods.dev/skills/taichuy/1flowbase/frontend-development"><img src="https://agentmods.dev/badge/skills/taichuy/1flowbase/frontend-development/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/taichuy/1flowbase/frontend-development"><img src="https://agentmods.dev/badge/skills/taichuy/1flowbase/frontend-development.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00052 | $0.01025 |
| Opus 5.5 | $0.00021 | $0.00410 |
| Sonnet 5.5 | $0.00010 | $0.00205 |
| Haiku 4.5 | $0.00005 | $0.00103 |
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 1mo 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 — 52 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Development
Outcome and Entry
把已确认的用户流程落到现有前端结构，保留设计与业务真值。进入 web/ 先读 web/AGENTS.md 及改动目录的局部规则；复用已确认目标、授权和 AC，不重复对齐或另开 issue。
行为验证使用 test-driven-development 的风险策略；缺失业务语义或扩大目标、权限、contract 时回到 problem-framing，局部实现选择继续执行。
Design Truth and Architecture
DESIGN.md 是前端设计真值；先理解第 1–2 节的真值关系和视觉层，再按任务定位章节。精确 token 值和实际组件能力查它指向的源码，不从偶然页面样式反推全局设计。skill 只说明如何定位、应用和验证，不维护第二份 recipe / 状态色 / 断点规范。
设计约束：DESIGN.md → theme / token → shared UI → feature 局部实现
业务真值：backend DTO → api-client → feature api → UI
结构归属：app-shell / routes → features/* → shared/*（仅真实共享）
- Shell 复用 Ant Design 与现有共享组件；Canvas / Inspector 使用现有 Editor UI，不另建视觉体系。
- 业务数据、权限、状态原因、排序 / 筛选 / 聚合由后端提供；前端拥有展示、交互与客户端草稿，不推断缺失业务真值。
- 接口字段沿用后端 DTO 原名；导航与按钮可见性不构成 API 授权。
- 单 feature 请求编排留在 feature api，跨 feature 真实复用才提到 shared/api；schema 关系为
shared/schema-ui → feature schema → node definitions → renderer / consumer。
Read by Task
只读取命中任务与直接风险的行；设计与源码冲突时说明偏离，不能以同步为由修改产品语义。
| 任务信号 | 最短入口 |
|---|---|
| 工作区、页面 recipe、L1 详情、状态或响应式 | workspace-rules → DESIGN.md 对应章节 |
| 目录落点、API 编排、schema / node 分层 | placement-rules |
| 入口层级、同类对象行为、反馈位置 | interaction-architecture-gate |
| DTO、权限消费、取消、流式状态 | consumer-contracts → 受影响源码 |
| i18n key / value、owner、unused key | i18n-rules |
| 样式、第三方 slot、共享组件覆写 | visual-baseline；运行态再读 browser-verification |
| 报表、ECharts、JS Block chart | chart-reporting |
| 新公共 props、抽象、重复防御或转发层 | design-rules；具体坏味道查 anti-patterns |
| 实现完成、直接风险自查 | review-checklist |
| 修改本 skill 或检查合法例外 | pressure-scenarios |
Execution and Handoff
What ships with it
11 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- examples/pressure-scenarios.md 4.2 KB
- references/anti-patterns.md 2.4 KB
- references/browser-verification.md 2.6 KB
- references/chart-reporting.md 1.2 KB
- references/consumer-contracts.md 4.5 KB
- references/i18n-rules.md 3.5 KB
- references/interaction-architecture-gate.md 2.5 KB
- references/placement-rules.md 4.2 KB
- references/review-checklist.md 3.6 KB
- references/visual-baseline.md 1.5 KB
- references/workspace-rules.md 1.9 KB
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.
- 1mo ago Changed · -36 lines · -54 tokens per session e8041df0e2f7
- 2mo ago First seen · 88 lines · 106 tokens per session scan A b23cf4f48ed6
frontend-development is a skill published in the GitHub repository taichuy/1flowbase (284 stars, last pushed today), licensed Apache-2.0. It adds 52 tokens to every session and 1,025 once invoked, about $0.0002 per session on Opus 5.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 skills, from other repositories
unified-ai-gateway
Operate and evaluate Unified AI System through fifteen governed MCP tools, including provider-free prompt enhancement, while preserving fake-provider, authorization, and evidence boundaries.
llm-pipeline
Use when wiring several LLM calls into a production flow: typed contracts between steps, a router/gateway so 429s, timeouts and outages fail over instead of taking you down, and cost control via caching, model tiers and abort caps. NOT single-prompt wording (that is prompt-engineering), NOT a model-driven tool loop…
zcode-usage-sync
A data export tool that copies ZCode's local record of model usage into 10Router, a service that tracks usage statistics.
10router-add-provider
Self-serve adding a custom OpenAI/Anthropic-compatible upstream provider (baseUrl + its own API key + models) to a running 10Router — no source change, no repackage, live immediately. Use when the user wants to register a self-hosted gateway / sk-xxx / baseUrl as a routable node, or an agent needs to add a custom…
10router-web-search
Web search via 10Router /v1/search using Tavily / Exa / Brave / Serper / SearXNG / Google PSE / Linkup / SearchAPI / You.com / Perplexity. Use when the user wants to search the web, look up information, find articles, or query a search engine.
10router
Entry point for 10Router — local/remote AI gateway with OpenAI-compatible REST for chat, image, TTS, embeddings, web search, web fetch. Use when the user mentions 10Router, TENROUTERURL, or wants AI without writing provider boilerplate. This skill covers setup + indexes capability skills; fetch the relevant capability…