バックエンド実装時に使用。DRY原則遵守。コーディング規約準拠。
The English summary is being prepared. Showing the original description.
Crearize/ai-dev-helm5Updated Oct 12, 2026
FreePublished on GitHub
frontend-development
フロントエンド実装時に使用。コーディング規約準拠。コンポーネント設計。
The English summary is being prepared. Showing the original description.
See how to installFiles included (1)
- SKILL.md1.7 KB
SKILL.md (original)
Review the instructions the agent will receive before you install.
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
Reviews
No reviews yet. Tell others what you thought.
Comments
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
More skills from this repository
brainstorming
FreeUse 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
The English summary is being prepared. Showing the original description.
Crearize/ai-dev-helm5Updated Oct 12, 2026
branch-workflow
Free作業開始時に使用。mainブランチでの作業禁止。Issue先行作成必須。
The English summary is being prepared. Showing the original description.
Crearize/ai-dev-helm5Updated Oct 12, 2026
browser-agent
FreeUI実装後の検証時に使用。agent-browser CLIでブラウザ上の動作を手動検証する。「UIを確認」「画面テスト」と言われたら使用（プロジェクトの E2E スイート実行は quality-check Step 5（推奨度・範囲で自動実施または確認）/ server-startup が担当）。
The English summary is being prepared. Showing the original description.
Crearize/ai-dev-helm5Updated Oct 12, 2026
DBマイグレーション作成時に使用。バージョン番号競合防止。mainブランチ確認必須。
The English summary is being prepared. Showing the original description.
Crearize/ai-dev-helm5Updated Oct 12, 2026
Use when independent tasks benefit from parallel work without shared state or sequential dependencies
The English summary is being prepared. Showing the original description.
Crearize/ai-dev-helm5Updated Oct 12, 2026