ClawHub

前端开发规范

v1.0.0

企业级前端开发规范 Skill，包含命名、目录、CSS/JS/TS、Vue/React、Git、构建、性能、安全完整规范

⭐ 0· 80·0 current·0 all-time
by@adeline18
Security Scan
VirusTotalVirusTotal
Benign
View report →
OpenClawOpenClaw
Benign
high confidence
✓
Purpose & Capability
Name, description, and the SKILL.md all describe a front-end development规范 (styleguide). There are no unrelated environment variables, binaries, or install steps requested.
✓
Instruction Scope
SKILL.md contains only documentation and best-practice guidance (project structure, naming, CSS/JS/TS, frameworks, Git, performance, security). It does not instruct the agent to read files, access secrets, call external endpoints, or perform system operations.
✓
Install Mechanism
No install spec or code files are present (instruction-only). Nothing is downloaded or written to disk by the skill itself.
✓
Credentials
Skill declares no required environment variables, credentials, or config paths — proportional to a documentation-style skill.
✓
Persistence & Privilege
always is false and model invocation is allowed (default). This is appropriate for a doc-style skill; it does not request elevated or persistent privileges.
Assessment
This skill is a low-risk, instruction-only front-end styleguide and appears coherent with its description. Recommended actions before enabling: verify you trust the author/source, confirm the license (MIT-0) fits your use, and review the guidelines to ensure they match your team's needs. Because it contains only docs, it won't access credentials or install software, but be cautious when following any code snippets it suggests (review before running).

Like a lobster shell, security has layers — review code before you run it.

latestvk978fe0s99jd7856zp0sgnpw05843r9j
80downloads
0stars
1versions
Updated 2w ago
v1.0.0
MIT-0
@adeline18
latest
Download

前端开发规范 Skill（企业级）

本 Skill 提供完整、可落地、团队统一的前端开发规范，适用于中后台、移动端、Web 应用。

覆盖范围

  • 项目结构与目录规范
  • 文件命名规范
  • HTML 编写规范
  • CSS / SCSS 规范
  • JavaScript / TypeScript 规范
  • Vue / React 编码规范
  • Git 提交规范
  • ESLint / Prettier 规范
  • 构建与性能优化规范
  • 安全规范

使用方式

你可以直接问：

  • 前端项目目录怎么设计？
  • JS 变量命名有什么规范？
  • Vue 组件编写最佳实践
  • Git commit 信息怎么写？
  • 如何配置 ESLint 规范？
  • 前端性能优化有哪些规则？

1. 项目目录规范（通用）

src/ ├── api/ # 接口请求 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── constants/ # 常量 ├── hooks/ # 业务 hooks ├── layouts/ # 布局 ├── pages/ # 页面 ├── router/ # 路由 ├── store/ # 状态管理 ├── styles/ # 全局样式 ├── utils/ # 工具函数 └── App.vue/main.ts

2. 命名规范

文件命名

  • 组件：大驼峰 UserList.vue
  • 工具/页面：短横线 user-info.ts
  • 样式：短横线 index.scss、button.scss

变量/函数

  • 变量：小驼峰 userList
  • 常量：全大写下划线 MAX_COUNT
  • 布尔：is/has/should 开头 isVisible
  • 函数：动词开头 getUserInfo()

3. HTML 规范

  • 语义化标签：header/main/section/aside/footer
  • 类名使用短横线：class="user-card"
  • 禁止冗余标签、禁止行内样式
  • 图片必须加 alt，懒加载使用 loading="lazy"

4. CSS / SCSS 规范

  • 使用 BEM 或短横线命名
  • 禁止嵌套超过 3 层
  • 公共样式抽离到 variables/mixins
  • z-index 统一管理
  • 单位优先使用 rem / vh / %
  • 颜色使用变量，禁止硬编码

5. JavaScript 规范

  • 使用 const/let，禁止 var
  • 优先使用箭头函数
  • 异步优先 async/await
  • 禁止嵌套过深（<3 层）
  • 禁止魔法数字，抽为常量
  • 数组优先使用 map/filter/reduce

6. TypeScript 规范

  • 必须定义接口/类型
  • 禁止 any，能用 unknown 替代
  • 接口使用 I 前缀或后缀 Type
  • 函数参数与返回值必须标注类型
  • 类型复用优先使用 type / interface

7. Vue 规范

  • 组件名多单词，避免与 HTML 重名
  • props 必须定义类型、默认值、校验
  • 指令缩写：: @ #
  • 计算属性避免副作用
  • watch 慎用，优先 computed
  • 方法命名遵循动词+名词

8. React 规范

  • 组件使用函数式 + Hooks
  • 状态扁平化，避免嵌套
  • 禁止在循环/条件中使用 Hooks
  • 事件处理函数以 handle 开头
  • 样式使用 CSS Modules / styled-components

9. Git 规范

提交格式： type(scope): content

type：

  • feat: 新功能
  • fix: 修复
  • docs: 文档
  • style: 格式
  • refactor: 重构
  • perf: 性能
  • test: 测试
  • chore: 构建/工具

10. ESLint + Prettier 规范

  • 2 空格缩进
  • 单引号
  • 语句末尾分号
  • 文件末尾空行
  • 禁止未使用变量
  • 禁止 console（生产环境）

11. 性能规范

  • 图片压缩、WebP
  • 懒加载图片、组件
  • 路由懒加载
  • 防抖节流处理高频事件
  • 大数据列表使用虚拟滚动
  • 减少冗余渲染

12. 安全规范

  • 防止 XSS：过滤用户输入
  • 防止 CSRF：token 校验
  • 敏感信息不放在 localStorage
  • 接口必须做权限控制
  • 禁止前端明文存储密钥/Token

Comments

Loading comments...