frontend-spec

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

3,891 stars

Best use case

frontend-spec is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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

Teams using frontend-spec should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/frontend-spec/SKILL.md --create-dirs "https://raw.githubusercontent.com/openclaw/skills/main/skills/adeline18/frontend-spec/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/frontend-spec/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How frontend-spec Compares

Feature / Agentfrontend-specStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

Related Guides

SKILL.md Source

# 前端开发规范 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

Related Skills

Home Inspection Business Operations

3891
from openclaw/skills

Run a profitable home inspection business with real numbers, compliance checklists, and growth playbooks.

trump-perspective

3891
from openclaw/skills

唐纳德·特朗普(Donald Trump)的思维框架与行为逻辑。基于著作、长访谈、辩论、 心理分析、前幕僚回忆录、重大决策记录共6个维度的深度调研(320KB+原始资料), 提炼6个核心心智模型、8条决策启发式和完整的表达DNA。 用途:(1)思维顾问——用特朗普视角分析谈判、权力、传播问题; (2)行为预判——解读他的公开行为背后的逻辑,预判下一步动作; (3)角色扮演——模拟特朗普在特定场景下的决策和表达。 当用户提到「用懂王视角」「特朗普会怎么看」「懂王逻辑」「trump perspective」 「懂王会怎么做」「从特朗普角度分析」「预测特朗普」时触发。

paul-graham-perspective

3891
from openclaw/skills

Paul Graham的思维框架与表达方式。基于200+篇essays、12个播客/访谈、 Twitter/X分析、7位核心批评者视角和完整人生时间线的深度调研, 提炼5个核心心智模型、8条决策启发式和完整的表达DNA。 用途:作为思维顾问,用PG的视角分析创业、写作、产品和人生选择。 当用户提到「用PG的视角」「Paul Graham会怎么看」「PG模式」「paul graham perspective」时使用。 即使用户只是说「帮我用PG的角度想想」「如果PG会怎么做」「切换到PG」也应触发。

mrbeast-perspective

3891
from openclaw/skills

MrBeast(Jimmy Donaldson)的内容创造操作系统。基于泄露的36页内部培训手册、 6个深度播客、决策记录和外部批评的深度调研,提炼6个核心心智模型、8条决策启发式、 完整的标题/缩略图/Hook/节奏公式,和4个可运行的内容分析脚本。 激活后沉浸式扮演MrBeast,直接以「我」的视角给出内容创作建议。 当用户提到「用MrBeast的视角」「MrBeast会怎么做」「Beast模式」「mrbeast perspective」时使用。 即使用户只是说「视频CTR怎么提升」「标题不够吸引人」「retention曲线怎么优化」「缩略图要改吗」也应触发。 不要在用户只是说「内容创作建议」「怎么做内容」等一般性问题时触发——只在涉及视频优化、标题/缩略图/Hook/留存率等YouTube方法论时激活。

andrej-karpathy-perspective

3891
from openclaw/skills

Andrej Karpathy的思维框架与表达方式。基于20+篇博文、16段深度访谈、100+条X帖子的系统蒸馏, 提炼6个核心心智模型、8条决策启发式、完整的中文输出适配和经典句式速查。 用途:作为思维顾问,用Karpathy的视角分析AI技术可靠性、学习方法、行业趋势、产品设计。 当用户提到「用Karpathy的视角」「Karpathy会怎么看」「卡帕西」「karpathy模式」时使用。 也适用于:Software 2.0/3.0讨论、vibe coding话题、神经网络训练、AI炒作判断、LLM能力边界。 即使用户只是说「从工程现实主义角度」「march of nines」「构建即理解」「锯齿状智能」也可触发。 不在用户只是普通问AI相关问题时触发——只在明确想要Karpathy式思维框架时激活。

ilya-sutskever-perspective

3891
from openclaw/skills

Ilya Sutskever的思维框架与表达方式。基于12段一手对话、9篇学术论文、10小时宣誓证词、 27篇推荐阅读清单和14个权威二手来源的深度调研, 提炼6个核心心智模型、8条决策启发式和完整的表达DNA。 用途:作为思维顾问,用Ilya的视角分析AI技术方向、安全策略、研究品味。 当用户提到「用Ilya的视角」「Ilya会怎么看」「Ilya模式」「ilya perspective」 「sutskever perspective」时使用。 即使用户只是说「帮我用Ilya的角度想想」「如果Ilya会怎么做」「切换到Ilya」也应触发。

brand-prospect-researcher

3891
from openclaw/skills

Find brands actively spending on influencer and creator campaigns. Scans trade press, Instagram, job boards, and news for active-spender signals, then outputs a scored, prioritized prospect list with contacts. Use when you need to find brands to pitch, identify active advertisers, build a prospect list, research which brands are hiring influencer marketers, or find companies launching creator campaigns. Triggers on: 'find brands to pitch,' 'prospect list,' 'who's spending on influencers,' 'brand prospects,' 'active advertisers,' 'campaign activity,' or any request to identify brands actively investing in creator/influencer marketing.

naval-perspective

3891
from openclaw/skills

Naval Ravikant的思维操作系统。基于著作、播客、推文、决策记录和外部批评的深度调研, 提炼5个核心心智模型、8条决策启发式和完整的表达DNA。 激活后沉浸式扮演Naval,直接以「我」的视角回应问题。 当用户提到「用Naval的视角」「Naval会怎么看」「纳瓦尔模式」「Naval perspective」「切换到Naval」时使用。 即使用户只是说「这份工作有杠杆吗」「什么是specific knowledge」「什么是真正的财富」「欲望太多怎么办」「无需许可的路径」也可触发。 不要在用户只是问「我该怎么选择」「帮我想清楚」等一般性决策问题时触发——只在涉及杠杆/特定知识/欲望管理/财富定义等Naval核心概念时激活。

elon-musk-perspective

3891
from openclaw/skills

马斯克的思维操作系统。基于传记、播客、推文、法庭证词、决策记录和外部批评的深度调研, 提炼5个核心心智模型、8条决策启发式和完整的表达DNA。 用途:作为思维顾问,用马斯克的视角分析问题、审视决策、拆解成本结构、挑战行业假设。 当用户提到「用马斯克的视角」「马斯克会怎么看」「Musk模式」「马斯克perspective」「elon perspective」时使用。 即使用户只是说「这个成本合理吗」「从第一性原理想想」「白痴指数是多少」「五步算法」「能不能垂直整合」也可触发。 不要在用户只是问「能不能更快」「流程有必要吗」等一般性问题时触发——只在涉及成本拆解、第一性原理、激进迭代等马斯克核心方法论时激活。

Backlink Prospector Lite

3891
from openclaw/skills

Free version — find guest post opportunities and draft one outreach email. Covers opportunity discovery and basic pitching.

pubmed-search-specialist

3891
from openclaw/skills

Build complex Boolean query strings for precise PubMed/MEDLINE literature retrieval. Trigger when user needs MeSH term mapping, Boolean query construction, advanced PubMed filters, citation searching, systematic review search strategy, or clinical query optimization.

construction-safety-inspector

3891
from openclaw/skills

施工作业安全督察专家技能。当用户上传施工作业现场图片,要求分析安全隐患、提出整改建议时激活。触发词:安全检查、安全隐患分析、施工现场、特殊作业(动火/高处/受限空间/临时用电/吊装/盲板抽堵/动土/断路)、gb30871、施工作业安全、安全督察、安全隐患。 Also activates when user mentions uploading safety management documents for learning.