【Kiro】すぐ使えるTips、全部教えます！

【Kiro】 すぐ使えるTips、全部教えます！ 発のAI IDE「Kiro」を すぐ・いい感じ に使いこなすための実践ガイド AWS

Kiro Tips 自己紹介 もっくま アジャイル・スクラムの伴走支援 ▸ 新規プロダクト開発 Xで "もっくま" フォローいただけると嬉しいで す ▸ 2

• https://x.com/mot0aki

Kiro Tips Kiro AWS とは？ が提供する AI エージェント機能付きの統合開発環境（IDE） 3

Kiro Tips Kiro を すぐ！ いい感じに！ 導入したい！ 4

Kiro Tips 今日紹介する 5 つの機能 ひとこと 1 .kiroignore 機密ファイルを除外 2 Steering エージェントの振る舞いを制御 3 MCP 外部ツール・データソースと接続 4 Powers 必要なツールをオンデマンド読込 5 Hooks イベント駆動で自動処理 # 機能 5

Kiro Tips 1. .kiroignore エージェントに読ませたくないファイルを指定 6

Kiro Tips .kiroignore .gitignore とは と 同じ記法 で、Kiro のエージェントから除外したいファイルを指定でき ます。 ▸ 認証情報・秘密鍵・機密データ ▸ ビルド成果物など不要なコンテキスト 公式ドキュメント 7

• https://kiro.dev/docs/editor/kiroignore/

Kiro Tips .kiroignore — すぐやること プロジェクトルートに .kiroignore を作成 2. まずはこれを追加: 1. .env / *.pem / secrets/ 3. 設定で 「Agent Ignore Files」 を検索し [".kiroignore"] を追加 8

Kiro Tips .kiroignore — サンプル # Secrets and credentials .env .env.* !.env.example *.pem *.key # Private directories secrets/ private/ # Dependencies node_modules/ # Build outputs dist/ dist-ssr/ # Logs logs/ *.log npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* # OS and editor files .DS_Store *.local # Git directory .git/ 9

Kiro Tips 2. Steering エージェントの行動指針をプロジェクトに定義 10

Kiro Tips Steering とは のエージェントを 制御 するためのツール。 要するに AGENTS.md （ AGENTS.md もちゃんと読んでくれます） Kiro 11

Kiro Tips 作成が推奨される 3 つのファイル 1. product.md 製品の目的・ターゲットユーザー・主要機能・ビジネス目標を定義。 Kiro が技術判断の 「なぜ」 を理解し、製品ゴールに沿った提案をしやすくなる。 2. tech.md フレームワーク・ライブラリ・開発ツール・技術制約を記載。 実装提案が 自チームのスタック を優先するようになる。 3. structure.md ファイル構成・命名規則・import ルール・アーキテクチャ方針を整理。 生成コードが 既存コードベースに自然に馴染む。 12

Kiro Tips Steering ファイルの作成 書くのが難しそう？ 大丈夫、Kiro が書いてくれます！ 詳しくは公式ドキュメント: https://kiro.dev/docs/steering/#foundational-steering-files 13

• https://kiro.dev/docs/steering/#foundational-steering-files

Kiro Tips 3. MCP AI モデルと外部ツールを安全に接続 14

Kiro Tips （ MCP Model Context Protocol ）とは モデルが外部のツールやデータソースに 安全に接続 するためのプロトコル。 Kiro では MCP 連携により、以下をエージェントのコンテキストに取り込めます: ▸ ブラウザ操作 ▸ データベース ▸ APIコール ▸ ファイルシステム → より広い範囲のタスクを自動実行 AI 15

Kiro Tips 導入した MCP サーバー MCP サーバー Playwright MCP awslabs.aws-api-mcpserver chrome-devtools awslabs.aws-documentationmcp-server awslabs.aws-knowledge-mcpserver 用途 実際のブラウザを使って動作確認を自動化できる AWS のAPIを呼び出すことができる。設定内容を 確認したりできる。 DevTools 連携 AWS ドキュメント参照 AWS ナレッジ検索 16

Kiro Tips 4. Powers 必要なツールをオンデマンドで読み込む 17

Kiro Tips Powers とは タスクやキーワードに応じて 必要なツールだけをそのときだけ読み込む 仕組み。 従来 Powers 全ツール常時読み込み 必要なときだけアクティブ化 コンテキスト消費大 コンテキスト消費を抑制 → レスポンスと品質を両立！ 18

Kiro Tips 良かった Powers 1. Build applications with Aurora PostgreSQL の中へのアクセスが 自然言語 でできる ▸ SQLもいい感じに作ってくれる ▸ ちゃちゃっと確認したいときに便利 ▸ Aurora 2. Design to Code with Figma をそのままコードにできる！ ▸ 基本どのフロントエンドフレームワークにも 対応。Setup も簡単！ ▸ Figma 19

Kiro Tips Powers: Design to Code with Figma の使い方 生成したい UI 部品を のURLをコピペして、Kiroに 生成を依頼 するだけ！ → 結構な精度で出るので CSS 苦手な人はやってみよう！ SVG なども自動で fetch してくれます。 20

Kiro Tips 5. Hooks イベントをトリガーに処理を自動実行 21

