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 skills/taichuy/1flowbase/frontend-developmentnpx skills add taichuy/1flowbase --skill frontend-developmentgit clone --depth 1 https://github.com/taichuy/1flowbaseWhat 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.01858 |
| Opus 5 | $0.00053 | $0.00929 |
| Sonnet 5 | $0.00021 | $0.00372 |
| Haiku 4.5 | $0.00011 | $0.00186 |
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 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.
How it starts
The opening of the file, as written. The whole thing — 88 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Development
Overview
本 Skill 是 1flowbase 前端实现期的边界守门员，不负责替代需求对齐或 QA 验收。进入这里时，默认已经有清晰目标、范围、成功标准和用户拍板点；本 Skill 只负责把已确认的 UI / frontend 任务按项目规则落到 web/。
Entry Contract
- 需求仍有多方向选择、产品拍板、跨前后端边界、架构影响或非局部重构时，先回
problem-framing。 - 涉及可测试行为变化时，先联动
test-driven-development；不能走 TDD 时，交付说明必须写明替代验证。 - 用户要求自检、验收、回归、质量报告或证据结论时，切到
qa-evaluation。 - 进入
web/前先读web/AGENTS.md；存在更近的AGENTS.md时按最近规则执行。
When to Use
- 新增或修改
home / applications / settings / embedded-apps / tools页面，或orchestration / api / logs / monitoring应用详情 section。 - 改动壳层列表、抽屉、编排画布、
Inspector、节点组件、schema renderer、overlay shell 或节点定义目录。 - 调整页面级流程、交互流、视觉结构、响应式布局、前端状态边界或同类对象行为。
- 新增或调整前端多语言资源、语言切换入口、UI copy key / value / unused-key 规则。
- 新增或调整报表 / 图表 UI、
echarts宿主渲染、低代码 JS Block 图表 primitive / facade。 - 判断实现落点、组件拆分、hooks 拆分、接口消费链或样式边界。
不要用于
- 纯后端接口、状态机、核心业务规则设计。
- 纯需求澄清、方案选择、issue shaping 或 ADR。
- 纯 QA 报告、回归结论或质量门禁路由。
Core Invariants
DESIGN.md是前端任务域、L1 模型、状态语义和页面 recipe 的主规则源。Ant Design负责 Shell Layer，Editor UI只做薄封装，不另起一套视觉语言。- 前端展示和交互所需业务数据以后端接口为唯一真值来源；缺字段、排序、筛选、计数、权限、状态原因或聚合结果时，先补后端 DTO / API / 聚合查询。
- 接口字段名沿用后端 DTO / 领域语义；UI 展示名可以本地化，但不得为展示文案另起接口字段别名。
- 先定主路径、详情规则、反馈位置和模块协作，再拆组件、落结构、补样式。
- 新抽象、公共 props、bool/flag 分支、helper/manager/utils、pass-through 组件或重复 defensive check，先读
../_shared/design-rules.md；命中则回到problem-framing做更小 redesign。
Implementation Routing
- 页面 recipe、工作区语法、详情模型：读
references/workspace-rules.md。 - 目录落点、接口消费、schema UI 分层：读
references/placement-rules.md。 - 入口、层级、L0 / L1 / L2 / L3、详情容器或同类对象行为：读
references/interaction-architecture-gate.md，完成结构诊断并冻结交互规则后再实现。 - 多语言资源归属、key / value 语义和 unused-key 规则：读
references/i18n-rules.md。 - 视觉基线、第三方 slot、共享样式边界：读
references/visual-baseline.md；需要运行态证据时再读references/browser-verification.md。 - 报表 / 图表 / ECharts / JS Block chart primitive：读
references/chart-reporting.md。 - 实现收尾自查：读
references/review-checklist.md和references/anti-patterns.md；需要正式 QA 结论时切到qa-evaluation。
Implementation Rules
What ships with it
17 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/image-led-request.md 1.9 KB
- examples/interaction-architecture-request.md 1.7 KB
- examples/pressure-scenarios.md 4.2 KB
- examples/vague-page-request.md 1.7 KB
- references/anti-patterns.md 2.3 KB
- references/browser-verification.md 1.9 KB
- references/chart-reporting.md 1.2 KB
- references/communication-gate.md 3.2 KB
- references/extraction-framework.md 2.1 KB
- references/i18n-rules.md 2.6 KB
- references/interaction-architecture-gate.md 3.2 KB
- references/placement-rules.md 4.0 KB
- references/requirement-refinement.md 5.7 KB
- references/review-checklist.md 4.6 KB
- references/skill-template.md 2.0 KB
- references/visual-baseline.md 2.0 KB
- references/workspace-rules.md 3.2 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.
- 2d ago First seen · 88 lines · 106 tokens per session scan A b23cf4f48ed6
frontend-development is a skill published in the GitHub repository taichuy/1flowbase (259 stars, last pushed 3d ago), licensed Apache-2.0. It adds 106 tokens to every session and 1,858 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 skills, from other repositories
sync-cliproxy-core
Use when asked to 同步、更新、升级或审计 CLIProxyAPI、cliproxy、translator core、provider adapters、Antigravity 请求/响应转换、internal/protocol/cliproxy 转换快照，刷新上游 commit，或审查一次核心与渠道适配器的原子同步结果。.
ccload-release
用于发布 ccLoad 新版本，自动提交未提交改动并推送本地领先的 master，按固定版本通道计算并发布 Tag，等待 GitHub Actions，以及验证 GitHub Release 和对应通道的容器镜像。Beta 固定沿用最近稳定版的主版本和次版本；只有显式 stable 发布才允许修改次版本。.
10router-chat
Chat / code generation via 10Router using OpenAI /v1/chat/completions or Anthropic /v1/messages format with streaming + auto-fallback combos. Use when the user wants to ask an LLM, generate code, summarize text, or run prompts through 10Router.
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…
unified-ai-gateway
Operate and evaluate Unified AI System through twelve governed MCP tools, including provider-free prompt enhancement, while preserving fake-provider, authorization, and evidence boundaries.
10router-image
Generate images via 10Router /v1/images/generations using OpenAI / Gemini Imagen / DALL-E / FLUX / MiniMax / SDWebUI / ComfyUI / Codex models. Use when the user wants to create, generate, draw, or render an image, picture, or text-to-image (txt2img).