Kiro 完整 Cheat Sheet #

# 如果你喜欢用终端打开项目的话：
cd my-project
kiro .

# 或者也可以从 Kiro 的菜单栏操作：
File > Open Folder > 选择你的项目文件夹

# 打开聊天面板
Cmd+L（Mac） / Ctrl+L（Windows/Linux）

# 可以先试着问问这些
"解释一下这个项目的结构"
"整理一下 package.json 的依赖项"
"帮我把 README 写得更完整一些"

# 多光标编辑（学会它效率翻 3 倍）
Option + 点击（Mac）/ Alt + 点击（Windows）
→ 可以在多个位置同时出现光标，同时编辑多个地方

# 移动整行代码（超级实用的小技巧）
Option + ↑/↓（Mac）/ Alt + ↑/↓（Windows）
→ 整行代码上下移动，排版修改超方便

# 复制整行（写测试数据时超好用）
Option + Shift + ↑/↓（Mac）/ Alt + Shift + ↑/↓（Windows）
→ 直接复制当前行并插入上下位置

# 快速注释（最常用，没有之一）
Cmd + /（Mac）/ Ctrl + /（Windows）
→ 选中代码一键注释/取消注释，调试神技！ README 写得更完整一些"

# 实际示例：Kiro 自动生成的需求定义

## 用户故事
As a: 用户
I want to: 使用邮箱地址和密码登录
So that: 能使用服务的个性化功能

## 接受标准（EARS 语法）
When: 用户访问登录页面时
The system shall: 显示登录表单
With:
  - 邮箱地址输入框
  - 密码输入框（以掩码形式显示）
  - “登录”按钮
  - “忘记密码”链接

When: 用户输入正确的认证信息并点击登录按钮时
The system shall: 将用户重定向到仪表板页面
And: 生成 JWT 令牌并启动会话

When: 用户输入了错误的认证信息时
The system shall: 显示错误信息
But: 出于安全考虑，不显示具体错误原因

// Kiro 自动生成的技术设计文档示例

## 架构设计

### 前端结构

interface LoginSystem {
  // UI 组件
  components: {
    LoginForm: {
      path: "components/auth/LoginForm.tsx"
      props: {
        onSubmit: (credentials: LoginCredentials) => Promise<void>
        onForgotPassword: () => void
      }
    }

    PasswordResetModal: {
      path: "components/auth/PasswordResetModal.tsx"
      props: {
        isOpen: boolean
        onClose: () => void
      }
    }
  }

  // 状态管理
  stores: {
    AuthStore: {
      state: {
        user: User | null
        isAuthenticated: boolean
        isLoading: boolean
      }
      actions: {
        login: (credentials: LoginCredentials) => Promise<void>
        logout: () => void
        resetPassword: (email: string) => Promise<void>
      }
    }
  }

  // API 通信
  services: {
    AuthService: {
      endpoints: {
        login: "POST /api/auth/login"
        logout: "POST /api/auth/logout"
        resetPassword: "POST /api/auth/reset-password"
      }
    }
  }
}

### 后端结构
- 使用 Node.js + Express
- JWT 认证
- 使用 bcrypt 进行密码哈希
- 通过 PostgreSQL 管理用户信息

## 实现任务清单

### 前端
- [ ] 创建 LoginForm 组件
  - [ ] 实现表单校验
  - [ ] 错误处理
  - [ ] 管理加载状态
- [ ] 实现 AuthStore
  - [ ] 登录操作
  - [ ] 令牌管理
  - [ ] 自动登出功能
- [ ] 实现路由守卫
  - [ ] 未认证用户的重定向处理
  - [ ] 已认证用户的访问控制

### 后端
- [ ] 实现认证接口
  - [ ] /api/auth/login
  - [ ] /api/auth/logout
  - [ ] /api/auth/refresh
- [ ] 编写中间件
  - [ ] JWT 验证中间件
  - [ ] 请求速率限制
