バックエンド実装時に使用。DRY原則遵守。コーディング規約準拠。
Crearize/ai-dev-helm42026年10月7日 更新
無料GitHub で公開
frontend-development
フロントエンド実装時に使用。コーディング規約準拠。コンポーネント設計。
インストール方法を見る含まれるファイル（1）
- SKILL.md1.7 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Frontend Development Skill - フロントエンド開発
禁止事項（最重要）
以下は絶対に禁止。違反は許容されない。
- any型使用禁止:
unknown型を使用（TypeScript の場合） - React.forwardRef使用禁止: 将来非推奨化予定（React の場合）
コンポーネント設計
UIライブラリ優先
新規コンポーネント作成前に、プロジェクトで採用しているUIライブラリの既存コンポーネントで要件を満たせるか確認。
状態管理
プロジェクトで採用している状態管理ライブラリに従う。
非同期処理ガイドライン
- async/await優先: Promiseチェーン（
.then()）は避ける - 独立した非同期処理はPromise.allで並列実行
- エラーハンドリング: try-catch + 適切なUI表示
テスト方針: 仕様ベーステスト
- テストは実装の内部状態ではなく、機能要件に基づいて設計する
- useState等の内部stateを直接検証しない
- Testing Libraryのロールベースセレクタ優先（
getByRole>getByTestId） - モック対象は外部依存（API、ブラウザAPI等）に限定する
実装完了時の必須チェック
プロジェクトの CLAUDE.md に定義されたフロントエンド品質チェックコマンドを実行する。
参照ドキュメント
- フロントエンド規約:
documents/development/coding-rules/frontend-rules.md - 開発ガイドライン:
documents/development/development-policy.md
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Use before implementing any feature, behavior change, or refactor - settles requirements and design, then gets the design independently reviewed and approved by the user before code is written
日本語の概要は準備中です。原文の説明を表示しています。
Crearize/ai-dev-helm42026年10月7日 更新
作業開始時に使用。mainブランチでの作業禁止。Issue先行作成必須。
Crearize/ai-dev-helm42026年10月7日 更新
UI実装後の検証時に使用。agent-browser CLIでブラウザ上の動作を手動検証する。「UIを確認」「画面テスト」と言われたら使用（プロジェクトの E2E スイート実行は quality-check Step 5（推奨度・範囲で自動実施または確認）/ server-startup が担当）。
Crearize/ai-dev-helm42026年10月7日 更新
DBマイグレーション作成時に使用。バージョン番号競合防止。mainブランチ確認必須。
Crearize/ai-dev-helm42026年10月7日 更新
Use when independent tasks benefit from parallel work without shared state or sequential dependencies
日本語の概要は準備中です。原文の説明を表示しています。
Crearize/ai-dev-helm42026年10月7日 更新