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
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend-spec/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-spec Compares
| Feature / Agent | frontend-spec | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/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
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
AI Agents for Marketing
Discover AI agents for marketing workflows, from SEO and content production to campaign research, outreach, and analytics.
AI Agents for Startups
Explore AI agent skills for startup validation, product research, growth experiments, documentation, and fast execution with small teams.
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
Run a profitable home inspection business with real numbers, compliance checklists, and growth playbooks.
trump-perspective
唐纳德·特朗普(Donald Trump)的思维框架与行为逻辑。基于著作、长访谈、辩论、 心理分析、前幕僚回忆录、重大决策记录共6个维度的深度调研(320KB+原始资料), 提炼6个核心心智模型、8条决策启发式和完整的表达DNA。 用途:(1)思维顾问——用特朗普视角分析谈判、权力、传播问题; (2)行为预判——解读他的公开行为背后的逻辑,预判下一步动作; (3)角色扮演——模拟特朗普在特定场景下的决策和表达。 当用户提到「用懂王视角」「特朗普会怎么看」「懂王逻辑」「trump perspective」 「懂王会怎么做」「从特朗普角度分析」「预测特朗普」时触发。
paul-graham-perspective
Paul Graham的思维框架与表达方式。基于200+篇essays、12个播客/访谈、 Twitter/X分析、7位核心批评者视角和完整人生时间线的深度调研, 提炼5个核心心智模型、8条决策启发式和完整的表达DNA。 用途:作为思维顾问,用PG的视角分析创业、写作、产品和人生选择。 当用户提到「用PG的视角」「Paul Graham会怎么看」「PG模式」「paul graham perspective」时使用。 即使用户只是说「帮我用PG的角度想想」「如果PG会怎么做」「切换到PG」也应触发。
mrbeast-perspective
MrBeast(Jimmy Donaldson)的内容创造操作系统。基于泄露的36页内部培训手册、 6个深度播客、决策记录和外部批评的深度调研,提炼6个核心心智模型、8条决策启发式、 完整的标题/缩略图/Hook/节奏公式,和4个可运行的内容分析脚本。 激活后沉浸式扮演MrBeast,直接以「我」的视角给出内容创作建议。 当用户提到「用MrBeast的视角」「MrBeast会怎么做」「Beast模式」「mrbeast perspective」时使用。 即使用户只是说「视频CTR怎么提升」「标题不够吸引人」「retention曲线怎么优化」「缩略图要改吗」也应触发。 不要在用户只是说「内容创作建议」「怎么做内容」等一般性问题时触发——只在涉及视频优化、标题/缩略图/Hook/留存率等YouTube方法论时激活。
andrej-karpathy-perspective
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
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
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
Naval Ravikant的思维操作系统。基于著作、播客、推文、决策记录和外部批评的深度调研, 提炼5个核心心智模型、8条决策启发式和完整的表达DNA。 激活后沉浸式扮演Naval,直接以「我」的视角回应问题。 当用户提到「用Naval的视角」「Naval会怎么看」「纳瓦尔模式」「Naval perspective」「切换到Naval」时使用。 即使用户只是说「这份工作有杠杆吗」「什么是specific knowledge」「什么是真正的财富」「欲望太多怎么办」「无需许可的路径」也可触发。 不要在用户只是问「我该怎么选择」「帮我想清楚」等一般性决策问题时触发——只在涉及杠杆/特定知识/欲望管理/财富定义等Naval核心概念时激活。
elon-musk-perspective
马斯克的思维操作系统。基于传记、播客、推文、法庭证词、决策记录和外部批评的深度调研, 提炼5个核心心智模型、8条决策启发式和完整的表达DNA。 用途:作为思维顾问,用马斯克的视角分析问题、审视决策、拆解成本结构、挑战行业假设。 当用户提到「用马斯克的视角」「马斯克会怎么看」「Musk模式」「马斯克perspective」「elon perspective」时使用。 即使用户只是说「这个成本合理吗」「从第一性原理想想」「白痴指数是多少」「五步算法」「能不能垂直整合」也可触发。 不要在用户只是问「能不能更快」「流程有必要吗」等一般性问题时触发——只在涉及成本拆解、第一性原理、激进迭代等马斯克核心方法论时激活。
Backlink Prospector Lite
Free version — find guest post opportunities and draft one outreach email. Covers opportunity discovery and basic pitching.
pubmed-search-specialist
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
施工作业安全督察专家技能。当用户上传施工作业现场图片,要求分析安全隐患、提出整改建议时激活。触发词:安全检查、安全隐患分析、施工现场、特殊作业(动火/高处/受限空间/临时用电/吊装/盲板抽堵/动土/断路)、gb30871、施工作业安全、安全督察、安全隐患。 Also activates when user mentions uploading safety management documents for learning.