- [ ] 数据库设计
  - [ ] users 表
  - [ ] sessions 表

### 测试
- [ ] 单元测试
- [ ] 集成测试
- [ ] 端到端（E2E）测试

# 方法一：从 Kiro 面板操作
1. 点击左侧边栏的 Kiro 图标
2. 在 Specs 区域点击「+」按钮
3. 用自然语言输入你的需求

# 方法二：通过聊天窗口生成
1. 使用 Cmd/Ctrl + L 打开聊天面板
2. 点击「Spec」按钮
3. 输入你的需求内容

# 实际输入示例
"我想实现一个电商网站的购物车功能，
需要包含以下几点：
- 添加/删除商品
- 修改商品数量
- 检查库存
- 自动计算总金额
- 支持优惠券
- 运费计算"

# Kiro 自动生成的内容结构如下
.kiro/specs/shopping-cart/
├── requirements.md  # 详细的需求定义
├── design.md        # 技术设计文档
└── tasks.md         # 实现任务清单

# 名称：auto-format-on-save
# 说明：在保存文件时自动格式化代码并整理 import 语句

Trigger: File Save
Target: "**/*.{js,ts,jsx,tsx}"
Instructions: |
  每当保存文件时，依次执行以下操作：

  1. 使用 ESLint 检查问题  
     - 能自动修复的部分直接修复  
     - 无法自动修复的问题列出清单  

  2. 使用 Prettier 格式化代码  
     - 优先使用项目中的 .prettierrc 配置  
     - 如果没有则使用默认配置  

  3. 整理 import 语句  
     - 删除未使用的 import  
     - 调整 import 顺序（外部 → 内部 → 相对路径）  
     - 合并重复的 import  

  4. 检查 console.log  
     - 如果在正式代码中检测到 console.log，发出警告  
     - 如果是调试用途，建议加上 `/* debug */` 注释说明

# 名称：react-component-scaffold
# 说明：在创建新的 React 组件时，自动生成所需的相关文件

Trigger: File Create
Target: "src/components/**/*.tsx"
Instructions: |
  当你新建一个 React 组件时，将自动执行以下操作：

  1. 生成组件的基础结构代码
     ```typescript
     import React from 'react'
     import styles from './ComponentName.module.css'
     
     interface ComponentNameProps {
       // TODO: 定义组件的 props
     }
     
     export const ComponentName: React.FC<ComponentNameProps> = (props) => {
       return (
         <div className={styles.container}>
           {/* TODO: 组件实现 */}
         </div>
       )
     }
     ```

  2. 创建对应的测试文件  
     - 在同一目录下生成 ComponentName.test.tsx  
     - 包含基础的渲染测试用例

  3. 创建 Storybook 的 story 文件  
     - 生成 ComponentName.stories.tsx  
     - 包含基础的组件展示 story

  4. 创建 CSS 模块样式文件  
     - 生成 ComponentName.module.css  
     - 包含基础样式定义

  5. 自动向 index.ts 添加导出语句

# 名称：security-scanner
# 说明：检查代码中是否包含 API 密钥或其他敏感信息

Trigger: File Save
Target: "**/*"
Instructions: |
  扫描文件内容，检测以下类型的敏感信息：

  1. 硬编码的认证信息  
     - API 密钥（如 AWS、Google、OpenAI 等）  
     - 密码  
     - 私钥  
     - 数据库连接字符串  

  2. 如果发现敏感信息，执行以下处理：  
     - 高亮显示包含问题的代码行  
     - 建议将敏感信息移至环境变量  
     - 给出添加到 .env 文件的示例  
     - 检查 .gitignore 中是否已包含 .env 文件  

  3. 私有 URL 检查  
     - 内部 API 端点  
     - 开发环境用的 URL  
     - 同样建议将其环境变量化  

  4. 提交前最终检查  
     - 通过 git diff 检查是否有敏感信息将被提交  
     - 如有问题，发出警告并建议中止提交操作

