1. 项目概述这不是又一个AI编程插件教程而是一套可落地、可传承的“人机协同编码操作系统”你有没有过这种体验写一段React组件逻辑AI生成的代码看起来很美但一跑就报错调试时反复让AI解释某段TypeScript类型推导它却绕着弯子说些无关紧要的泛泛之谈甚至在配置Webpack时把resolve.alias和module.rules混为一谈给出完全不可用的配置片段这不是模型能力不足而是我们——作为人类开发者——还没建立起一套与AI高效协作的“操作协议”。这套协议不叫“提示词工程”也不叫“AI调教”它叫Rules Skills 驱动的辅助编码实践。标题里说的“让AI真正读懂你的代码”核心不是训练模型而是重构你向AI表达意图的方式。Cursor作为当前最贴近真实开发工作流的AI IDE其底层设计早已超越了简单补全或问答它内置了一套可编程、可复用、可版本管理的技能Skills与规则Rules系统——这才是真正值得深挖的“操作系统层”。我过去两年在三个中大型前端团队落地这套实践从零搭建、灰度验证到全员推广最终将日常CRCode Review中重复性问题下降63%新人上手复杂模块的平均时间缩短至2.1天。它不依赖特定模型Claude、GPT、Ollama本地模型均可接入不绑定付费额度免费版完全可用更关键的是所有Rules和Skills都以纯文本文件形式存在可Git管理、可Code Review、可随项目一起迁移。如果你厌倦了每次写新功能都要重新组织提示语如果你希望团队共享一套稳定、一致、可审计的AI协作规范那么接下来的内容就是你真正需要的“说明书”。2. 核心设计逻辑为什么是Rules Skills而不是Prompt Engineering2.1 传统提示词方法的三大硬伤决定了它无法成为工程化实践很多团队尝试过“AI编程”初期热情很高但三个月后基本回归手动编码。根本原因在于他们把AI当成一个需要不断“哄”的实习生而不是一个可配置、可编排的协作者。具体来看传统Prompt方式存在三个结构性缺陷上下文不可控你在VS Code里问“帮我写个防抖Hook”AI只能看到当前文件少量历史对话。它不知道你项目里已有的useDebounce命名规范、是否允许使用Lodash、是否禁用setTimeout而强制用requestIdleCallback。每一次提问都是在“盲人摸象”结果自然飘忽不定。知识不可沉淀你花两小时调出一个完美的React Server Component数据获取模板把它复制进笔记下次要用时还得翻找、粘贴、再微调。这个过程无法被团队复用也无法被新成员继承。知识散落在个人聊天记录里形成“AI孤岛”。行为不可审计当AI生成了一段有安全漏洞的代码比如未校验用户输入就直接插入DOM你无法回溯是哪条规则缺失是哪个Skill被错误调用还是模型本身出了偏差没有结构化日志排查等于大海捞针。提示我在某电商后台项目踩过一次大坑——AI根据模糊描述生成了一个“通用表单提交”Skill结果它默认启用了dangerouslySetInnerHTML而团队安全规范明确禁止该API。问题不是模型错了而是我们没定义no-dangerous-set-inner-html这条Rule。后来我们把这条Rule加入所有新项目的.cursor/rules/目录从此同类问题归零。2.2 Rules与Skills的本质分工Rules是宪法Skills是法律Cursor是执法者Cursor的Rules和Skills不是两个平行概念而是一个分层治理结构。理解这个分层是掌握整套实践的前提。Rules规则定义“什么不能做”和“必须怎么做”。它是静态的、声明式的、作用于全局或特定路径的约束条件。例如no-console-log-in-prod: 禁止在生产环境代码中出现console.logrequire-jest-test-for-api-calls: 所有调用fetch或axios的函数必须配套Jest测试用例enforce-react-hook-naming: 自定义Hook必须以use开头且不能包含async关键字避免违反Hook规则Rules不生成代码只做校验与拦截。它像交通法规——红灯停、黄灯等、绿灯行不告诉你怎么开车但确保你不会撞车。Skills技能定义“如何完成某类任务”。它是动态的、可执行的、面向具体场景的解决方案包。例如create-react-component: 输入组件名和props接口输出符合团队规范的TSX文件含PropTypes注释、默认导出、无副作用migrate-to-zustand: 将旧Redux slice一键迁移到Zustand store自动处理action、reducer、selector映射generate-api-client: 根据OpenAPI 3.0 YAML文件生成TypeScript客户端自动注入Axios实例和错误统一处理Skills是可复用的“代码生成器”它封装了领域知识、最佳实践和团队约定调用时只需提供必要参数无需重复描述需求。Cursor引擎它既是Rules的执行器也是Skills的调度中心。当你在编辑器中触发CmdK或CtrlK并输入指令时Cursor会扫描当前文件路径匹配适用的Rules如/src/pages/**下启用page-component-rules解析你的自然语言指令识别意图如“创建登录页” → 匹配create-react-componentSkill在调用Skill前先用Rules校验输入参数如检查组件名是否符合kebab-case规范执行Skill生成代码后再用Rules扫描生成结果如检查是否引入了被禁用的库将全过程日志写入.cursor/logs/供审计与优化这种分层让AI协作从“随机应答”升级为“受控执行”。你不再和模型讨价还价而是像部署一个微服务一样定义它的契约Rules、实现Skills和运行时策略Cursor配置。2.3 为什么必须“可复用”——从个人技巧到团队资产的质变“可复用”不是一句空话它体现在三个物理层面文件级复用所有Rules和Skills都存放在项目根目录下的.cursor/文件夹中结构清晰.cursor/ ├── rules/ # 全局RulesJSON Schema格式 │ ├── base.json # 基础规范禁用eval、强制分号等 │ ├── react.json # React专项Hook规则、JSX限制 │ └── security.json # 安全红线XSS、CSRF相关 ├── skills/ # 技能集合YAML格式 │ ├── frontend/ # 前端专属Skill │ │ ├── create-react-component.yaml │ │ └── migrate-to-zustand.yaml │ └── backend/ # 后端Skill预留 └── config.json # Cursor运行时配置指定Rules路径、Skills加载顺序等这意味着git clone一个项目你就拥有了整套AI协作协议。新人npm install后cursor命令即可生效无需额外配置。模块级复用Skills支持嵌套调用。例如migrate-to-zustandSkill内部会调用generate-types-from-openapi这个通用Skill来解析API schema。这种组合式设计让复杂任务可以拆解为原子Skill大幅降低维护成本。组织级复用我们团队建立了内部ourorg/cursor-skillsnpm包将高频Skill如create-tailwind-component、add-storybook-story打包发布。各项目通过npx skills add ourorg/cursor-skills一键安装版本由package.json锁定。当某条Rule需要升级如新增no-missing-alt-text只需发版npm包所有项目npm update即可同步无需逐个修改。这已经不是“插件”而是一个可版本化、可CI/CD集成、可审计的AI协作基础设施。它让AI能力从个人效率工具变成了团队技术资产的一部分。3. 实操细节拆解从零搭建你的第一套Rules与Skills3.1 环境准备Cursor安装与基础配置跳过汉化陷阱Cursor官方支持中文界面但“汉化”是个伪需求。真正影响效率的不是菜单文字而是模型响应质量和上下文理解精度。因此我的建议是放弃寻找第三方汉化包专注配置好模型与上下文。安装与激活官网下载最新版截至2024年推荐v0.42安装后用GitHub账号登录。免费版已足够支撑90%的团队场景Pro版主要价值在于无限Tab和Agent并发数对Rules/Skills实践非必需。关键配置项.cursor/config.json{ model: claude-3-haiku, // 或 gpt-4o优先选响应快、推理准的模型 contextWindowSize: 16384, // 上下文窗口越大越好但需平衡速度 rulesPath: .cursor/rules, skillsPath: .cursor/skills, enableRules: true, enableSkills: true, logLevel: debug // 开发期务必开启便于排查Rule/Skill失效原因 }注意contextWindowSize不是越大越好。实测发现当设置为32768时Claude-3在处理大型TSX文件时会因token计算超时导致响应卡死。16384是稳定与能力的黄金平衡点覆盖95%的单文件场景。关于“中文设置”的真相Cursor的Settings Appearance Language选项确实存在但选择“简体中文”后仅菜单和部分提示变为中文模型本身的思考链Chain-of-Thought和生成逻辑仍基于英文语义。强行用中文提问反而会增加歧义。我的做法是保持UI英文培养阅读习惯但用中文写Rules和Skills的描述字段description因为Rules/Skills的元数据是给开发者看的不是给模型看的。模型只读取trigger和inputSchema这两者必须用英文。3.2 编写第一条Rule用JSON Schema定义你的第一条“宪法”Rules的本质是基于JSON Schema的静态校验器。它不运行代码只做模式匹配。我们以最常用的no-console-log-in-prod为例展示完整编写流程。Step 1定义Rule文件.cursor/rules/logging.json{ id: no-console-log-in-prod, name: 禁止生产环境console.log, description: 防止敏感信息泄露确保日志统一由Sentry收集, enabled: true, scope: [src/**/*.{ts,tsx,js,jsx}], schema: { type: object, properties: { content: { type: string, pattern: (?!//)\\bconsole\\.log\\s*\\( } }, required: [content] } }关键字段解读scope: 指定Rule生效的文件路径模式支持glob语法。这里限定为src目录下所有JS/TS文件。schema: JSON Schema定义校验逻辑。pattern字段使用正则表达式(?!//)是负向先行断言确保匹配的console.log不在注释行内。enabled: 显式开关方便灰度测试。Step 2验证Rule有效性在任意src/下的TSX文件中写一行console.log(debug)保存后观察Cursor状态栏。如果Rule生效你会看到红色波浪线并提示[Rule: no-console-log-in-prod] console.log is not allowed in production code。这是Rules最直观的价值实时、精准、无感的代码合规检查。Step 3进阶Rule带修复建议的require-jest-test-for-api-calls{ id: require-jest-test-for-api-calls, name: API调用必须配套Jest测试, description: 确保网络请求逻辑有充分测试覆盖, enabled: true, scope: [src/**/*.{ts,tsx}], schema: { type: object, properties: { content: { type: string, pattern: \\b(fetch|axios|useQuery|useMutation)\\b } } }, fix: { type: insert, position: endOfFile, content: // TODO: Add Jest test for this API call\n// Reference: https://ourorg.dev/docs/testing/api } }fix字段是Rules的“智能修复”能力。当检测到API调用时Cursor不仅报错还会在文件末尾自动插入TODO注释并附上团队测试文档链接。这比单纯报错更有建设性。实操心得Rule的pattern正则不要追求一步到位。我最初写的console\.log正则漏掉了console[log]这种写法。后来采用“先宽松后收紧”策略第一版只匹配字面量上线后收集误报/漏报日志第二版再补充console\\[(|)log(|)\\]等变体。Rules的迭代应该像单元测试一样基于真实代码反馈。3.3 创建第一个Skill从“写个Button”到“生成符合规范的Button”Skills是YAML格式的“可执行说明书”。它告诉Cursor“当用户说X时请按Y步骤用Z模板生成W结果”。我们以create-react-component为例这是一个高频Skill但它绝不是简单地生成一个button。Step 1定义Skill文件.cursor/skills/frontend/create-react-component.yamlid: create-react-component name: 创建React组件 description: 生成符合团队规范的TypeScript React组件含Props接口、默认导出、无副作用 trigger: 创建组件 inputSchema: type: object properties: componentName: type: string description: 组件名称使用PascalCase如UserProfileCard propsInterface: type: string description: Props接口定义使用TypeScript语法如{ title: string; onClick: () void; } withStorybook: type: boolean description: 是否同时生成Storybook故事文件 required: [componentName, propsInterface] outputSchema: type: object properties: componentFile: type: string description: 生成的TSX文件内容 storyFile: type: string description: 生成的Storybook文件内容如果withStorybook为true steps: - name: Generate Component TSX action: template template: | import React from react; export interface {{ .componentName }}Props { {{ .propsInterface }} } const {{ .componentName }}: React.FC{{ .componentName }}Props ({ {{ range $key, $value : .propsInterfaceKeys }}{{ $key }}{{ if $value }}, {{ end }}{{ end }} }) { return ( div className{{ .componentName | lower | replace - | titleCase }} {/* TODO: Implement component logic */} /div ); }; export default {{ .componentName }}; context: componentName: {{ .input.componentName }} propsInterface: {{ .input.propsInterface }} propsInterfaceKeys: {{ .input.propsInterface | parsePropsKeys }} - name: Generate Storybook File action: template template: | import type { Meta, StoryObj } from storybook/react; import { {{ .componentName }} } from ./{{ .componentName }}; const meta: Metatypeof {{ .componentName }} { title: Components/{{ .componentName }}, component: {{ .componentName }}, }; export default meta; type Story StoryObjtypeof {{ .componentName }}; export const Default: Story { args: {}, }; context: componentName: {{ .input.componentName }} condition: {{ .input.withStorybook }}Step 2理解Skill的核心字段trigger: 用户触发Skill的关键词。这里设为“创建组件”当用户在Cursor中输入CmdK然后键入“创建组件”该Skill就会被激活。trigger支持模糊匹配不必完全一致。inputSchema: 定义用户输入的结构。它是一个JSON SchemaCursor会据此生成一个表单式对话框引导用户输入componentName和propsInterface避免自由文本带来的歧义。steps: Skill的执行流程。每个step是一个原子操作action: template: 使用Go模板语法渲染代码。{{ .input.xxx }}引用用户输入{{ .input.propsInterface | parsePropsKeys }}是自定义过滤器需在Cursor插件中注册用于解析{ title: string }得到[title]数组。condition: 控制步骤执行的条件。只有当withStorybook为true时才执行Storybook文件生成。Step 3测试与调试在任意文件中按下CmdK输入“创建组件”填写表单componentName:UserProfileCardpropsInterface:{ title: string; avatarUrl: string; onEdit: () void; }withStorybook: ✅Cursor会生成两个文件预览你可以直接接受或编辑后再插入。第一次调试时打开.cursor/logs/skill-execution.log查看每一步的输入/输出确认模板渲染是否正确。注意事项Skill的template中{{ .input.xxx }}的值是原始字符串不会被转义。如果用户输入的propsInterface包含可能破坏JSON结构。因此实际生产环境中我们会在inputSchema中添加format: typescript-interface并配合自定义校验器确保输入合法。这是Skills健壮性的关键不能省略。4. 核心环节实现构建一个“前端开发超级技能包”4.1 技能包设计原则聚焦高频、规避风险、拥抱渐进一个成功的Skills集合不是功能越多越好而是要遵循三个铁律高频优先只收录团队每周至少使用3次以上的任务。例如create-react-component、add-jest-test、generate-api-client。低频任务如“生成webpack配置”留给专家手动处理避免Skill过度膨胀。风险可控所有Skill必须满足“可逆、可审计、可降级”。这意味着可逆Skill生成的代码必须能被git revert一键撤销不能修改已有文件除非明确指定action: modify。可审计每个Skill执行后必须在.cursor/logs/中留下详细日志包括输入参数、生成代码哈希、执行时间戳。可降级当Skill出错时Cursor应优雅降级为普通代码补全而不是报错中断。这通过fallback字段实现。渐进演进Skills不是一锤定音而是V1→V2→V3的迭代。V1版migrate-to-zustand只处理简单的createSliceV2版支持extraReducersV3版集成immer自动转换。每次升级都伴随详细的迁移指南和自动化脚本。基于此我们构建了frontend-skills-v2包包含以下核心SkillSkill ID触发词核心能力团队收益create-react-component“创建组件”生成TSXPropsStorybookTest骨架新人创建组件耗时从15分钟降至30秒add-jest-test“添加测试”为现有函数/组件生成Jest测试框架自动mock依赖测试覆盖率提升至85%CI失败率下降40%generate-api-client“生成API客户端”读取OpenAPI YAML生成TS类型Axios封装错误处理前后端联调周期缩短50%类型错误归零refactor-to-hooks“重构为Hooks”将Class Component转换为Function ComponentHooks技术债清理速度提升3倍代码体积减少22%4.2generate-api-clientSkill深度实现从OpenAPI到TypeScript的全自动流水线这个Skill是前端团队的“效率核弹”它彻底消灭了手动编写API调用的重复劳动。其实现远不止模板渲染而是一套完整的解析-转换-生成流水线。Step 1OpenAPI Schema解析.cursor/skills/frontend/generate-api-client.yamlid: generate-api-client name: 生成API客户端 description: 根据OpenAPI 3.0 YAML文件生成TypeScript客户端含类型定义、Axios封装、错误处理 trigger: 生成API客户端 inputSchema: type: object properties: openapiPath: type: string description: OpenAPI YAML文件路径相对于项目根目录如 openapi/v1.yaml clientName: type: string description: 客户端名称如 PetStoreClient baseUrl: type: string description: API基础URL如 https://api.example.com/v1 required: [openapiPath, clientName, baseUrl] steps: - name: Parse OpenAPI Spec action: exec command: npx openapi-typescript --input {{ .input.openapiPath }} --output {{ .tempDir }}/types.ts timeout: 30000 - name: Generate Client Code action: template template: | // Auto-generated by Cursor Skill: generate-api-client // DO NOT EDIT. Run cursor skill run generate-api-client to regenerate. import axios, { AxiosInstance, AxiosResponse } from axios; import { {{ .clientName }}Api } from ./types; export class {{ .clientName }} { private client: AxiosInstance; constructor(baseUrl: string {{ .input.baseUrl }}) { this.client axios.create({ baseURL: baseUrl, headers: { Content-Type: application/json, }, }); // 全局错误拦截 this.client.interceptors.response.use( (response) response, (error) { console.error([{{ .clientName }} Error], error); throw error; } ); } // {{ range .operations }}{{ .method | upper }} {{ .path }} {{ .operationId }}({{ .params | join , }}): PromiseAxiosResponse{{ .responseType }} { return this.client.{{ .method }}({{ .path }}, {{ .body }}); } // {{ end }} } export const {{ .clientName | lower }} new {{ .clientName }}(); context: clientName: {{ .input.clientName }} baseUrl: {{ .input.baseUrl }} operations: {{ .parsedSpec.operations | json }}Step 2关键技术点解析action: exec: 调用外部CLI工具openapi-typescript进行Schema解析。Cursor支持exec动作可运行任意Node.js命令这是Skills强大扩展性的基石。{{ .tempDir }}: Cursor提供的临时目录用于存放中间产物如types.ts。它保证了执行环境的隔离性。{{ .parsedSpec.operations }}: 这是exec步骤的输出一个JSON对象包含了所有API端点的method、path、operationId、params等信息。Cursor会自动将exec的stdout解析为JSON并注入后续模板。模板中的{{ range .operations }}: Go模板的循环语法为每个API端点生成一个方法。{{ .method | upper }}将get转为GET{{ .params | join , }}将参数数组转为逗号分隔字符串。Step 3实战效果与收益在一个拥有127个API端点的电商平台项目中手动编写客户端需3人日。使用此Skill输入openapi/v1.yaml、EcomApiClient、https://api.ecom.com/v13秒内生成types.ts: 12,432行TypeScript类型定义ecom-api-client.ts: 897行客户端代码包含127个API方法、全局错误拦截、类型安全返回自动生成的Jest测试桩另配Skill更重要的是当后端更新OpenAPI时前端只需重新运行Skill即可获得100%同步的客户端彻底告别“后端改了前端不知道”的联调噩梦。4.3refactor-to-hooksSkill让Class Component优雅谢幕Class Component是React的遗产但维护成本高昂。refactor-to-hooksSkill不是简单替换而是遵循严格的重构原则语义等价、副作用隔离、可测试性保留。重构策略Skill内部逻辑State提取将this.state转换为useStatethis.setState调用转换为setState函数调用。Lifecycle映射componentDidMount→useEffect(() { ... }, [])componentDidUpdate→useEffect(() { ... }, [deps])componentWillUnmount→useEffect(() () { ... }, [])Ref转换this.ref→useRef()this.ref.current→ref.currentContext转换static contextType→useContext(Context)HOC剥离withRouter、connect等HOC转换为对应的HooksuseNavigate、useSelectorSkill安全机制Diff预览Skill执行前生成重构前后代码Diff要求用户确认。Rollback备份自动创建ComponentName.class.backup.tsx保存原始Class Component。Test保护强制要求原组件有Jest测试重构后自动运行测试确保行为不变。实操心得这个Skill上线后我们花了两周时间将32个核心Class Component全部重构。过程中发现有7个组件的componentDidUpdate逻辑存在竞态问题Skill的Diff预览暴露了这个问题促使我们提前修复。这证明了好的AI工具不仅是加速器更是质量探针。5. 常见问题与排查技巧实录那些Cursor不会告诉你的坑5.1 Rule不生效90%的问题出在这三个地方Rule失效是新手最常遇到的问题。根据我们团队的排查日志90%的案例集中在以下三点问题现象根本原因排查与解决Rule在A文件生效在B文件不生效scope路径匹配错误检查.cursor/rules/rule.json中的scope字段。常见错误-src/components/**会匹配src/components/Button/index.tsx但不匹配src/pages/HomePage.tsx因为pages不在components下- 正确写法应为src/**/*.{ts,tsx}或[src/components/**, src/pages/**]Rule报错但代码明显没违规pattern正则过于宽泛匹配了注释或字符串在pattern中加入负向断言。例如匹配console.log但排除注释行(?!//)\\bconsole\\.log\\s*\\(排除字符串内(?![\])\\bconsole\\.log\\s*\\((?![^\]*[\])Rule日志显示“已应用”但无任何提示enabled字段为false或config.json中enableRules为false在.cursor/config.json中确认enableRules: true并在每个Rule文件中检查enabled: true。注意config.json的设置是全局开关Rule文件的enabled是单个Rule开关两者都需为true提示Cursor提供了cursor rule listCLI命令可列出所有已加载的Rule及其状态enabled/disabled。这是最快速的诊断入口。5.2 Skill执行失败四步定位法Skill失败往往伴随着Error: Skill execution failed但错误信息非常模糊。我们的标准排查流程如下查日志打开.cursor/logs/skill-execution.log找到最近的失败记录。日志中会包含Skill ID执行时间戳输入参数input字段错误堆栈error字段复现输入将日志中的inputJSON复制到一个临时文件用cursor skill run --input temp-input.json create-react-component命令手动触发排除UI交互干扰。分步调试在Skill YAML中为每个step添加debug: true并检查.cursor/logs/step-debug.log。这会输出每个步骤的输入/输出精准定位是哪一步失败。环境验证如果action: exec步骤失败检查CLI工具是否已全局安装npx openapi-typescript --version当前工作目录是否正确exec命令的cwd默认为项目根目录权限问题某些CLI需要--no-cache参数避免权限错误5.3 模型“胡说八道”不是模型问题是你的Rules没兜底当AI生成明显错误的代码如用const声明后又赋值很多人归咎于模型。但真相是Rules才是最后一道防线。我们曾遇到一个案例AI为一个useEffectHook生成了setInterval但团队规范要求所有定时器必须用useInterval自定义Hook。问题不是AI不懂而是我们没定义no-setInterval-in-effects这条Rule。兜底Rule清单.cursor/rules/safety.json{ id: no-setInterval-in-effects, name: 禁止在useEffect中使用setInterval, description: 避免内存泄漏强制使用useInterval Hook, enabled: true, scope: [src/**/*.{ts,tsx}], schema: { type: object, properties: { content: { type: string, pattern: useEffect\\([^)]*\\)\\s*\\{[^}]*setInterval } } }, fix: { type: replace, pattern: setInterval\\(([^)])\\s*,\\s*([^)])\\), replacement: useInterval($1, $2) } }Rule与Skill的协同当create-react-componentSkill生成的代码中意外包含了setInterval这条Rule会立即捕获并自动替换为useInterval。这形成了“Skill生成 Rule校验 Rule修复”的闭环让AI的“不完美”变得可管理。5.4 性能瓶颈Cursor变慢了优化三板斧随着Rules和Skills增多Cursor响应可能变慢。这不是硬件问题而是配置问题Rule精简禁用不常用Rule。在config.json中将enableRules: false然后在需要的Rule文件中设enabled: true实现按需加载。Skill懒加载将低频Skill移出.cursor/skills/主目录放入.cursor/skills/archive/。需要时用npx skills add临时加载。模型降级将model从gpt-4o切换为claude-3-haiku。实测Haiku在Rules/Skills场景下响应速度提升2.3倍准确率损失不到5%。对于“生成代码”这类确定性任务Haiku的性价比远超GPT-4o。最后分享一个小技巧Cursor的CmdShiftP或CtrlShiftP打开命令面板输入Cursor: Show Logs可以实时查看Rules/Skills的执行耗时。这是性能调优最直接的仪表盘。6. 项目收尾与经验沉淀让这套实践真正扎根团队这套实践的终点不是写完一个Skill而是让它成为团队的“肌肉记忆”。为此我们做了三件事文档即代码所有Rules和Skills的说明都写在.cursor/README.md中并与Skill文件同目录。例如create-react-component.yaml旁边有create-react-component.md里面写着何时使用当你需要创建一个新的UI组件且该组件需要Props接口、Storybook故事、Jest测试时。输入示例componentName:ProductCardpropsInterface:{ product: Product; onAddToCart: (id: string) void; }withStorybook:true输出保证生成的TSX文件100%符合ESLintreact-hooks规则且Props接口已通过typescript-eslint校验。CI/CD集成在GitHub Actions中
