摘要：本文分享 7 个高质量前端开发 Skills（技能包），覆盖地图开发、Vue/Nuxt 工具链、3D 开发、SCSS 规范、现代 CSS、UI/UX 设计、Electron桌面应用。安装后 AI 编程助手生成的代码质量显著提升，减少查文档和调配置的时间。

最近 AI 编程助手越来越普及，但一个普遍问题是——AI 写前端代码总是差点意思。样式不标准、API 用错版本、代码结构乱七八糟。

问题的根源不是 AI 不够聪明，而是它缺了正确的"知识包"。就像你让一个刚入职的同事写代码，不给他文档、不告诉他项目规范，他写出来的东西肯定不靠谱。AI 也一样。

本文分享 7 个我日常在用的前端 Skills，装到 AI 编程助手之后，效果立竿见影。

1. 高德地图 JSAPI Skills

GitHub：https://github.com/AMap-Web/amap-skills

集成高德地图时，AI 生成的代码常出问题——鉴权白屏、API 版本不对、插件加载方式过时。这个技能包把高德地图 JSAPI v2.0 的官方文档、最佳实践和代码模板整合成结构化文件。

覆盖四大模块：

• 地图控制
• 覆盖物绘制
• 图层管理
• LBS 服务（POI 搜索、路径规划、地理编码）

装好之后，跟 AI 说"帮我做个 POI 搜索"，它就能自动生成符合官方规范的代码，还会主动提醒配置安全密钥。

安装命令：

git clone https://github.com/AMap-Web/amap-skills.git
mkdir -p .cursor/skills
ln -s /path/to/amap-skills/amap-jsapi-skill .cursor/skills/amap-jsapi-skill

2. Anthony Fu 的技能集合

GitHub：https://github.com/antfu/skills（4.6k+ Star）

Anthony Fu 是 Vue 核心团队成员、Vite 贡献者、Nuxt 核心维护者，VueUse、UnoCSS、Vitest、Slidev 的作者。他把自己的开发经验和最佳实践整理成了这套技能集合，覆盖 15+ 个技能。

技能分类：

装了之后，AI 帮你配置项目时直接就是 Anthony Fu 那套标准——TypeScript strict 开启、@antfu/eslint-config、Vitest 测试、pnpm 管理依赖。

最聪明的是用 git submodule 直连官方文档，内容自动同步更新，不怕过时。

安装命令：

pnpx skills add antfu/skills --skill='*'

3. Three.js Skills

GitHub：https://github.com/CloudAI-X/threejs-skills

Three.js API 又多又杂，场景搭建、材质、光照、动画，每一个都得单独查文档。这个技能包把 Three.js 的核心知识拆成了 10 个模块：

跟 AI 说"帮我加载一个 GLTF 模型并播放动画"，它直接就能生成正确的代码，loader 配置、animation mixer、错误处理一应俱全。

所有技能文件都经过 Three.js r160+ 官方文档审核，API 签名和代码示例准确。

安装命令：

git clone https://github.com/CloudAI-X/threejs-skills.git
cp -r threejs-skills/.claude/skills/* .claude/skills/

4. SCSS 最佳实践

GitHub：https://github.com/Mindrally/skills

SCSS 好用但项目一大就容易乱。这个技能包提供了一套完整的 SCSS 编码规范，可直接拿来当团队规范用：

• 7-1 架构模式：abstracts、base、components、layout、pages、themes、vendors 七个目录 + 一个 main.scss
• 变量命名约定：$category-property-variant 格式（如 $color-primary、$spacing-md）
• 间距统一：8px 基准比例尺（4px、8px、16px、24px、32px、48px）
• Mixin 和函数：响应式断点、响应式字体、flexbox 居中、网格布局
• 组件化模式：BEM 命名、容器组件、变体修饰符

装好之后 AI 帮你写 SCSS，直接按这套标准来，不用再手动调整。

安装命令：

git clone https://github.com/Mindrally/skills.git
cp -r skills/scss-best-practices .cursor/skills/

5. Modern CSS Skills

GitHub：https://github.com/moderncss/skills

CSS 这几年进步太快，好多过去需要 JS 或者预处理器才能做的事情，现在纯 CSS 就能搞定。这个项目由 moderncss.ai 维护，是一套现代 CSS 编码规则集合。

核心特性：

• CSS 容器查询（Container Queries）
• CSS 级联层（Cascade Layers）
• CSS 原生嵌套语法
• CSS 子网格（Subgrid）
• CSS 颜色函数（OKLCH、相对颜色）
• 新的选择器（:has()、:is()、:where()）
• CSS 滚动驱动动画
• View Transitions API

装了这个之后，AI 帮你写样式时会用最新的 CSS 特性，而不是一直用老一套。

安装命令：

git clone https://github.com/moderncss/skills.git
cp -r moderncss/skills/.cursor/skills/* .cursor/skills/

6. UI/UX Pro Max

GitHub：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

这个不是代码技能，而是设计技能。包含 161 条推理规则和 67 种 UI 风格，让 AI 编程助手拥有设计智慧。

v2.0 新增了设计系统生成器，告诉它项目需求，它自动生成完整的设计系统，包含配色方案、排版规范、组件结构、布局建议。支持多种平台：Web、React Native、Flutter、SwiftUI 等。

有 CLI 工具 uipro-cli，可以独立使用。

安装命令：

npm install -g uipro-cli
# 或者
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git

7. Electron Skills

ModelScope：https://www.modelscope.cn/skills/@claude-dev-suite/electron

这个技能包涵盖 Electron桌面应用开发的核心知识：

• 主进程和渲染进程通信
• 窗口管理和多窗口
• 文件系统操作
• 原生菜单和托盘
• 自动更新机制
• 打包和分发

安装命令：

git clone https://www.modelscope.cn/skills/@claude-dev-suite/electron.git

总结：7 个 Skills 覆盖领域

装上这些技能包之后，AI 编程助手生成的代码质量明显提升。不用再去翻文档、调配置，效率确实高了不少。

使用建议

苏米注：根据我的经验，建议按以下优先级安装：

1. 必装：antfu/skills（前端工具链标准）
2. 推荐：scss-best-practices + moderncss/skills（样式规范）
3. 按需：根据项目类型选择 amap-skills、threejs-skills、electron
4. 补充：ui-ux-pro-max（设计能力较弱时）

参考资料：

• Anthony Fu Skills - GitHub
• Three.js Skills - GitHub
• Modern CSS Skills - GitHub