메뉴
Angular コードを生成し、アーキテクチャ ガイダンスを提供します。プロジェクトの作成、コンポーネント、またはサービスを作成するとき、または反応性（シグナル、linkedSignal、リソース）、フォーム、依存性注入、ルーティング、SSR、アクセシビリティ（ARIA）、アニメーション、スタイリング（コンポーネント スタイル、Tailwind CSS）、テスト、または CLI ツール作成のベスト プラクティスについてトリガーされます。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | angular-developer |
| description | Angular コードを生成し、アーキテクチャ ガイダンスを提供します。プロジェクトの作成、コンポーネント、またはサービスを作成するとき、または反応性（シグナル、linkedSignal、リソース）、フォーム、依存性注入、ルーティング、SSR、アクセシビリティ（ARIA）、アニメーション、スタイリング（コンポーネント スタイル、Tailwind CSS）、テスト、または CLI ツール作成のベスト プラクティスについてトリガーされます。 |
| origin | ECC |
linkedSignal、または resource で反応性を実装するときガイダンスを提供する前に、常にプロジェクトの Angular バージョンを分析してください。ベスト プラクティスと利用可能な機能はバージョン間で大きく異なる場合があります。Angular CLI を使用して新しいプロジェクトを作成する場合、ユーザーによるプロンプトがない限り、バージョンを指定しないでください。
コードを生成するときは、メンテナンス性とパフォーマンスのため、Angular のスタイル ガイドと Angular のベスト プラクティスに従ってください。Angular CLI を使用して、コンポーネント、サービス、ディレクティブ、パイプ、およびルートをスキャフォールディングして、一貫性を確保します。
コード生成を完了したら、ng build を実行してビルド エラーがないか確認してください。エラーがある場合は、エラー メッセージを分析して修正してから続行してください。生成されたコードが正しく機能することを確認するために、このステップをスキップしないことが重要です。
ユーザーがガイドラインを提供しない場合は、新しい Angular プロジェクトを作成するときに、これらのデフォルトを使用してください。
ng new の実行ルール:
新しい Angular プロジェクトを作成するよう求められたとき、以下の厳密な手順に従って正しい実行コマンドを決定する必要があります。
ステップ 1: ユーザーが明示的にバージョンを指定しているか確認します。
npx を使用してください。npx @angular/cli@<requested_version> new <project-name>ステップ 2: 既存の Angular インストールを確認します。
ng version を実行して、Angular CLI がシステムに既にインストールされているかどうかを確認してください。ng new <project-name>ステップ 3: 最新版へのフォールバック
ng version コマンドが失敗した場合（Angular インストールが存在しないことを示す）、npx を使用して最新バージョンを取得する必要があります。npx @angular/cli@latest new <project-name>Angular コンポーネントで作業するとき、タスクに基づいて次のリファレンスを参照してください。
より詳細なドキュメントが上記のリファレンスで見つからない場合は、https://angular.dev/guide/components のドキュメントを参照してください。
状態とデータ反応性を管理する場合、Angular シグナルを使用し、次のリファレンスを参照してください。
signal、computed）、反応的コンテキスト、および untracked。signals-overview.md を読んでください。linkedSignal）: ソース シグナルにリンクされた書き込み可能な状態を作成します。linked-signal.md を読んでください。resource）: シグナル状態に非同期データを直接フェッチします。resource.md を読んでください。effect）: ロギング、サードパーティ DOM 操作（afterRenderEffect）、および副作用を使用しないテーム。effects.md を読んでください。ほとんどの場合、新しいアプリケーション では シグナル フォームを優先してください。フォーム決定を行うときは、プロジェクトを分析し、次のガイドラインを検討してください。
アプリケーション バージョンがシグナル フォームをサポートしており、これが新しいフォームの場合、シグナル フォームを優先してください。
古いアプリケーションまたは既存のフォーム については、アプリケーションの現在のフォーム戦略と一致させてください。
シグナル フォーム: フォーム状態管理用にシグナルを使用します。signal-forms.md を読んでください。
テンプレート駆動フォーム: シンプルなフォーム用に使用します。template-driven-forms.md を読んでください。
リアクティブ フォーム: 複雑なフォーム用に使用します。reactive-forms.md を読んでください。
Angular に依存性注入を実装するときは、次のガイドラインに従ってください。
inject() 関数。di-fundamentals.md を読んでください。providedIn: 'root' オプション、およびコンポーネントまたは他のサービスへの注入。creating-services.md を読んでください。InjectionToken、useClass、useValue、useFactory、およびスコープ。defining-providers.md を読んでください。inject() が許可される場所、runInInjectionContext、および assertInInjectionContext。injection-context.md を読んでください。EnvironmentInjector と ElementInjector、解決ルール、修飾子（optional、skipSelf）、および providers と viewProviders。hierarchical-injectors.md を読んでください。Accordion、Listbox、Combobox、Menu、Tabs、Toolbar、Tree、Grid などのパターン用のアクセシブルなカスタム コンポーネントを構築する場合は、次のリファレンスを参照してください。
Angular にナビゲーションを実装する場合は、次のリファレンスを参照してください。
<router-outlet>、ネストされたアウトレット、および名前付きアウトレットの使用。show-routes-with-outlets.md を読んでください。RouterLink による宣言的ナビゲーションと Router による プログラマティック ナビゲーション。navigate-to-routes.md を読んでください。CanActivate、CanMatch などのガードを実装してセキュリティを確保します。route-guards.md を読んでください。ResolveFn によるルート有効化前のデータ プリフェッチ。data-resolvers.md を読んでください。より詳細なドキュメントまたは詳細なコンテキストが必要な場合は、公式 Angular ルーティング ガイド をご覧ください。
Angular でスタイリングとアニメーションを実装する場合は、次のリファレンスを参照してください。
テストを作成または更新するときは、タスクに基づいて次のリファレンスを参照してください。
TestBed のベスト プラクティス。testing-fundamentals.md を読んでください。RouterTestingHarness を使用します。router-testing.md を読んでください。Angular ツール作成で作業するときは、次のリファレンスを参照してください。
null または undefined を使用する — 代わりに ''、0、または [] を使用してください。form.field.valid() — 代わりに form.field().valid() を使用してください。[formField] 入力に min、max、value、disabled、または readonly HTML アトリビュートを設定する — 代わりにこれらをスキーマ ルールとして定義してください。inject() を呼び出す — 必要な場合は runInInjectionContext を使用してください。effect() を使用する — 代わりに computed() を使用してください。@for ループで $parent.$index を参照する — Angular は $parent をサポートしていません。代わりに let outerIdx = $index を使用してください。tdd-workflow — Angular コンポーネントおよびサービスに適用可能なテスト駆動開発ワークフロー。security-review — Angular 固有の懸念を含む Web アプリケーションのセキュリティ チェックリスト。frontend-patterns — React/Next.js アプローチのコンテキスト用の一般的なフロントエンド パターン。Use after a complex task, failure, or when reviewing what was learned. Teaches how to write growth logs that extract reusable patterns — not diary entries.
Design a goal-oriented agent loop, and review it for the ways loops go wrong — spinning and burning tokens, Goodhart-gaming the verifier, or running a wrong answer to completion. Two actions: (1) WRITE a loop — gate whether to build it, define a machine-decidable goal, pick the loop type, pick a skeleton; (2) REVIEW a loop — run it past five failure modes plus decidability, boundaries, fallback, judge independence, and keep-judgment-with-the-human red lines. Use when designing an autonomous agent loop, or when you already have one and worry it will spin, cheat, or run a wrong answer to the end. Complements the mechanism-layer loop skills (autonomous-loops, continuous-agent-loop) by covering the judgment layer they don't. 中文触发：写 loop、设计 loop、做一个 loop、检查 loop 对不对、loop 体检、loop 会不会跑飞、可判定目标、五个崩法、plan build judge。English triggers: design an agent loop, write a loop, check a loop, loop review, prevent a runaway loop, goal-oriented loop, decidable goal, plan/build/judge.
Stop hook that blocks Claude from finishing until quality checks pass. Detects rationalization patterns (surface text heuristics), stale learning logs (filesystem mtime), and low disk space. Complements self-audit by mechanically enforcing learning capture habits.
React Native and Expo app patterns — Expo Router navigation, state separation (server/client/route/form), TanStack Query data fetching with Zod, performant lists, NativeWind/StyleSheet styling, native APIs, and secure storage. Use when building or editing React Native / Expo screens, components, navigation, or data layers.
Instinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents. v2.1 adds project-scoped instincts to prevent cross-project contamination.
Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.