# 名称：i18n-sync
# 说明：保持各语言翻译文件的内容同步

Trigger: File Save
Target: "src/locales/ja/*.json"
Instructions: |
  当日语语言文件被更新时，执行以下操作：

  1. 检测变更内容  
     - 新增的 key  
     - 被修改的 key  
     - 被删除的 key  

  2. 检查其他语言文件  
     - src/locales/en/*.json（英文）  
     - src/locales/zh/*.json（中文）  
     - 其他支持语言  

  3. 执行同步操作  
     - 对新增的 key，添加内容为 "TODO: 需要翻译"  
     - 对修改的 key，添加前缀 "REVIEW: 需要全文翻译内容"  
     - 被删除的 key，从其他语言文件中一并删除  

  4. 生成翻译状态报告  
     - 列出所有待翻译项  
     - 显示各语言的翻译完成度  
     - 输出到 translation-status.md 文件中

# 名称：test-generator
# 说明：在实现文件修改时自动更新或生成对应的测试文件

Trigger: File Save
Target: "src/**/*.{ts,tsx}"
Exclude: "**/*.test.*"
Instructions: |
  当保存实现文件时，自动执行以下操作：

  1. 分析变更内容  
     - 新增的函数  
     - 修改后的函数签名  
     - 新增的类  

  2. 检查对应的测试文件  
     - 如果不存在，则自动创建  
     - 命名格式为：文件名.test.ts(x)  

  3. 生成或更新测试用例  
     - 正常流程（happy path）测试  
     - 异常处理测试  
     - 边界条件（edge case）测试  
     - 如需 mock，会自动合理配置  

  4. 检查测试覆盖率  
     - 确保新代码已被测试覆盖  
     - 避免整体覆盖率下降  
     - 目标保持在 80% 以上  

  5. 执行测试  
     - 验证自动生成的测试是否通过  
     - 如有失败，提供修复建议

// 1. React 相关
import React, { useState } from 'react'

// 2. 外部库
import { useRouter } from 'next/navigation'
import axios from 'axios'

// 3. 内部路径别名
import { Button } from '@/components/ui'
import { formatPrice } from '@/lib/utils'

// 4. 相对路径
import { ProductType } from './types'

// 5. 样式文件
import styles from './Product.module.css'

{
  "success": false,
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "输入值不合法",
    "details": [
      {
        "field": "email",
        "message": "请输入有效的邮箱地址"
      }
    ]
  },
  "meta": {
    "timestamp": "2025-01-20T10:00:00Z",
    "requestId": "uuid-here"
  }
}

{
  "sub": "user-id",
  "email": "user@example.com",
  "roles": ["user", "admin"],
  "iat": 1234567890,
  "exp": 1234567890
}

{
  "data": [...],
  "pagination": {
    "page": 1,
    "limit": 20,
    "total": 100,
    "totalPages": 5,
    "hasNext": true,
    "hasPrev": false
  }
}

有了这份 Steering 文件，AI 在生成 API 端点时会自动遵循这些规则，帮你写出合规的代码。
定义测试策略示例

# .kiro/steering/testing-strategy.md

---
inclusion: fileMatch
fileMatchPattern: "**/*.test.{ts,tsx}"
---

# 测试策略

## 测试类型与目标

### 单元测试
- 覆盖率目标：80%以上
- 对象：纯函数、自定义 Hook、工具函数
- 工具：Jest

### 集成测试
- 对象：API 端点、数据库操作
- 工具：Jest + Supertest
- 数据库：测试用 Docker 容器

### 端到端测试
- 对象：主要用户流程
- 工具：Playwright
- 执行环境：CI/CD 流水线

## 测试写法

### 测试文件放置

src/
├── components/
│   ├── Button.tsx
│   └── Button.test.tsx  # 与组件放在同目录

