Initial commit

2025-11-29 18:28:22 +08:00
commit 0be0ae7ead
28 changed files with 2470 additions and 0 deletions
--- a/skills/high-quality-commit/SKILL.md
+++ b/skills/high-quality-commit/SKILL.md
@@ -0,0 +1,147 @@
+---
+name: high-quality-commit
+description: コード変更を適切なgitコミット戦略でgit commitします。基本的には既存のgitコミットへのsquash戦略を採用し、必要に応じてブランチ全体のgitコミット履歴を再構成します。実装完了時やユーザーがgit commitを依頼した時に使用します。
+---
+
+# High Quality Commit
+
+このスキルは、コード変更を高品質なgitコミットとして記録するための包括的なガイダンスを提供します。
+
+## Instructions
+
+### ステップ1: ブランチとgitコミット履歴の確認
+
+以下のコマンドで現在の状態を確認：
+
+```bash
+git status
+git log --oneline --graph origin/main..HEAD
+```
+
+確認事項：
+- 現在のブランチ名
+- mainブランチから何gitコミット進んでいるか
+- 各gitコミットの内容と粒度
+
+### ステップ2: gitコミット戦略の判断
+
+以下の基準でgitコミット戦略を選択：
+
+#### 戦略A: Squash（基本戦略）
+
+以下の条件を満たす場合、既存のgitコミットにsquashします：
+
+- ブランチに既にgitコミットが存在する
+- 変更内容が既存のgitコミットと同じテーマ・機能に関連している
+- gitコミットを分ける合理的な理由がない
+
+**実行方法：**
+
+```bash
+git add -A
+git commit --amend
+```
+
+gitコミットメッセージを適切に更新してください。
+
+#### 戦略B: 新規gitコミット
+
+以下の場合は新規gitコミットを作成：
+
+- ブランチに初めてのgitコミット
+- 既存のgitコミットとは異なる独立した変更
+- gitコミットを分けることで履歴がより理解しやすくなる
+
+**実行方法：**
+
+```bash
+git add -A
+git commit
+```
+
+#### 戦略C: Interactive Rebase（gitコミット再構成）
+
+以下の場合はブランチ全体のgitコミットを再構成：
+
+- 複数の小さなgitコミットを論理的なまとまりに整理したい
+- gitコミットの順序を変更したい
+- 不要なgitコミットを削除したい
+- gitコミット履歴を意味のある単位に再編成したい
+
+**実行方法：**
+
+```bash
+git rebase -i origin/main
+```
+
+エディタで以下の操作を実行：
+- `pick`: gitコミットをそのまま維持
+- `squash`または`s`: 前のgitコミットと統合
+- `reword`または`r`: gitコミットメッセージを変更
+- 行の順序を変更してgitコミット順を変更
+
+### ステップ3: gitコミットメッセージのガイドライン
+
+gitコミットメッセージは以下の形式で記述：
+
+```
+<type>: <subject>
+
+<body>
+
+<footer>
+```
+
+**Type:**
+- `feat`: 新機能
+- `fix`: バグ修正
+- `refactor`: リファクタリング
+- `test`: テスト追加・修正
+- `docs`: ドキュメント変更
+- `chore`: ビルドプロセスやツールの変更
+
+**Subject:**
+- 50文字以内
+- 命令形で記述（例: "add"ではなく"Add"）
+- 末尾にピリオドを付けない
+
+**Body（オプション）:**
+- 変更の理由と背景を説明
+- 何を変更したかではなく、なぜ変更したかを記述
+- 72文字で折り返す
+
+**Footer（オプション）:**
+- Issue番号への参照（例: `Closes #123`）
+- Breaking changesの記述
+
+### ステップ4: git commit後の確認
+
+git commit後、以下を確認：
+
+```bash
+git log -1 --stat
+git status
+```
+
+- gitコミットが正しく作成されたか
+- 意図したファイルがすべて含まれているか
+- gitコミットメッセージが適切か
+
+## 重要な注意事項
+
+1. **mainブランチでは実行しない**: mainブランチで直接git commitしないでください
+2. **コメントは残さない**: コード内の説明コメントは削除してください
+3. **原子的なgitコミット**: 各gitコミットは独立して意味を持つようにしてください
+4. **一貫性**: プロジェクトの既存のgitコミットスタイルに従ってください
+
+## 戦略選択のフローチャート
+
+```
+ブランチにgitコミットがある？
+  ├─ No → 新規gitコミット作成
+  └─ Yes → 変更は既存のgitコミットと同じテーマ？
+      ├─ Yes → Squash（git commit --amend）
+      └─ No → gitコミットを分ける合理性がある？
+          ├─ Yes → 新規gitコミット作成
+          └─ 履歴を整理したい → Interactive Rebase
+```
--- a/skills/high-quality-commit/examples.md
+++ b/skills/high-quality-commit/examples.md
@@ -0,0 +1,350 @@
+# High Quality Commit - Examples
+
+このドキュメントでは、実際の開発シナリオでの具体的な使用例を示します。
+
+## 例1: 初回実装でのgitコミット
+
+### シナリオ
+
+新機能「ユーザープロフィール編集」を実装し、初めてgit commitする
+
+### 手順
+
+```bash
+# 1. ブランチ状況確認
+git status
+# On branch feature/user-profile-edit
+# Changes not staged for commit:
+#   modified:   src/components/UserProfile.tsx
+#   modified:   src/api/user.ts
+#   new file:   src/components/ProfileEditForm.tsx
+
+git log --oneline --graph origin/main..HEAD
+# (no commits yet on this branch)
+
+# 2. 戦略判断: ブランチに初めてのgitコミット → 新規gitコミット
+
+# 3. git commit実行
+git add -A
+git commit
+```
+
+### gitコミットメッセージ
+
+```
+feat: add user profile editing feature
+
+Implement profile editing functionality:
+- Add ProfileEditForm component with validation
+- Add PUT /api/users/:id endpoint
+- Integrate form with existing UserProfile component
+
+Users can now update their display name, email, and bio.
+
+Closes #234
+```
+
+## 例2: レビュー指摘への対応（Squash）
+
+### シナリオ
+
+PR作成後、レビューで「バリデーションロジックを改善してください」という指摘を受けた
+
+### 手順
+
+```bash
+# 1. 現在のコミット確認
+git log --oneline --graph origin/main..HEAD
+# * a1b2c3d feat: add user profile editing feature
+
+# 2. 指摘箇所を修正
+# src/components/ProfileEditForm.tsx を編集...
+
+# 3. 戦略判断: 既存コミットと同じテーマ → Squash
+
+# 4. 既存コミットに統合
+git add -A
+git commit --amend
+```
+
+### 更新されたコミットメッセージ
+
+```
+feat: add user profile editing feature
+
+Implement profile editing functionality:
+- Add ProfileEditForm component with enhanced validation
+- Add PUT /api/users/:id endpoint
+- Integrate form with existing UserProfile component
+
+Validation improvements:
+- Email format validation with regex
+- Display name length constraints (3-50 chars)
+- Real-time validation feedback
+
+Users can now update their display name, email, and bio.
+
+Closes #234
+```
+
+```bash
+# 6. 強制push（PRを更新）
+git push --force-with-lease
+```
+
+## 例3: 独立した機能追加（新規コミット）
+
+### シナリオ
+
+ユーザープロフィール編集機能の実装後、別途「プロフィール画像アップロード」機能を追加することになった
+
+### 手順
+
+```bash
+# 1. 現在のコミット確認
+git log --oneline --graph origin/main..HEAD
+# * a1b2c3d feat: add user profile editing feature
+
+# 2. プロフィール画像アップロード機能を実装
+# ...
+
+# 3. 戦略判断: 既存コミットとは独立した機能 → 新規コミット
+
+# 4. 新規コミット作成
+git add -A
+git commit
+```
+
+### gitコミットメッセージ
+
+```
+feat: add profile picture upload
+
+Implement profile picture upload functionality:
+- Add image upload component with drag-and-drop
+- Add POST /api/users/:id/avatar endpoint
+- Add image cropping and preview
+- Store images in cloud storage
+
+Supports JPEG, PNG, and WebP formats up to 5MB.
+
+Closes #235
+```
+
+```bash
+# 5. 結果確認
+git log --oneline --graph origin/main..HEAD
+# * e4f5g6h feat: add profile picture upload
+# * a1b2c3d feat: add user profile editing feature
+```
+
+## 例4: WIPコミットの整理（Interactive Rebase）
+
+### シナリオ
+
+開発中に多数の小さなコミットを作成してしまった。PR作成前に整理したい。
+
+### 現状のコミット履歴
+
+```bash
+git log --oneline --graph origin/main..HEAD
+# * h7i8j9k WIP: fix typo
+# * e4f5g6h WIP: add validation
+# * b2c3d4e feat: add profile form
+# * y9z0a1b WIP: experiment with layout
+# * v6w7x8y feat: add user model
+# * s3t4u5v fix: import statement
+```
+
+### 手順
+
+```bash
+# 1. Interactive rebaseを開始
+git rebase -i origin/main
+
+# 2. エディタが開く
+```
+
+### エディタでの編集
+
+変更前：
+```
+pick v6w7x8y feat: add user model
+pick s3t4u5v fix: import statement
+pick y9z0a1b WIP: experiment with layout
+pick b2c3d4e feat: add profile form
+pick e4f5g6h WIP: add validation
+pick h7i8j9k WIP: fix typo
+```
+
+変更後：
+```
+pick v6w7x8y feat: add user model
+squash s3t4u5v fix: import statement
+drop y9z0a1b WIP: experiment with layout
+pick b2c3d4e feat: add profile form
+squash e4f5g6h WIP: add validation
+squash h7i8j9k WIP: fix typo
+```
+
+### 保存後の編集
+
+2つのコミットメッセージを編集：
+
+**1つ目のコミット：**
+```
+feat: add user profile model
+
+Define user profile data structure with TypeScript:
+- User interface with profile fields
+- Profile validation schema
+- Type-safe profile operations
+
+Includes display name, email, bio, and avatar URL.
+```
+
+**2つ目のコミット：**
+```
+feat: add profile editing form
+
+Implement profile editing UI component:
+- Form layout with Material-UI
+- Real-time field validation
+- Success/error feedback
+
+Users can update their profile information with immediate validation.
+```
+
+### 結果確認
+
+```bash
+git log --oneline --graph origin/main..HEAD
+# * m1n2o3p feat: add profile editing form
+# * j4k5l6m feat: add user profile model
+
+# クリーンな履歴に整理された！
+```
+
+## 例5: 複数機能の段階的実装
+
+### シナリオ
+
+大きな機能「認証システム」を、Model → API → UIの順で段階的に実装
+
+### 手順
+
+#### ステップ1: モデル実装
+
+```bash
+# 実装...
+
+git add src/models/
+git commit -m "feat: add authentication model
+
+Define authentication data structures:
+- User model with credentials
+- JWT token interface
+- Session management types
+
+Provides type-safe authentication operations."
+
+git push
+```
+
+#### ステップ2: API実装
+
+```bash
+# 実装...
+
+git add src/api/auth.ts
+git commit -m "feat: add authentication API endpoints
+
+Implement authentication REST API:
+- POST /api/auth/login - User login
+- POST /api/auth/logout - User logout
+- POST /api/auth/refresh - Token refresh
+- GET /api/auth/me - Get current user
+
+Uses JWT for secure token-based authentication."
+
+git push
+```
+
+#### ステップ3: UI実装
+
+```bash
+# 実装...
+
+git add src/components/auth/
+git commit -m "feat: add authentication UI components
+
+Implement authentication user interface:
+- LoginForm component with validation
+- Protected route wrapper
+- Session persistence
+- Auto token refresh
+
+Provides complete authentication UX."
+
+git push
+```
+
+### 最終的な履歴
+
+```bash
+git log --oneline --graph origin/main..HEAD
+# * q5r6s7t feat: add authentication UI components
+# * n2o3p4q feat: add authentication API endpoints
+# * k8l9m0n feat: add authentication model
+
+# 各コミットが独立してレビュー可能
+# 各コミットが単独でビルド・テスト可能
+```
+
+## 例6: バグ修正とテスト追加
+
+### シナリオ
+
+バグを発見し、修正とテストを同時に実施
+
+### 手順
+
+```bash
+# 1. 現在の作業を確認
+git status
+# On branch fix/validation-bug
+
+# 2. バグ修正とテスト追加
+# src/utils/validation.ts を修正
+# src/utils/validation.test.ts を追加
+
+# 3. コミット
+git add -A
+git commit
+```
+
+### gitコミットメッセージ
+
+```
+fix: correct email validation regex
+
+Fix email validation to properly handle plus signs (+) in addresses.
+Previously, emails like "user+tag@example.com" were incorrectly rejected.
+
+Changes:
+- Update regex pattern to include + character
+- Add comprehensive test cases for edge cases
+
+Closes #456
+```
+
+## まとめ
+
+これらの例から学べる重要なポイント：
+
+1. **適切な戦略選択**: シナリオに応じてSquash/新規gitコミット/Rebaseを使い分け
+2. **明確なメッセージ**: 「なぜ」その変更が必要だったのかを記述
+3. **論理的な単位**: 各gitコミットが独立して理解できる粒度
+4. **継続的な改善**: レビューフィードバックを反映して品質向上
+
+これらの原則に従うことで、チーム全体の生産性が向上します。
--- a/skills/high-quality-commit/reference.md
+++ b/skills/high-quality-commit/reference.md
@@ -0,0 +1,253 @@
+# High Quality Commit - Reference Guide
+
+このドキュメントは、高品質なgitコミットを作成するための詳細なガイダンスとベストプラクティスを提供します。
+
+## gitコミット戦略の詳細
+
+### Squash戦略（デフォルト）
+
+**使用タイミング:**
+- 継続的な開発中で、機能追加やバグ修正を繰り返している
+- レビュー指摘への対応や微調整を行っている
+- 同じ機能に関連する複数の変更を一つにまとめたい
+
+**メリット:**
+- ブランチのgitコミット履歴がクリーンになる
+- レビュー時に一つの論理的な変更として見やすい
+- PRマージ時に整理されたgitコミット履歴が残る
+
+**実行例:**
+
+```bash
+# 変更をステージング
+git add -A
+
+# 直前のコミットに統合（メッセージを編集）
+git commit --amend
+
+# または、メッセージを変更せずに統合
+git commit --amend --no-edit
+```
+
+**注意点:**
+- 既にpushしたgitコミットをamendする場合は、force pushが必要
+- チーム開発では他の人がそのgitコミットをベースにしていないか確認
+
+### 新規gitコミット戦略
+
+**使用タイミング:**
+- 明確に異なる機能や修正を追加する
+- gitコミットを分けることで履歴の理解が容易になる
+- 各gitコミットが独立してビルド・テスト可能
+
+**メリット:**
+- 変更のgitコミット履歴が詳細に残る
+- git bisectなどでの問題追跡が容易
+- 特定の変更だけをrevertできる
+
+**実行例:**
+
+```bash
+# 変更をステージング
+git add -A
+
+# 新規コミット作成
+git commit -m "feat: add user authentication
+
+Implement JWT-based authentication:
+- Add login endpoint
+- Add token validation middleware
+- Add user session management
+
+Closes #123"
+```
+
+### Interactive Rebase戦略
+
+**使用タイミング:**
+- PR作成前にgitコミット履歴を整理したい
+- 複数の小さなgitコミットを論理的にまとめたい
+- gitコミットの順序を変更したい
+- 不要なgitコミット（WIP、fixupなど）を削除したい
+
+**メリット:**
+- クリーンで意味のあるgitコミット履歴が作成できる
+- レビュアーが理解しやすい
+- mainブランチのgitコミット履歴が整理される
+
+**実行例:**
+
+```bash
+# mainブランチとの差分で対話的にrebase
+git rebase -i origin/main
+
+# または、最新のN個のコミットをrebase
+git rebase -i HEAD~3
+```
+
+**エディタでの操作:**
+
+```
+pick abc1234 feat: add user model
+pick def5678 fix: typo in user model
+pick ghi9012 feat: add user controller
+pick jkl3456 fix: validation logic
+
+# ↓ 以下のように編集
+
+pick abc1234 feat: add user model
+squash def5678 fix: typo in user model
+pick ghi9012 feat: add user controller
+squash jkl3456 fix: validation logic
+```
+
+結果：2つの論理的なコミットに統合される
+
+## gitコミットメッセージのベストプラクティス
+
+### 良いgitコミットメッセージの例
+
+```
+feat: add user profile editing feature
+
+Allow users to update their profile information including:
+- Display name
+- Email address
+- Profile picture
+- Bio
+
+Implemented with form validation and real-time preview.
+
+Closes #456
+```
+
+### 避けるべきgitコミットメッセージ
+
+```
+# 悪い例1: 不明確
+update files
+
+# 悪い例2: 詳細すぎる実装の説明
+Changed UserController.ts line 45 to use async/await instead of promises
+
+# 悪い例3: 複数の無関係な変更
+Fix bug and add feature and update docs
+```
+
+### Type選択のガイド
+
+- **feat**: ユーザーに見える新機能
+- **fix**: ユーザーに影響するバグ修正
+- **refactor**: 動作を変えないコードの改善
+- **perf**: パフォーマンス改善
+- **test**: テストの追加・修正
+- **docs**: ドキュメントのみの変更
+- **style**: コードフォーマット、セミコロンなど
+- **chore**: ビルド、依存関係の更新など
+
+## よくあるシナリオと対応
+
+### シナリオ1: レビュー指摘への対応
+
+**状況:** PRにレビューコメントがあり、修正が必要
+
+**推奨戦略:** Squash
+
+```bash
+# 修正を実施
+# ...
+
+# 既存のコミットに統合
+git add -A
+git commit --amend
+
+# 強制push（PRを更新）
+git push --force-with-lease
+```
+
+### シナリオ2: 大きな機能の段階的実装
+
+**状況:** 大きな機能を複数のステップで実装している
+
+**推奨戦略:** 新規コミット（各段階ごと）
+
+```bash
+# ステップ1: モデル作成
+git add src/models/
+git commit -m "feat: add user authentication model"
+
+# ステップ2: API実装
+git add src/api/
+git commit -m "feat: add authentication API endpoints"
+
+# ステップ3: UI実装
+git add src/components/
+git commit -m "feat: add login UI components"
+```
+
+### シナリオ3: WIPコミットの整理
+
+**状況:** 開発中に多数のWIPコミットを作成してしまった
+
+**推奨戦略:** Interactive Rebase
+
+```bash
+# WIPコミットを確認
+git log --oneline
+
+# Interactive rebaseで整理
+git rebase -i origin/main
+
+# エディタで不要なコミットをsquash/fixupに変更
+# 意味のあるコミットだけを残す
+```
+
+## トラブルシューティング
+
+### 問題: amendしたコミットがpushできない
+
+**原因:** リモートの履歴と異なる
+
+**解決策:**
+
+```bash
+# 安全な強制push
+git push --force-with-lease
+```
+
+### 問題: rebase中にコンフリクト
+
+**解決策:**
+
+```bash
+# コンフリクトを解決
+# ファイルを編集...
+
+# 解決後、rebaseを続行
+git add .
+git rebase --continue
+
+# または中止
+git rebase --abort
+```
+
+### 問題: 誤ってamendしてしまった
+
+**解決策:**
+
+```bash
+# reflogで以前の状態を確認
+git reflog
+
+# 以前のコミットに戻る
+git reset --hard HEAD@{1}
+```
+
+## まとめ
+
+高品質なgitコミットのための2つの原則：
+
+1. **適切な戦略を選択**: Squash（基本）、新規gitコミット（独立した変更）、Rebase（gitコミット履歴整理）
+2. **明確なメッセージ**: なぜその変更が必要だったのかを記述
+
+これらを守ることで、チーム全体の開発効率が向上し、将来のメンテナンスが容易になります。