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 rules/mr-chen-05/rules-2.1-optimized/frontend-devgit clone --depth 1 https://github.com/Mr-chen-05/rules-2.1-optimizedWhat 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.00000 | $0.01739 |
| Opus 5 | $0.00000 | $0.00870 |
| Sonnet 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 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 — 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.
- 2d 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 9mo 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
angular-20
This rule provides comprehensive best practices and coding standards for Angular development, focusing on modern TypeScript, standalone components, signals, and performance optimizations.
dev-standard
Apache Superset development standards and guidelines for Cursor IDE.
typescript
Changes to these high-fan-out internals can affect every message, delta, element, or rerun. Keep work in them minimal, and benchmark changes with representative stress-test apps.
coolify-ai-docs
Master reference to all Coolify AI documentation in .ai/ directory.
python_lib
Tips and guidelines specific to the development of the Streamlit Python library, not applicable to scripts and e2e tests.
specs
This directory contains product and tech specs for Streamlit features.