### 测试结构（AAA 原则）

```typescript
describe('功能名', () => {
  it('期望行为', () => {
    // Arrange（准备）
    const input = 'test'

    // Act（执行）
    const result = functionToTest(input)

    // Assert（断言）
    expect(result).toBe('expected')
  })
})

// 追加到 .kiro/settings/mcp.json

{
  "mcpServers": {
    "aws-docs": {
      "command": "uvx",
      "args": ["awslabs.aws-documentation-mcp-server@latest"],
      "env": {
        "FASTMCP_LOG_LEVEL": "ERROR"  // 日志级别设为最小，减少输出
      },
      "disabled": false,
      "autoApprove": [
        "mcp_aws_docs_search_documentation",  // 搜索请求自动批准
        "mcp_aws_docs_read_documentation"     // 读取请求自动批准
      ]
    }
  }
}

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "$GITHUB_TOKEN"
      },
      "timeout": 10000,  // 10秒超时
      "trust": false     // 运行前需确认
    }
  }
}

{
  "mcpServers": {
    "web-search": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-bravesearch"],
      "env": {
        "BRAVE_API_KEY": "$BRAVE_API_KEY"
      },
      "autoApprove": ["brave_search"]  // 搜索自动执行
    }
  }
}

// my-company-mcp-server.js

import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

const server = new Server(
  {
    name: 'my-company-tools',
    version: '1.0.0',
  },
  {
    capabilities: {
      tools: {},
    },
  }
);

// 工具定义
server.setRequestHandler('tools/list', async () => ({
  tools: [
    {
      name: 'search_company_docs',
      description: '搜索公司内部文档',
      inputSchema: {
        type: 'object',
        properties: {
          query: {
            type: 'string',
            description: '搜索关键词'
          },
          department: {
            type: 'string',
            enum: ['engineering', 'design', 'marketing'],
            description: '按部门筛选'
          }
        },
        required: ['query']
      }
    },
    {
      name: 'get_employee_info',
      description: '获取员工信息',
      inputSchema: {
        type: 'object',
        properties: {
          email: {
            type: 'string',
            description: '员工邮箱地址'
          }
        },
        required: ['email']
      }
    }
  ]
}));

// 工具实现
server.setRequestHandler('tools/call', async (request) => {
  const { name, arguments: args } = request.params;

  switch (name) {
    case 'search_company_docs':
      // 实际搜索处理
      const results = await searchInternalDocs(args.query, args.department);
      return {
        content: [{
          type: 'text',
          text: `搜索结果:\n${results.map(r => `- ${r.title}: ${r.url}`).join('\n')}`
        }]
      };

    case 'get_employee_info':
      // 获取员工信息
      const info = await getEmployeeInfo(args.email);
      return {
        content: [{
          type: 'text',
          text: `员工信息:\n姓名: ${info.name}\n部门: ${info.department}\n内线: ${info.extension}`
        }]
      };

    default:
      throw new Error(`未知的工具名称: ${name}`);
  }
});

// 启动服务器
const transport = new StdioServerTransport();
await server.connect(transport);

{
  "mcpServers":
    {
      "company-tools":
        {
          "command": "node",
          "args": ["./mcp-servers/my-company-mcp-server.js"],
          "cwd": ".",
          "env": { "COMPANY_API_KEY": "$COMPANY_API_KEY" },
        },
    },
}

# 1. 查看 MCP 日志
打开 Kiro 面板 → 输出（Output）→ "Kiro - MCP Logs"

# 2. 检查服务器状态
在聊天窗口执行 `/mcp`

# 3. 手动运行服务器进行测试
node ./mcp-servers/my-server.js

# 4. 检查环境变量
echo $GITHUB_TOKEN
echo $BRAVE_API_KEY

# 5. 增加超时时间
"timeout": 30000  # 设置为 30 秒

# 适合人群
- 重视开发速度
- 信任 AI 的判断
- 在本地开发环境工作

# 工作机制
- 自动执行文件的创建、编辑和删除
- 自动执行命令（仅限信任列表内）
- 随时可以通过“Stop”命令中断

# 使用示例
"帮我实现用户认证功能"
→ 自动创建所有必要文件并完成实现

ls      # 列出目录内容
cat     # 显示文件内容
echo    # 输出字符串
pwd     # 显示当前目录
which   # 查找命令路径
head    # 查看文件开头部分
tail    # 查看文件结尾部分
find    # 文件搜索
grep    # 字符串搜索

// Settings → Kiro Agent: Trusted Commands
[
  "npm test",
  "npm run build",
  "git status",
  "git diff",
  "docker ps",
  "docker-compose up",
  "jest",
  "prettier --write"
]

# 这些命令绝对不能添加！
rm -rf
sudo
chmod 777
curl | sh
eval

# 方法1：通过设置界面
Settings → Application → Telemetry and Content → 关闭（Disabled）

# 方法2：通过 settings.json 配置
```json
{
  "telemetry": {
    "enabled": false
  },
  "usageStatisticsEnabled": false
}

