Agent skill · software engineering · affaan-m
angular-developer
Angular コードを生成し、アーキテクチャ ガイダンスを提供します。プロジェクトの作成、コンポーネント、またはサービスを作成するとき、または反応性（シグナル、linkedSignal、リソース）、フォーム、依存性注入、ルーティング、SSR、アクセシビリティ（ARIA）、アニメーション、スタイリング（コンポーネント スタイル、Tailwind CSS）、テスト、または CLI ツール作成のベスト プラクティスについてトリガーされます。
Why this skill is useful
Provides specific Angular CLI commands and best practices for project setup, component generation, and state management that the AI wouldn't reliably generate on its own.
What it needs
Requires @angular/cli installed locally. About 2k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
Angular 開発者 ガイドライン アクティブ化するとき 任意の Angular プロジェクトまたはコードベースで作業しているとき 新しい Angular プロジェクト、アプリケーション、またはライブラリを作成またはスキャフォールディングするとき コンポーネント、サービス、ディレクティブ、パイプ、ガード、またはリソルバーを生成するとき Angular シグナル、linkedSignal、または resource で反応性を実装するとき Angular フォーム（シグナル フォーム、リアクティブ フォーム、またはテンプレート駆動）で作業するとき 依存性注入、ルーティング、遅延ロード、またはルート ガードをセットアップするとき アクセシビリティ（ARIA）、アニメーション、またはコンポーネント スタイリングを追加するとき Angular 固有のテスト（ユニット、コンポーネント ハーネス、E2E）を作成またはデバッグするとき Angular CLI ツール作成または Angular MCP サーバーを構成するとき 1. ガイダンスを提供する前に、常にプロジェクトの Angular バージョンを分析してください。ベスト プラクティスと利用可能な機能はバージョン間で大きく異なる場合があります。Angular CLI を使用して新しいプロジェクトを作成する場合、ユーザーによるプロンプトがない限り、バージョンを指定しないでください。 2. コードを生成するときは、メンテナンス性とパフォーマンスのため、Angular のスタイル ガイドと Angular のベスト プラクティスに従ってください。Angular CLI を使用して、コンポーネント、サービス、ディレクティブ、パイプ、およびルートをスキャフォールディングして、一貫性を確保します。 3. コード生成を完了したら、ng build を実行してビルド エラーがないか確認してください。エラーがある場合は、エラー メッセージを分析して修正してから続行してください。生成されたコードが正しく機能することを確認するために、このステップをスキップしないことが重要です。 新しいプロジェクトの作成 ユーザーがガイドラインを提供しない場合は、新しい Angular プロジェクトを作成するときに、これらのデフォルトを使用してください。 1. ユーザーが別途指定しない限り、Angular の最新の安定バージョンを使用してください。 2. 対象の Angular バージョンがシグナル フォームをサポートしている場合のみ、新しいプロジェクトではシグナル フォームを優先してください。詳細情報を確認してください。 ng new の実行ルール: 新しい Angular プロジェクトを作成するよう求められたとき、以下の厳密な手順に従って正しい実行コマンドを決定する必要があります。 ステップ 1: ユーザーが明示的にバージョンを指定しているか確認します。 IF ユーザーが特定のバージョンをリクエストしている場合（例：Angular 15）、ローカル インストールをバイパスして、厳密に npx を使用してください。 コマンド: npx @angular/cli@<requestedversion> new <project-name> ステップ 2: 既存の Angular インストールを確認します。 IF 特定のバージョンがリクエストされていない場合、ターミナルで ng version を実行して、Angular CLI がシステムに既にインストールされているかどうかを確認してください。 IF コマンドが成功して、インストール済みバージョンが返された場合は、ローカル/グローバル インストールを直接使用してください。 コマンド: ng new <project-name> ステップ 3: 最新版へのフォールバック IF 特定のバージョンがリクエストされていない場合、ng version コマンドが失敗した場合（Angular インストールが存在しないことを示す）、npx を使用して最新バージョンを取得する必要があります。 コマンド: npx @angular/cli@latest new <project-name> コンポーネント Angular コンポーネントで作業するとき、タスクに基づいて次のリファレンスを参照してください。 基礎: 解剖学、メタデータ、コア概念、およびテンプレート制御フロー（@if、@for、@switch）。components.md を読んでください。 入力: シグナルベースの入力、変換、およびモデル入力。inputs.md を読んでください。 出力: シグナルベースの出力とカスタム イベント …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/angular-developer