Kiro Tips Hooks とは ファイル保存・作成・削除やエージェント完了など、特定のイベントをトリガー に定義 したエージェント処理やシェルコマンドを自動実行する仕組み。 ex) ソースコード保存時に、対応するテストを自動生成・更新 する ▸ 手動トリガーで、関数やクラスのドキュメントを自動生成 する ▸ エージェント完了時に、コミット前にセキュリティスキャン する ▸ 22

Kiro Tips 作るのも簡単！ 自然言語で 「こういう Hooks が欲しい！」 と言えば作ってくれます。 23

Kiro Tips 作ってみた Hooks プロンプト変更差分をテキストに記録 する Hooks 2. 変更差分から学習用クイズを生成 する Hooks（新人教育用） 3. ファイル変更時、Playwright MCP で動作確認・モンキーテスト を実施する 1. Hooks※ 24

Kiro Tips Hooks の工夫 — 定期実行されるようにする 自動モンキーテストを修正するたびに実行すると負荷が高すぎるので、以下の方法で定 期的に実行 するようにしています。 実行時刻のタイムスタンプを保存 しておき、 前回実行時刻と比較して 30分以上差分があれば実行 する。 → これは 汎用性が高そうなパターンかも！ 25

Kiro Tips はここから確認・編集できます。 Hooks 26

Kiro Tips コード修正時のモンキーテスト プロンプトサンプル コードが修正されました。以下のQA観点から確認を実施してください： 【実行頻度制御】 1. `.qa/.timestamp` ファイルの確認 - `.qa/.timestamp` ファイルが存在するか確認 - ファイルが存在する場合、記載されている日時情報を読み取る - 現在時刻と比較して30分経過していない場合： → 「QA検証は30分以内に実行済みのためスキップしました」と報告して処理を終了 - 現在時刻と比較して30分以上経過している場合、またはファイルが存在しない場合： → `.qa/.timestamp` ファイルに現在時刻（ISO 8601形式）を書き込んで後続のQA処理を実行※正確な時刻を反映すること。 → `.qa` フォルダが存在しない場合は作成する 【QA検証プロセス】 2. 開発サーバーの確認 - ローカル開発サーバー(http://localhost:5173)が起動しているか確認 - 起動していない場合は `npm run dev` で起動 3. 基本動作確認 - 修正されたファイルの影響範囲を特定 - 関連する機能が正常に動作するか確認 - コンソールエラーがないか確認 4. 主要機能のモンキーテスト（Playwright MCPを使用） QAの目線でAI自身が自律的に以下のテストケースを実施してください： 【XXXXXXXXXXXXXXXXXXXXXX】 - US-001: YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY - US-002: YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY 【CSS・レイアウト確認】 各画面で以下の視覚的な確認を実施： - レイアウト崩れ（要素の重なり、はみ出し、位置ずれ） - テキストの表示（文字切れ、改行位置、フォントサイズ） - ボタン・アイコンの配置（位置、サイズ、間隔） - カード・コンテナの表示（角丸、影、境界線） - アコーディオン・モーダルの開閉時のレイアウト - ホバー・アクティブ状態のスタイル - レスポンシブ対応（画面サイズによる崩れ） - スクロール時の固定要素の表示 【自律的なモンキーテスト】 - その他、ベテランQAの観点で変更対応内容に合わせて流動的に整備したテストケースを考え、実際に動作確認するモンキーテストを実施する。 各テストケースについて： - 実際にブラウザ操作を行って動作確認 - 予期しないエラーや表示崩れがないか確認 - CSS崩れやレイアウト異常がないか視覚的に確認 - コンソールエラーの有無を確認 - 必要に応じてスクリーンショットを撮影して視覚的な問題を記録 - スクリーンショットは `.qa/` フォルダ内に保存すること（例: `.qa/screenshot-{timestamp}.png`） 確認結果を簡潔に報告してください。 27

Kiro Tips そのまま使える公式 Hooks 集: 公式 Hooks 集 28

• https://github.com/awsdataarchitect/kiro-best-practices

Kiro Tips Kiro を使ってみた感想 普通の AI エディタとして 基本的なことはできる ▸ 精度も申し分ない（Anthropicのエージェント） ▸ AWS を使っていれば 導入しやすい(?) ▸ 学習のオプトアウトなど 中央集権的な統制 も取りやすい → まずは Kiro から使い始めてみるのも手かも？ ▸ 29

Kiro Tips Kawaii チュートリアルもあるよ！ Learn by Playing — Kiro 公式ガイド 30

• https://kiro.dev/docs/guides/learn-by-playing/

Kiro Tips 参考リンク ▸ Kiro Best Practices - awsdataarchitect ▸ I Stopped Fighting My AI: How Kiro's Agent Hooks and Steering Files Fixed My Biggest Frustration - Ibrahim Pima ▸ Kiro Documentation

• https://github.com/awsdataarchitect/kiro-best-practices
• https://dev.to/ibrahimpima/i-stopped-fighting-my-ai-how-kiros-agent-hooks-and-steering-files-fixed-my-biggest-frustration-493m
• https://kiro.dev/docs/