# 全局设置（适用于所有项目）
~/.kiro/settings.json

# 项目专属设置（优先级更高）
.kiro/settings.json

# 推荐加入 .gitignore
.kiro/settings.json  # 如果包含 API 密钥等敏感信息

# ❌ 不好的例子：在 settings.json 中直接写入
{
  "mcpServers": {
    "github": {
      "env": {
        "GITHUB_TOKEN": "ghp_actualTokenHere"  # 危险！
      }
    }
  }
}

# ✅ 好的例子：引用环境变量
{
  "mcpServers": {
    "github": {
      "env": {
        "GITHUB_TOKEN": "$GITHUB_TOKEN"  # 从环境变量读取
      }
    }
  }
}

# 添加到 .zshrc 或 .bashrc
export GITHUB_TOKEN="ghp_xxxx"
export BRAVE_API_KEY="BSA_xxxx"

# 生产项目
.kiro/settings.json
{
  "sandbox": "docker",        # 启用沙箱环境
  "autoAccept": false,        # 禁用自动批准
  "excludeTools": ["run_shell_command"]  # 禁止执行 Shell 命令
}

# 开发项目
.kiro/settings.json
{
  "sandbox": false,           # 禁用沙箱环境（提升速度）
  "autoAccept": false,        # 依然禁用自动批准
  "coreTools": ["all"]        # 允许使用所有工具
}

# .gitignore
.env
.env.local
.kiro/settings.json    # 可能包含 API 密钥
.kiro/cache/           # 缓存文件
*.log                  # 日志文件

# 但是以下内容需要提交
.kiro/steering/        # 项目知识共享
.kiro/hooks/           # Hook 配置共享
.kiro/specs/           # 规格说明共享

# 错误信息
"Kiro 已损坏，无法打开。你应该将它移到废纸篓。"

# 原因
macOS 的 Gatekeeper 误报导致

# 解决方法（按简单顺序尝试）

# 方法1：通过系统设置授权
1. 打开「系统设置」→「隐私与安全性」
2. 在提示「无法确认开发者身份的 Kiro」旁点击「仍然允许」
3. 重新打开 Kiro

# 方法2：移动文件重置
1. 将 Kiro.app 拖到桌面
2. 再从桌面拖回「应用程序」文件夹
3. 尝试打开

