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/jianchen08/agent-os-open/code-frontendnpx skills add jianchen08/Agent-os-open --skill code-frontendgit clone --depth 1 https://github.com/jianchen08/Agent-os-openWrote 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/jianchen08/agent-os-open/code-frontend)<a href="https://agentmods.dev/skills/jianchen08/agent-os-open/code-frontend"><img src="https://agentmods.dev/badge/skills/jianchen08/agent-os-open/code-frontend.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 | $0.00058 | $0.01382 |
| Opus 5 | $0.00029 | $0.00691 |
| Sonnet 5 | $0.00012 | $0.00276 |
| Haiku 4.5 | $0.00006 | $0.00138 |
Grade A, and why
前端编码 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.
How it starts
The opening of the file, as written. The whole thing — 123 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端编码
组件规范
组件命名
| 类型 | 规范 | 示例 |
|---|---|---|
| 组件文件 | PascalCase | UserProfile.vue, LoginForm.tsx |
| 组件名 | PascalCase | UserProfile, OrderList |
| 组件文件夹 | kebab-case | user-profile/, order-list/ |
| Props | camelCase | userName, isLoading |
| 事件名 | camelCase（以 on 开头） | onClick, onChange |
| 方法名 | camelCase | handleSubmit, fetchData |
组件设计原则
| 原则 | 说明 | 优先级 |
|---|---|---|
| 受控组件 | 表单值受 state 控制 | 高 |
| Props 校验 | 使用 TypeScript 或 PropTypes | 高 |
| 组件拆分阈值 | 超过 150 行考虑拆分 | 中 |
设计系统一致性（编码前必做）
编写前端代码前必须先执行发现步骤，不能跳过：
- 识别设计系统来源：查 package.json 的组件库依赖、设计令牌文件（theme.css/tokens.json/tailwind.config）、全局样式文件、已有同类组件实现
- 提取设计规范：间距梯度、颜色语义变量、字体梯度、可复用组件、布局断点
- 以此为锚点：所有样式决策必须以提取到的规范为基准
间距
- 先从项目的设计令牌/全局样式找到间距梯度
- 所有间距值必须从项目定义的梯度中选取
- 项目未定义时，使用项目中最常见的间距倍数作为基准
颜色
- 先找到项目的语义色变量（主色、成功色、警告色、错误色）
- 所有颜色通过项目的变量/token 引用
- 需新颜色时在设计令牌中新增变量后引用，禁止硬编码
字体
- 遵循项目已有的字体梯度，不引入新的字号或字重值
新增设计令牌流程
- 在设计令牌文件中新增变量 → 2. 在组件中通过变量引用 → 3. 注释说明新增原因
样式规范
BEM 命名法
| 类型 | 命名规则 | 示例 |
|---|---|---|
| Block | 语义化名词，kebab-case | card, user-profile |
| Element | block__element |
card__title, user-profile__name |
| Modifier | --modifier |
card--highlighted, card__title--large |
样式要点
- 使用 CSS Modules，避免全局样式污染
- 避免内联样式（除动态计算值外禁止）
- 嵌套最多 3 层
- 提取公共样式使用 CSS 变量或 mixins
状态管理
状态分层
| 层级 | 管理方式 | 示例 |
|---|---|---|
| 组件级 | useState/useReducer / ref/reactive | 当前展开状态、本地表单值 |
| 页面级 | useState / ref/reactive | 当前页码、搜索词 |
| 应用级 | Redux/Zustand/Pinia | 用户登录态、主题设置 |
| 服务级 | React Query/SWR | 接口数据缓存 |
API 调用约定
- 通过封装层调用（API 模块封装），不直接在组件里 fetch
- 统一响应格式：成功
{"success": true, "data": {}, "message": "..."}，错误{"success": false, "error": {"code": "...", "message": "..."}}
| 错误类型 | 处理方式 |
|---|---|
| 401 未认证 | 跳转登录页 |
| 403 无权限 | 显示无权限提示 |
| 404 未找到 | 显示 404 页面 |
| 500 服务器错误 | 显示错误页 |
| 网络错误 | 显示重试提示 |
前端测试要求
进入测试阶段时（测试通用规范已在常驻提示词）：
- UI 功能类任务：必须用 playwright_test 做浏览器级测试，不能只用 Jest 组件测试代替
- 渲染/显示类任务：验证阶段包含视觉验证（截图对比）
- 交互类任务（按钮点击、表单提交、页面跳转）：在真实浏览器环境验证交互流程
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 · 123 lines · 58 tokens per session scan A e082ece21169
前端编码 is a skill published in the GitHub repository jianchen08/Agent-os-open (5 stars, last pushed 8d ago), licensed Apache-2.0. It adds 58 tokens to every session and 1,382 once invoked, about $0.0003 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
ardot_design_to_code
"Use this skill for Ardot canvas tasks that convert a design into frontend code, or extract a design system / style guide from a website. Covers: design-to-code, design → HTML/CSS/JS, export as webpage, pixel-perfect reproduction, generate an Application from a design, slide transitions, responsive scaling; and…
background-task
Add or modify work that runs outside the request/response cycle — emails, document ingestion, webhooks, cleanups, scheduled jobs. Use when something is slow or fire-and-forget, or when adding a periodic/cron task. This project's queue is {{ cookiecutter.backgroundtasks }}.
agent-tool
Add a new tool/function the AI agent can call (e.g. look something up, hit an external API, perform an action). Use when extending the assistant's capabilities, wiring a new function into the agent, or when the model needs a new action. This project uses {{ cookiecutter.aiframework }}.
frontend-feature
Build a new page, view, or data-driven feature in the Next.js frontend. Use when adding a route under the dashboard/marketing area, wiring UI to a backend endpoint, adding client state, or creating a localized page. Covers App Router, data fetching, Zustand stores, and i18n.
pytest-suite
Write or extend the backend test suite following this project's conventions. Use when adding tests for a new service/route/repository, when coverage is missing, or when asked to test a feature. Knows the mocked-session + httpx AsyncClient setup so tests run with no database.
rag-knowledge
Work with the RAG knowledge base — ingest documents, run semantic search, manage collections, or add a sync source/connector (Google Drive, S3). Use when populating or debugging the knowledge base, tuning retrieval, or adding a new document source. This project uses {{ cookiecutter.vectorstore }} + {{…