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-zh/frontend-devgit clone --depth 1 https://github.com/Mr-chen-05/rules-2.1-optimized-zhWhat 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.01417 |
| Opus 5 | $0.00000 | $0.00709 |
| Sonnet 5 | $0.00000 | $0.00283 |
| Haiku 4.5 | $0.00000 | $0.00142 |
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 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 — 169 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严格模式- 启用最严格的类型检查/设置性能优化模式- 自动应用前端性能优化建议
反馈频率控制
/设置详细模式- 启用所有反馈点，完整工作流/设置标准模式- 关键决策点反馈（默认）/设置静默模式- 仅错误时反馈，适合熟练用户
工作流配置
/设置严格模式- 严格按顺序执行，不允许跳过/设置灵活模式- 允许模式跳转和流程调整（默认）/设置快捷模式- 简化某些步骤，提高效率
质量标准配置
/设置企业级标准- 最高质量要求，完整测试/设置标准级别- 平衡质量和效率（默认）/设置原型级别- 快速验证，降低质量要求
📋 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)
✅ Best Practices - 最佳实践
Component Development - 组件开发
- 使用 Composition API (Vue) 或 Hooks (React)
- 保持组件单一职责
- 合理使用 props 和 emit/callback
- 实现响应式设计
Code Quality - 代码质量
- TypeScript 严格模式
- ESLint + Prettier 代码规范
- 组件和函数命名规范
- 充分的注释和文档
Performance - 性能优化
- 懒加载和代码分割
- 图片优化和压缩
- 缓存策略
- Bundle 分析和优化
🔧 Development Commands - 开发命令
# 项目初始化
npm create vue@latest my-project # Vue 3
npx create-react-app my-app --template typescript # React
# 开发服务器
npm run dev
# 构建
npm run build
# 测试
npm run test
# 代码检查
npm run lint
npm run type-check
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 · 169 lines · 0 tokens per session scan A 4bca50b65796
frontend-dev is a cursor rule published in the GitHub repository Mr-chen-05/rules-2.1-optimized-zh (29 stars, last pushed 1y ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,417 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
90-ui-components
Rules for UI component development (React, Vue, Svelte).
frontend-dev
Frontend development workflow with Vue/React/TypeScript - 前端开发完整工作流.
frontend
Frontend engineering baseline (前端工程规范骨架).
frontend-dev
Frontend Developer - Component, Layout, State Management (React/Vue/Tailwind).
project-overview
这是一个基于 uniapp + Vue3 + TypeScript + Vite5 + UnoCSS 的跨平台开发框架。.
react-vite-web
Cursor rule "react-vite-web" from WellApp-ai/Well, covering web rules (react + vite), routing, component structure, state management and api integration.