# 方法3：通过命令行删除属性
```bash
sudo xattr -d com.apple.quarantine /Applications/Kiro.app

# 错误信息
"Shell 集成不可用"

# 尝试自动修复
1. 按 Cmd/Ctrl+Shift+P 打开命令面板
2. 执行 "Kiro: Enable Shell Integration"
3. 重启 Kiro

# 手动修复方法

# Zsh（macOS 默认）
echo '[[ "$TERM_PROGRAM" == "kiro" ]] && . "$(kiro --locate-shell-integration-path zsh)"' >> ~/.zshrc
source ~/.zshrc

# Bash
echo '[[ "$TERM_PROGRAM" == "kiro" ]] && . "$(kiro --locate-shell-integration-path bash)"' >> ~/.bashrc
source ~/.bashrc

# Fish
echo 'string match -q "$TERM_PROGRAM" "kiro"' >> ~/.config/fish/config.fish
echo 'and . (kiro --locate-shell-integration-path fish)' >> ~/.config/fish/config.fis

# PowerShell（Windows）
Add-Content $PROFILE 'if ($env:TERM_PROGRAM -eq "kiro") { . "$(kiro --locate-shell-integration-path pwsh)" }'

# 错误信息
"登录时发生错误"

# 原因与解决方法

# 原因1：没有 Q Developer Pro 订阅
→ 请使用 Builder ID 或社交账号登录

# 原因2：区域设置错误
→ 默认区域为 us-east-1，请确认公司使用的区域

# 原因3：Start URL 错误
→ 请联系 IT 部门确认正确的 URL
   示例：https://your-company.awsapps.com/start

# 常见错误及解决方法

# Error: Command not found
→ 未安装必要的工具

# 针对 AWS Docs Server
curl -LsSf https://astral.sh/uv/install.sh | sh
uv python install 3.10
# 针对 Error: Timeout
→ 增加超时时间
"timeout": 30000  # 30秒

# 针对 Error: Permission denied
→ 检查 API 密钥和认证信息
echo $GITHUB_TOKEN
echo $BRAVE_API_KEY

#调试方法
1.打开 Output → "Kiro - MCP Logs" 查看日志
2.通过 /mcp 命令检查服务器状态
3.手动执行服务器命令进行测试

# 确认 .gitignore 的影响
cat .gitignore

# 确认 Kiro 的配置
{
  "fileFiltering": {
    "respectGitIgnore": false  # 临时禁用
  }
}

# 对于大文件的情况
"@large-file.log:1000-2000"  # 指定行号范围部分读取

# 启用 Kiro 日志
kiro --enable-logging

# 打开开发者工具
Help → Toggle Developer Tools → Console

# 查看当前配置
cat ~/.kiro/settings.json
cat .kiro/settings.json

# 查看内存（上下文）内容
/memory show

# 手动测试 MCP 服务器
# 以 GitHub 服务器为例
npx @modelcontextprotocol/server-github

# 检查网络问题
curl -I https://api.github.com
curl -I https://kiro.dev

# 1. 在项目目录打开 Kiro
cd my-awesome-project
kiro .

# 2. 自动生成基础 Steering 文件
打开 Kiro 面板 → 选择 "Generate Steering Docs"
# 会自动生成 product.md、tech.md、structure.md

# 3. 添加项目特有的配置
cat > .kiro/steering/conventions.md << 'EOF'
# 开发规范

## 提交信息规范
- feat: 新功能
- fix: Bug 修复
- docs: 文档变更
- style: 代码格式调整
- refactor: 重构
- test: 测试相关
- chore: 其他杂项

## 分支策略
- main: 生产环境
- develop: 开发环境
- feature/*: 新功能开发
- hotfix/*: 紧急修复

## 代码审查标准
- 测试通过
- 覆盖率 80% 以上
- 无 ESLint 错误
- 文档已更新
EOF

# 4. 设置必备 Hooks
# 保存时自动格式化
Hooks → + → 选择 "保存文件时自动执行 ESLint 和 Prettier"

# 提交前安全扫描
Hooks → + → 选择 "git commit 前扫描敏感信息"

# 5. 配置 MCP 服务器
cat > .kiro/settings/mcp.json << 'EOF'
{
  "mcpServers": {
    "web-search": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-bravesearch"],
      "env": {
        "BRAVE_API_KEY": "$BRAVE_API_KEY"
      }
    }
  }
}
EOF

# 6. 设置团队共享的 .gitignore
cat >> .gitignore << 'EOF'
# Kiro 配置文件
.kiro/settings.json
.kiro/cache/
.kiro/logs/

# 但以下内容需要共享
!.kiro/steering/
!.kiro/hooks/
!.kiro/specs/
EOF

# 1. 从创建项目开始
mkdir my-saas-app && cd my-saas-app
kiro .

# 2. 将需求转化为 Spec
按 Cmd/Ctrl+L 打开聊天，输入：
"SaaS 应用开发需求。
功能：
- 用户认证（邮箱/密码、Google OAuth）
- 订阅管理（Stripe）
- 仪表盘
- API（REST + GraphQL）
技术栈：
- Next.js 14（App Router）
- TypeScript
- Prisma + PostgreSQL
- TailwindCSS"

# 3. 执行 Spec
从上到下执行生成的任务
点击每个任务，AI 会帮你实现

# 4. 启动开发服务器
```bash
npm install
npm run dev

