バックエンド実装時に使用。DRY原則遵守。コーディング規約準拠。
中文简介正在准备中。当前显示原文说明。
Crearize/ai-dev-helm52026年10月12日 更新
免费在 GitHub 公开
frontend-development
フロントエンド実装時に使用。コーディング規約準拠。コンポーネント設計。
中文简介正在准备中。当前显示原文说明。
查看安装方法包含的文件（1）
- SKILL.md1.7 KB
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
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-helm52026年10月12日 更新
作業開始時に使用。mainブランチでの作業禁止。Issue先行作成必須。
中文简介正在准备中。当前显示原文说明。
Crearize/ai-dev-helm52026年10月12日 更新
UI実装後の検証時に使用。agent-browser CLIでブラウザ上の動作を手動検証する。「UIを確認」「画面テスト」と言われたら使用（プロジェクトの E2E スイート実行は quality-check Step 5（推奨度・範囲で自動実施または確認）/ server-startup が担当）。
中文简介正在准备中。当前显示原文说明。
Crearize/ai-dev-helm52026年10月12日 更新
DBマイグレーション作成時に使用。バージョン番号競合防止。mainブランチ確認必須。
中文简介正在准备中。当前显示原文说明。
Crearize/ai-dev-helm52026年10月12日 更新
Use when independent tasks benefit from parallel work without shared state or sequential dependencies
中文简介正在准备中。当前显示原文说明。
Crearize/ai-dev-helm52026年10月12日 更新