1. 为什么你的 Cursor 写 React 组件总差点意思如果你正在用 Cursor 写 React 项目大概率遇到过这种场景让 AI 生成一个UserCard组件结果它给你一个函数组件样式用内联styleProps 直接写any文件还平铺在components根目录下。你每次都得在 Prompt 里补一句“用 CSS Modules”“加 interface”“放文件夹里”补完这次下次开新会话它又忘了。这不是模型不行而是你缺一份“项目规范说明书”。Cursor 的 Agent Skills 就是干这个的把团队里那些“每次都要重复交代”的组件规范、目录约定、样式方案固化成一个可被 AI 按需加载的技能文件。它和.cursorrules的区别在于.cursorrules是全局常驻的“员工手册”而 Agent Skills 是“特定任务的 SOP”只在写组件、做重构这类具体场景下才被加载省 Token 也更专注。这篇就聚焦前端 React 项目的落地从SKILL.md骨架怎么写到settings.json里怎么配再到怎么验证 AI 真的按你的规范生成了组件。全程可复制跟着做就能搭出一个专属前端 AI 助手。2. 前置准备TaoToken 接入与 Cursor 环境确认在写 Skill 之前先把模型通道理顺。Cursor 本身支持自定义 API 接入如果你希望用更稳定的模型服务来驱动 Agent可以走 TaoToken 的 API 通道。官网入口在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意这个地址不带 UTM 参数配置时直接填。具体操作分两步。第一步去控制台创建一个 API Key地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 创建后复制那串sk-开头的密钥。第二步在 Cursor 里打开设置找到 Models 或 API Keys 区域把 TaoToken 的 API 地址和 Key 填进去。如果你用的是 Claude Code 这类编码 Agent接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有对应的配置说明。环境确认这块Cursor 版本建议用较新的稳定版Agent Skills 相关开关在 Settings 的 Rules 或 Features 里确保是打开状态。项目侧你需要一个 React TypeScript 工程样式方案按你团队实际来本文以 CSS Modules 为例。目录结构上Skill 文件放在项目根目录的.cursor/skills/下这样能跟着 Git 走新同事git pull下来就自动拥有同一套规范。3. 可复制配置SKILL.md 骨架与 settings.json 片段3.1 创建 Skill 目录在项目根目录执行mkdir -p .cursor/skills/react-component-gen这个react-component-gen就是技能名后面在 Cursor 里触发时用的也是它。目录建好后核心文件是SKILL.md它由两部分组成顶部的 Frontmatter 元数据和下面的 Markdown 指令正文。3.2 编写 SKILL.md把下面这段完整写入.cursor/skills/react-component-gen/SKILL.md--- name: react-component-gen description: Generate a new React functional component with CSS Modules and TypeScript interfaces following team standards. disable-model-invocation: false --- # React Component Generator Use this skill when the user asks to create a new UI component, page, or widget. ## Instructions 1. Analyze the Request: Identify the component name and props required. 2. Directory Structure: - Create a folder named exactly as the component (PascalCase). - Inside, create index.tsx and styles.module.scss. 3. Code Standards: - index.tsx: - Use FC type from react. - Import styles as import styles from ./styles.module.scss. - Define an interface [ComponentName]Props. - Export the component as default. - styles.module.scss: - Create a root class .container. - Use BEM naming convention for inner elements if needed. ## Template Example If the user asks for a Button, generate: tsx // Button/index.tsx import React, { FC } from react; import styles from ./styles.module.scss; export interface ButtonProps { label: string; onClick: () void; } const Button: FCButtonProps ({ label, onClick }) { return ( button className{styles.container} onClick{onClick} {label} /button ); }; export default Button;Frontmatter 里的 name 是技能标识description 是给模型看的触发说明写得越具体AI 越容易在合适的时候加载它。disable-model-invocation: false 表示允许模型自动调用如果你只想手动触发改成 true。 ### 3.3 settings.json 配置片段 Cursor 的 Skill 加载行为可以在项目级 settings.json 里做补充配置。在 .cursor/settings.json 中加入 json { cursor.skills.enabled: true, cursor.skills.paths: [.cursor/skills], cursor.skills.autoInvoke: true, cursor.rules.globs: [**/*.tsx, **/*.ts] }这里skills.paths指定技能目录autoInvoke控制是否允许自动触发rules.globs限定规则生效的文件范围避免在写配置文件时也去加载组件规范。如果你团队有多个技能比如还有测试规范、API 请求规范就在skills目录下并列建多个文件夹每个里面放各自的SKILL.md。4. 验证请求让 AI 真的按规范生成组件配置写完了得验证它是否生效。打开 Cursor 的 Agent 聊天框输入帮我写一个 UserCard 组件包含头像和名字。如果 Skill 被正确加载你会看到 Agent 在生成前有一个“加载技能”的动作提示然后输出的代码应该满足文件放在UserCard/文件夹下有index.tsx和styles.module.scssindex.tsx里用了FC类型、定义了UserCardProps接口、样式通过styles.container引用。手动触发的方式是输入/在命令列表里应该能看到react-component-gen。选中它再描述需求效果一样。验证时重点看三个点目录结构对不对、Props 有没有 interface、样式是不是 CSS Modules。如果这三点都符合说明 Skill 生效了。你可以再试一个ProductList组件看它是否稳定复现同一套规范而不是这次对了下次又飘。5. 本篇常见错排查Skill 不触发先确认.cursor/skills/react-component-gen/SKILL.md路径没写错Frontmatter 的---是独立行且没有多余空格。再看 Cursor 设置里 Skills 开关是否打开版本是否支持。如果disable-model-invocation设成了true自动触发就不会生效只能手动/调用。生成了组件但没建文件夹检查SKILL.md里 Instructions 的目录结构描述是否足够明确。模型有时会偷懒把“Create a folder named exactly as the component”写成一句带过。你可以把模板示例补得更完整甚至加一句“Do not create the component file at the root level”。样式引用报错如果生成的是styles.module.scss但项目实际用.module.css改SKILL.md里的文件名即可。TypeScript 对 CSS Modules 的类型声明需要项目里有declarations.d.ts或对应的类型包否则import styles会飘红这属于项目配置问题不是 Skill 的问题。API 请求失败如果你在 Cursor 里接了 TaoToken 的 API报 401 就检查 Key 是否复制完整、有没有多余空格报 404 就确认 API 地址填的是https://taotoken.net/api而不是带路径的地址。模型对话调试可以在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 里先验证通道是否通。Skill 之间互相干扰如果你同时装了多个技能比如组件生成和颜色重构触发时可能加载了不该加载的那个。解决办法是把每个技能的description写得更聚焦组件生成就写“create new component”重构就写“refactor existing colors”别用模糊词。6. 把规范变成可复用的团队资产Skill 写好后把.cursor文件夹提交到 Git 仓库。新同事拉下代码他的 Cursor 会自动读取这套技能AI 助手立刻学会你们团队的组件规范不用再手把手教。这比在群里发一份 Word 规范文档管用得多因为规范直接作用在生成环节而不是靠人自觉遵守。如果你想让 AI 在长期编码任务里更稳定地调用这些技能可以了解下 Coding Plan 的用法地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 它更适合持续性的 Agent 编码场景。API Key 的管理入口在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 需要新建或轮换密钥时从这里进。最后留一个我踩过的坑别把.cursorrules和 Agent Skills 混着用同一套内容。.cursorrules放那些“永远成立”的原则比如“禁止使用 any”Agent Skills 放“特定任务才需要”的流程比如“生成组件时建文件夹”。两者分工清楚AI 的上下文才不会被无关规则塞满生成质量也更稳。