# 5. 通过 Spec 添加新功能
"我要添加邮件通知功能。
- 用户注册时发送欢迎邮件
- 密码重置邮件
- 账单发送
使用 SendGrid 服务"

# 将 jQuery 时代的代码迁移到 React 的示例

# 1. 现状分析
"请分析 @src/legacy/ 目录下的代码，
制定迁移到 React 的计划"

# 2. 制定分阶段迁移的 Spec
"传统代码分阶段迁移计划：
Phase 1: 迁移共通组件
Phase 2: 按页面单元迁移
Phase 3: 状态管理整合
Phase 4: 路由迁移"

# 3. 自动转换 Hook 设置
Trigger: Manual
Name: "jQuery to React Converter"
Instructions: |
  分析选中的 jQuery 代码：
  1. 生成等效的 React 组件
  2. 将事件处理器转换为 React 事件
  3. 将 DOM 操作转换为 state/props
  4. 将动画转换为 CSS 或 Framer Motion

# 4. 添加测试
"@src/components/
为所有组件添加测试。
使用 React Testing Library，
测试用户交互"

# 与 AI 一起创建 GitHub Actions 配置

# 1. 创建基础工作流
创建 `.github/workflows/ci.yml`，在推送时执行：
- 代码检查（ESLint、TypeScript）
- 运行测试
- 验证构建
- 生成覆盖率报告

# 2. 部署工作流
创建 `.github/workflows/deploy.yml`，在合并到 main 分支时执行：
- 构建项目
- 部署到 Vercel
- 发送 Slack 通知

# 3. 监控工作流的 Hook
Trigger: File Save
Target: ".github/workflows/*.yml"
Instructions: |
  审查 GitHub Actions 配置：
  1. 语法错误检查
  2. 检查 Secret 的正确使用
  3. 优化并行执行建议
  4. 提议缓存使用

# 1. 现状分析
"请分析 @src/ 目录下项目的性能瓶颈"

# 2. 优化 Spec 制定
"性能优化任务：
- 使用 React.memo 防止重复渲染
- 图片优化与懒加载
- 减少打包体积
- 优化数据库查询"

# 3. 自动优化 Hook
Trigger: File Save
Target: "src/components/**/*.tsx"
Instructions: |
  进行性能分析：
  1. 检测不必要的重复渲染
  2. 提议使用 useCallback 和 useMemo
  3. 检测高开销计算并提出优化方案
  4. 建议使用动态 import

# 4. 监控设置
"在 Datadog 中配置性能监控，
追踪 Core Web Vitals 指标"

# 第一步：安装（5分钟）
从 https://kiro.dev 下载并安装

# 第二步：打开第一个项目（10分钟）
打开现有项目，生成 Steering 文件

# 第三步：与 AI 对话（无限可能）
“帮我提出改进这个项目的建议”