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.
git clone --depth 1 https://github.com/Mr-chen-05/rules-2.1-optimizedWrote 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/rules/mr-chen-05/rules-2.1-optimized/frontend-dev)<a href="https://agentmods.dev/rules/mr-chen-05/rules-2.1-optimized/frontend-dev"><img src="https://agentmods.dev/badge/rules/mr-chen-05/rules-2.1-optimized/frontend-dev/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/rules/mr-chen-05/rules-2.1-optimized/frontend-dev"><img src="https://agentmods.dev/badge/rules/mr-chen-05/rules-2.1-optimized/frontend-dev.svg" alt="Reviewed on agentmods" width="80" 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.00000 | $0.01739 |
| Opus 5.5 | $0.00000 | $0.00696 |
| Sonnet 5.5 | $0.00000 | $0.00348 |
| Haiku 4.5 | $0.00000 | $0.00174 |
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 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 — 194 lines — stays where its author put it; the contents beside it link to each section on GitHub.
🎨 Frontend Development Workflow - 前端开发工作流
专为 Vue 3、React 18+、TypeScript 优化的前端开发完整工作流程。
🚀 Commands - 命令
/frontend-dev- 启动前端开发工作流/component- 创建新组件/ui-design- UI设计和样式开发/test-frontend- 运行前端测试/build-frontend- 构建和优化
前端专用配置模式
/设置Vue优先模式- 优先使用 Vue 3 技术栈/设置React优先模式- 优先使用 React 18+ 技术栈/设置TypeScript严格模式- 启用最严格的类型检查/设置性能优化模式- 自动应用前端性能优化建议
反馈频率控制
/设置详细模式- 启用所有反馈点，完整工作流/设置标准模式- 关键决策点反馈（默认）/设置静默模式- 仅错误时反馈，适合熟练用户
工作流配置
/设置严格模式- 严格按顺序执行，不允许跳过/设置灵活模式- 允许模式跳转和流程调整（默认）/设置快捷模式- 简化某些步骤，提高效率
质量标准配置
/设置企业级标准- 最高质量要求，完整测试/设置标准级别- 平衡质量和效率（默认）/设置原型级别- 快速验证，降低质量要求
🧠 前置步骤：Context7 知识预载（修复/新项目前置）
- 触发时机：开始 /frontend-dev 前，涉及 Bug 修复或新前端项目/功能开发
- 执行：
- 使用 Context7 在 src、docs、tests、config、README.*、architecture、api 目录检索关键材料（UI架构、状态管理、接口契约、性能/安全约束、历史决策）
- 质量阈值：至少 5 个高相关片段或覆盖 3 类关键材料；评分 ≥ 0.65；超时 60s
- 回退：Context7 → 代码检索（search_codebase/search_by_regex）→ 文件系统读取
- 记录与确认：将“知识预载摘要”写入 project.context.md 的 Pinned，并通过增强反馈机制确认后继续
- 跳过条件：纯样式/文案微调、无逻辑改动的小变更
📋 Process - 开发流程
1. 🔍 需求分析 (Requirements Analysis)
- 分析用户交互需求和业务逻辑
- 确定技术栈和架构方案
- 设计组件结构和数据流
- 转换条件：需求明确，技术方案确定
2. 🎨 UI设计 (UI Design)
- 设计组件界面和交互逻辑
- 确定样式规范和响应式布局
- 规划路由和页面结构
- 转换条件：UI设计完成，交互逻辑清晰
3. ⚡ 组件开发 (Component Development)
- 实现组件功能和样式
- 集成状态管理和 API 调用
- 优化性能和用户体验
- 转换条件：功能完成，自测通过
4. 🧪 测试验证 (Testing)
- 单元测试和集成测试
- 跨浏览器兼容性测试
- 性能和可访问性测试
- 转换条件：测试通过，质量达标
5. 📦 构建部署 (Build & Deploy)
- 代码打包和优化
- 部署到测试/生产环境
- 监控和性能分析
- 转换条件：部署成功，运行稳定
🛠️ Technology Stack - 技术栈
Core Frameworks - 核心框架
- Vue 3 - Composition API,
<script setup> - React 18+ - Hooks, Concurrent Features
- TypeScript - 类型安全和开发体验
Build Tools - 构建工具
- Vite - 快速开发和构建
- Webpack - 复杂项目配置
UI Libraries - UI库
- Element Plus (Vue)
- Ant Design (React)
- Tailwind CSS - 原子化CSS
State Management - 状态管理
- Pinia (Vue)
- Zustand (React)
- Redux Toolkit (React)
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 First seen · 194 lines · 0 tokens per session scan A 69b68f46813b
frontend-dev is a cursor rule published in the GitHub repository Mr-chen-05/rules-2.1-optimized (172 stars, last pushed 11mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,739 tokens. 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 cursor rules, from other repositories
frontend
Cursor rule "frontend" from Luxvil/ai-coding-rules, covering windsurf rules - frontend, component structure, react patterns, typescript and performance.
skill-frontend-design
Arquitetura frontend DARE para projetos React e Vue. Detecta god components (>300 linhas), fetch inline em JSX/template, garante error boundaries, loading states e bundle size monitorado.
90-ui-components
Rules for UI component development (React, Vue, Svelte).
frontend-dev
A frontend development workflow for Vue 3, React 18 or newer, and TypeScript projects.
frontend
A framework-independent set of front-end engineering rules covering project folders, state handling, testing, observability, and deployment, with notes for Vue, React, and Svelte projects.
frontend-dev
Frontend Developer - Component, Layout, State Management (React/Vue/Tailwind).