这个仓库叫niuge-skills。名字只是仓库名真正想分享的是里面这套 AI Agent Skill 合集它把我平时反复提醒 AI 的工程规矩、工作流和模板沉淀下来让 Agent 做事时少一点自由发挥多一点稳定、克制、可复用。GitHub 仓库xiaoniuge36/niuge-skillsskills.sh 收录页https://www.skills.sh/xiaoniuge36/niuge-skills先说说我为什么要折腾这件事用 AI Agent 做过项目的同学应该都遇到过这些场景你让它做一个订单列表它给你整出一个带渐变背景、毛玻璃、英文 badge 的“高级仪表盘”还顺手加了三张你根本没要的统计卡片。你让它对接接口它转头写了一堆localStorage假数据静态看着挺完整一联调全是坑。同一个需求今天生成一个样明天又变成另一个样结构、风格和流程都很难复用。聊到一半上下文变长了它把前面定好的约束忘得一干二净你又得从头复述一遍。代码生成完以后还要你自己补审查、补测试、补文档甚至重新画架构图。说白了大模型不是不聪明而是太容易“自由发挥”。但真正落到工程项目里我们需要的是另一套东西稳定、克制、可复用、可交接、可验证。每次手动提醒它“不要 mock”“不要加没要的卡片”“按项目规范拆 hooks”“上下文快爆了先压缩”“生成完记得审查和测试”实在太累。所以我干脆把这些规矩、流程、模板都沉淀成了Skill——一种基于SKILL.md开放标准的能力包Claude Code、Codex CLI、Cursor、ChatGPT 这类工具都能直接使用。这就是这个仓库的由来。一行命令就能装npx skillsaddxiaoniuge36/niuge-skills这个仓库目前已经收了一批 Skill后面也会继续增加。前端代码生成是里面最重的核心能力但它并不只服务前端还覆盖上下文治理、代码审查、自动化测试、架构图生成和 Skill 发现。下面我挑重点聊。最重的核心fe-codegen-workbench前端代码生成工作台如果你只想先装一个装它就够了。npx skillsaddxiaoniuge36/niuge-skills--skillfe-codegen-workbench它不是那种“帮你写个组件”的小工具而是把从环境检测到代码审查的完整闭环都包进去了。你扔一句需求进去它会按一条固定流水线往下跑用户需求 ↓ [1] 环境检测 —— 自动识别 React / Vue 3 / Vue 2加载对应知识库 ↓ [2] 需求解析 —— 拆出页面类型、字段、业务规则、风格信号 ↓ [2.5] 设计推荐 —— 主动给出 3 个设计风格 “不使用品牌”选项 ↓ [3] 模板匹配 —— 从内置 16 种模板里挑最合适的 ↓ [4] 代码生成 —— types → services → hooks → 组件 → 页面 → 样式 ↓ [5] 自审 —— P0~P3 分级体检P0/P1 自动修 ↓ 交付它支持三大常见技术栈ReactAnt Design Pro、Vue 3Element Plus、Vue 2Element UI。内置 16 种组件模板B 端中后台、C 端、H5 的常见页面都能覆盖。最值钱的是几条“不许这样”的硬规矩这个工作台真正有用的地方不是“更会生成”而是它会明确告诉 AI有些东西不能做。禁止 mock不准生成假数据不准用localStorage或内存数组模拟接口。Service 层必须是真实 API 调用骨架。严禁过度设计你没要的统计卡片、hero 区块、营销文案、装饰 badge一个都不许加。只做用户要求的功能。模板拼装优先命中模板后走“拼装模式”优先复用模板的目录结构、组件拆分和 hooks 组织方式。同一需求重复生成结果应该是同模板、同结构、同风格。hooks/composables 优先先生成数据处理层再生成 UI 层避免把业务逻辑全塞进组件里。ProTable 必须用 request 模式禁止dataSource 手动 loading 那套老写法。视觉只走主题层业务代码.tsx/.vue里不硬编码色值和字体视觉变化统一放到隔离的主题 token 文件里。一句话它把大模型的“创造欲”关进了企业级前端规范的轨道里。还有两个我很喜欢的小设计1. 新建管理后台时直接走脚手架。你说“创建一个后台管理项目”它不会从零裸搭而是默认走create-admin-platformCLIReact 19 AntD 6 React Router 7 Vite登录、权限、主题等基础能力都已经准备好。pnpmdlx create-admin-platformlatest my-admin2. 想要设计感时先让你选风格。第 2.5 步会基于你的需求主动推荐 3 个设计系统比如 Linear、Notion、Stripe再加一个永远存在的「不使用品牌」选项。选了品牌它会拉取对应的DESIGN.md生成独立主题文件不想要品牌感就选默认 AntD。重点是给你选择权但不替你擅自美化。触发方式也很口语fe-codegen-workbench 做一个员工管理列表页要筛选和导出 fe-codegen-workbench 用 linear 风格做一个数据仪表盘 fe-codegen-workbench 创建管理后台项目 my-admin不要 mock另外两个自研 Skill工作流和工程规范context-compression长对话不再“失忆”这个是我自己最常用的工作流辅助 Skill和前端没有强绑定任何长对话、长任务、多文件修改都能用。跟 AI 一起做稍微复杂一点的任务时上下文很快就会膨胀一堆决策、一堆日志、改了七八个文件。然后某一刻它开始“失忆”把前面定好的约束忘了你只能一遍遍补充背景。context-compression做的事就是在上下文变长时主动把当前状态压成一份可继续执行的简报。它优先保留这些高价值信息当前目标和成功标准已经做过的关键决策以及为什么这么做约束、假设和“非目标”关键文件、命令、验证状态、blocker唯一一个最优下一步而那些重复解释、低信号日志、能从代码里恢复的样板内容会被砍掉。它特别适合切换子任务、交接给下一个 agent或者 token 预算紧张的时候用。npx skillsaddxiaoniuge36/niuge-skills--skillcontext-compressionfrontend-code-spec把阿里前端规约变成 Agent 能跑的流程光会生成还不够代码得合规。这个 Skill 基于阿里巴巴的alibaba/f2e-spec把那套前端编码规约整理成了可执行的 Agent 工作流覆盖 JS/TS/React/Node/CSS/HTML也覆盖 Git commit、Changelog、Markdown、HTTP JSON API 这些工程规约。它的思路很朴素先上自动化工具再用规则兜底。比如接入f2elint、eslint-config-ali、stylelint-config-ali这一套然后按 checklist 做 P0~P3 分级审查。它也会尊重项目自己的规则如果当前项目已经有更严格的本地规范它会保留本地规则而不是拿 f2e-spec 默认值去覆盖你刻意定好的约束。它和fe-codegen-workbench正好配套前者负责生成后者负责生成后的规约合规体检。frontend-code-spec 给这个 React 项目接入前端代码规范 frontend-code-spec 检查当前改动是否符合 f2e-specnpx skillsaddxiaoniuge36/niuge-skills--skillfrontend-code-spec顺手集成的几个开源 Skill除了自研的核心我也把社区里几个成熟好用的 Skill 放进了这个仓库。它们不只是前端生成的配套能力更像一套 Agent 开发时常用的工具箱审查、设计、测试、出图、找技能。Skill干什么来源code-review-expert结构化代码审查P0~P3 分级也是工作台第 5 步的审查引擎社区frontend-design前端设计与视觉增强有设计稿或品牌化需求时使用Anthropicwebapp-testingPlaywright 自动化 E2E 测试生成完顺手验一遍Anthropicarchitecture-diagram-generator系统架构图、网络拓扑图、技术关系图生成Cocoon AIfind-skills技能发现与推荐不知道该用哪个 Skill 时问它社区把这些和自研核心搭在一起基本就是一条完整的 Agent 工作链路需求 → 生成 → 规范 → 审查 → 测试 → 出图 → 交接怎么装、怎么用方式一npx skills CLI推荐# 全装npx skillsaddxiaoniuge36/niuge-skills# 只装核心工作台npx skillsaddxiaoniuge36/niuge-skills--skillfe-codegen-workbench方式二本地同步脚本适合把某个 Skill 同步到 Cursor / Codex CLI / Claude Code 里nodescripts/install-local-skills.mjs--toolcursor--skillfe-codegen-workbenchnodescripts/install-local-skills.mjs--toolcodex--skillfe-codegen-workbenchnodescripts/install-local-skills.mjs--toolclaude--skillfe-codegen-workbench方式三手动复制cp-rskills/fe-codegen-workbench /path/to/your-project/.cursor/skills/装好之后在支持SKILL.md标准的工具里直接它就行。它的重点是跨工具复用不需要为每个工具重新写一套提示词。项目地址也放这里方便直接打开GitHubxiaoniuge36/niuge-skillsskills.shhttps://www.skills.sh/xiaoniuge36/niuge-skills最后仓库名叫niuge-skills但它不是我想硬造的品牌。更准确地说它是一个把“我每次都要重复教 AI 的工程规矩”打包起来的工作流仓库。核心理念就一句话让 AI 在清晰的工程规范和工作流里干活稳定、克制、可复用、可验证而不是放飞自我。如果你也受够了 AI Agent 做事时的“自由发挥”欢迎来试试GitHubxiaoniuge36/niuge-skillsskills.shhttps://www.skills.sh/xiaoniuge36/niuge-skills觉得有用的话给个 star 就是对我最大的支持。有想法、有 bug或者想要新的 Skill也欢迎来仓库提 issue一起把这套工具磨得更顺手。下次见。