# Frontend Dev Standards > 日常前端开发协作协议。用于新增或修改前端页面、组件、样式、交互、表单、列表、路由、状态管理、接口集成、测试、代码审查和提交前自检。重点约束 Codex 先理解大型项目现有模式，再小步实现、验证边界状态、避免引入不必要依赖，并输出可执行的前端质量反馈。 - Skill: `cyz7111/frontend-dev-standards` (Agent Skill, multi-file: 8 files) - Install (CLI): `npx skillmds@latest add cyz7111/frontend-dev-standards` - Raw SKILL.md: https://api.skillmd.com/api/skills/cyz7111/frontend-dev-standards/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: cyz7111 (https://skillmd.com/u/cyz7111) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/cyz7111/frontend-dev-standards --- # 前端开发协作协议 这个 skill 用于日常前端开发。目标不是输出通用教程，而是让 Codex 在大型项目里更像一个熟悉团队规范的前端协作者：先读项目事实，再沿用已有模式，最后给出明确验证结果。 ## 核心原则 - 先观察，再实现：修改前快速识别技术栈、目录结构、组件库、请求层、状态管理、样式方案和测试命令。 - 优先复用：使用项目已有组件、hooks、utils、API client、类型、样式 token 和交互模式。 - 小范围改动：只改和任务直接相关的文件，不做顺手重构，不重写无关逻辑。 - 类型优先：避免用 `any`、类型断言或空值绕过真实问题；确需使用时说明边界。 - 状态完整：用户可见功能必须考虑 loading、empty、error、disabled、success、long text、permission 和 mobile 状态。 - 验证收口：完成后运行项目已有的 lint、typecheck、test、build 或局部验证；不能运行时说明原因。 - 尊重现有改动：不要回滚用户未要求回滚的改动，不使用破坏性 git 命令。 ## 工作流程 1. 快速探测项目： - 优先读取 `package.json`、路由入口、页面目录、共享组件、API client、store/hooks、测试和 lint 配置。 - 使用 `rg` / `rg --files` 查找相似页面、组件和调用方式。 - 大型项目只读取与任务相关的局部上下文，避免全量浏览。 2. 明确实现路径： - 找到已有模式后直接沿用。 - 如果存在多种模式，优先选择当前目录或相邻模块最近使用的模式。 - 只有在缺少必要信息且风险较高时才追问。 3. 编码实现： - 保持文件职责清晰，避免把业务逻辑、请求、状态和展示全部塞进一个组件。 - 新增交互要处理边界状态和错误反馈。 - 新增文案、样式和图标要贴合现有设计系统。 4. 验证与交付： - 运行能覆盖改动的最小验证命令。 - 前端 UI 改动尽量进行浏览器或截图验证。 - 最终说明改了什么、验证了什么、剩余风险是什么。 ## 按需读取 references - 需要识别大型项目结构和命令时，读取 `references/project-probe.md`。 - 新增或修改组件、页面、表单、列表、弹窗时，读取 `references/component-patterns.md`。 - 修改样式、布局、响应式、视觉状态时，读取 `references/styling.md`。 - 接接口、改请求、缓存、状态管理或异步流程时，读取 `references/state-and-data.md`。 - 补测试、调整测试或选择验证命令时，读取 `references/testing.md`。 - 用户要求 review、检查风险、看代码质量时，读取 `references/review-checklist.md`。 ## 输出规则 - 不输出空泛前端最佳实践，必须结合当前仓库事实。 - 回答里区分“已验证”和“未验证”。 - 如果发现现有项目模式与本 skill 的偏好冲突，以项目现有模式为准。 - 对大型项目保持克制：少读无关文件，少引入抽象，少做跨模块改动。