技能介绍

为什么需要统一的前端开发规范？

在多人协作的前端项目中，一个普遍且棘手的问题是代码风格的混乱。这包括目录结构随意、命名五花八门、CSS 类名无章可循、JavaScript 写法各异。这种无序状态会直接导致代码可读性降低、模块难以复用、新成员上手缓慢，并在后期维护时引发诸多潜在错误。一个清晰、统一的开发规范是维持大型前端项目健康度的基石。

本技能的核心能力与工作方式

本技能（@user_27ccabd4/frontend-spec）并非一个代码生成器或依赖，而是一套完整、可落地的企业级前端开发约定。它通过详细的文字描述和示例，为团队提供清晰的编码准则。其核心能力与关键步骤如下：

建立清晰的项目骨架：首先定义了标准化的 src/ 目录结构，例如使用 api/ 存放接口请求、components/ 存放公共组件、store/ 存放状态管理代码，从根本上解决了项目目录混乱的问题。
统一编码细节约定：详细规定了文件、变量、组件乃至注释的命名规范（如组件用大驼峰 UserList.vue，常量用全大写下划线 MAX_COUNT），消除了个人习惯差异。
规范语言与框架实践：针对 HTML（语义化标签）、CSS/SCSS（BEM 命名、禁止深嵌套）、JavaScript/TypeScript（禁止 var、优先 async/await）以及 Vue/React 等主流框架，给出了具体的最佳实践指南。
整合工程化流程：将 Git 提交信息（如 feat(scope): content）、ESLint/Prettier 代码格式化规则（如 2 空格缩进、单引号）等工程环节纳入规范体系，确保从编写到提交的全流程一致性。
涵盖质量与安全底线：规范最后还强调了性能优化（如图片懒加载、虚拟滚动）和安全防护（如防止 XSS、禁止前端明文存储密钥）等必须遵守的底线规则。

适用边界与注意点

这套规范主要面向使用 Vue 或 React 技术栈的中后台、移动端或常规 Web 应用项目。请注意，它是一份推荐性的约定集，团队在采用时，需要组织讨论并达成共识，将其作为项目 CONTRIBUTING.md 或 Wiki 的一部分。对于遗留项目或特殊场景，可酌情采纳部分条款，实现平滑过渡。规范的生命力在于持续的遵循与适当的演进，而非一次性的强制灌输。