kikita-labs/kikita-create-angular-app

Claude Code / Codex 用のエージェントスキル:最新安定版の Angular プロジェクトを、完全な自己保守型の .agents/ ドキュメントツリーと共にスキャフォールドします(既存プロジェクトにそのツリーを後付け・更新することも可能)。

kikita-create-angular-app とは?

このスキルは、Angular プロジェクトのセットアップと、AI エージェント (Claude Code、Codex など) がプロジェクトを理解・保守するために必要なドキュメントツリー (.agents/) を自動生成します。既存プロジェクトに後付け (adopt) することも、新規プロジェクトをスキャフォールドすることもできます。スキャフォールド時は CSS フレームワーク、UI ライブラリ、テスト設定、SSR、i18n、JSDoc ルール、Git ポリシーなどを対話形式で質問し、その回答に基づいて最適なドキュメントを生成します。生成されたドキュメントは .agents/ フォルダ内で整理され、コードスタイル、アーキテクチャ、共有モジュール、設計判断記録 (ADR) などをカバー。各ファイルにはテンプレート変数が埋め込まれており、プロジェクトの実態と常に同期されます。

対応✓Claude Code✓Codex CLI~Cursor
npx skills add kikita-labs/kikita-create-angular-app

Installed? Explore more 生産性&コラボレーション skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

kikita-create-angular-app は何をしますか?

新しい Angular プロジェクトをブートストラップし、その AGENTS.md / .agents/ ドキュメントツリーを生成します。 これにより、プロジェクトで作業する AI エージェント(Claude Code、Codex など)が完全かつ自己保守可能な信頼できる情報源を持つことができます。

0. モード検出(常に最初にこれを行う)

ターゲットディレクトリには3つの状態があります。この順序でチェックします。

  1. .agents/.kikita-scaffold.json が存在する → このプロジェクトは既にこのスキルによってスキャフォールドまたは採用(adopt)されています。update.md に従ってください。アンケートの再実行、再スキャフォールド、adopt.md の再実行は行わないでください。update.md は最新テンプレートの取得、記録されたコミットからの差分の検出、変更のプロジェクト(場合によってはカスタマイズされた)の .agents/ ファイルへのマージを処理します。
  2. 空またはほぼ空のディレクトリ(package.json、angular.json がなく、おそらく .git//README しかない) → 新規初期化。以下のセクション1に進み、その後 plan.md に進みます。
  3. 既存プロジェクトで、スキャフォールド記録がない(package.json/angular.json は存在するが、.agents/.kikita-scaffold.json は存在しない) → これは他人の(または古い、このスキル以前の)Angular プロジェクトです。plan.md を実行しないでください。これは空のディレクトリを想定しており、実際のプロジェクトに対して ng new を実行しようとします。代わりに adopt.md に従ってください。実際に存在するものに対して .agents/ ツリーを生成し、既存の設定からアンケート回答を推測し、新しいツールをスキャフォールドする代わりに、既存のものを変更する前に質問します。

0.5 前提条件(新規初期化のみ)

  • 作業ディレクトリが空であるか、ユーザーが明示的にここで初期化することを希望していることを確認します。
  • チェックした結果、ディレクトリが空でないことが判明した場合は、停止し、上記のケース3(adopt.md)にルーティングし直します。初期化パスを強制しないでください。「ここで初期化しても問題ないか」の確認をユーザーに求めないでください。実際に必要なのは adopt フローです。

1. アンケート(ファイルシステムに触れる前に常に質問する)

ここから plan.md に従ってステップバイステップで進めてください。アンケートをスキップしないでください。MCP インストールをスキップしないでください。完了したら、checklist.md を実行してからユーザーに完了を伝えてください。

一度にすべての質問を1ラウンドでユーザーに尋ねます。

  1. CSS: ネイティブ CSS(カスタムプロパティ)、SCSS、または Tailwind CSS?
    • Tailwind は構造的に異なるブランチであり、他の2つのフレーバーではありません。@layer {{PREFIX}}.* スキーム、手書きの :root トークン、SCSS ミックスインはありません。templates/.agents/code-style/css-architecture.md、component-structure.md、templates/.agents/architecture/folder-structure.md の CSS=Tailwind スキャフォールドブロックを参照してください。
  2. UI ライブラリ: @kikita-labs/ui、Taiga UI、PrimeNG、またはなし(ローカルのトークンベースの UI セットを構築する)?
    • ライブラリが選択された場合:ng add スキーマティックおよび/または MCP サーバーが提供されているかどうかを調べてください。スキーマティックを優先してください。MCP がある場合は、それをインストールします(plan.md のステップ4を参照)。
  3. テスト: なし、ユニットのみ、e2e のみ、または両方?どのランナーを使用しますか(Vitest/Jasmine+Karma は新しい Angular では非推奨です。Vitest を推奨します。e2e には Playwright)?
  4. SSR: このアプリはサーバーサイドレンダリング(Angular SSR / ハイドレーション)されますか、それともクライアント専用ですか?
    • .agents/architecture/platform-adapter.md を生成するかどうかを決定します。
  5. i18n: このプロジェクトは複数のロケールを必要としますか(@angular/localize またはランタイム i18n ライブラリ)?必要とする場合、どのアプローチを使用しますか?
    • .agents/i18n.md を生成するかどうかを決定します。
  6. パブリック API の JSDoc: エクスポートされたすべてのシンボルに必須の JSDoc を強制しますか、それともスキップしますか?
    • .agents/agent-surface.md を生成するかどうかを決定します(推奨デフォルト:はい)。
  7. プロジェクトプレフィックス: コンポーネント/ディレクティブ用の短いケバブケースのセレクタープレフィックス。
  8. Git ポリシー: エージェントは毎回尋ねることなくコミットおよびプッシュしてもよいですか、それともすべてのコミット/プッシュを確認する必要がありますか?
  9. パッケージマネージャー: npm、pnpm、または yarn?デフォルトの推奨:pnpm(高速、共有のコンテンツアドレス可能ストアによるディスク効率が良く、より厳密な依存関係解決)。ユーザーが他のものを希望する場合のみ、デフォルトを上書きします。
  10. Git リモート: ユーザーは既にプッシュ先のリポジトリ URL を持っていますか?持っている場合、それを記録します。git remote add origin <url> は git init の直後に実行されます(plan.md のステップ9を参照)。URL が指定されなかった場合、これをスキップします。ユーザーは後で自分でリモートを設定します。

すべての回答を記録します。これらはスキャフォールディングと、どのドキュメントファイルを生成するかの両方を決定します。 決して静かにデフォルトを想定しないでください。ユーザーが質問をスキップした場合は、その質問をもう一度尋ねてください。 このスキルは単一の Angular プロジェクトを対象としており、モノレポではありません。ユーザーがモノレポ/Nx ワークスペースを希望する場合は、このスキルはそれをカバーしていないと言い、即興で対応せずに停止します。

2. 生成

plan.md に従います。templates/ からターゲットプロジェクトにファイルをコピーします。ドットファイル(.gitignore、.editorconfig、.prettierrc、.prettierignore、.nvmrc、.vscode/extensions.json)も含みます。

アンケート回答に対して2つの異なることが行われます。混同しないでください。

  • テキストプレースホルダー — すべての {{TOKEN}} を実際の値で検索&置換し、残さないでください:{{PREFIX}}、{{PROJECT_NAME}}、{{CSS}}、{{CSS_EXT}}、{{UI_LIB}}、{{UI_LIB_MCP_NAME}}、{{UI_LIB_MCP_PURPOSE}}、{{TESTS}}、{{GIT_POLICY}}、{{PACKAGE_MANAGER}}、{{NODE_VERSION}}、{{I18N_APPROACH}}、{{DATE}}。
  • 包含ゲート — SSR、i18n、必須 JSDoc、UI ライブラリ、CSS エンジンの回答はプレースホルダーを埋めるのではなく、ファイル全体(またはその内部の <!-- SCAFFOLD --> でマークされたブロック)をコピーするかどうかを決定します。「いいえ」の回答(または CSS の場合は、選択されなかった2つのエンジン)は、ファイル/ブロックを削除することを意味し、空の文字列で埋めるのではありません。ゲートされたファイルは、保持される場合は AGENTS.md / 関連する README からリンクされ、スキップされる場合はリンクが削除される必要があります。

3. 検証

成功を報告する前に、checklist.md を完全に実行します。

ドキュメント構造に関する注意事項(一度読んだら、テンプレート/ に文字通り従ってください)

  • CLAUDE.md は常に AGENTS.md を指す1行のスタブです。
  • AGENTS.md は必須のエントリポイントです。プロジェクトルートに短い「必読」リストと譲歩できないルールを配置します。
  • .agents/README.md は .agents/ 以下のすべてのフラットなインデックスです。ドキュメントツリーのバレル index.ts に相当します。すべてのルートドキュメントとすべてのサブフォルダ README がここからリンクされます。条件付きファイル(i18n、agent-surface、platform-adapter)が追加またはスキップされるたびに、同期を保ちます。
  • 本当に1つの短いドキュメントで済むトピックは .agents/*.md にフラットに配置されます(workflow、git-policy、documentation、mcp、testing-and-quality、agent-surface、refactoring、progress、i18n、accessibility)。
  • 複数の小さなドキュメントに分岐するトピックは、独自の README.md ハブを持つサブフォルダを取得します:.agents/code-style/、.agents/architecture/、.agents/shared/、.agents/core/、.agents/decisions/。これは、kikita-ui/-docs(完全にフラットでした)からの意図的な逸脱です。このスキルの仕様では、スキャフォールディング後も成長し続けるコンポーネント単位および関心事単位の再利用ドキュメントが必要だからです。
  • .agents/shared/README.md は src/app/shared/ 以下のすべてを登録し、依存関係の形状で分割します:shared/ui/(コンポーネント/ディレクティブ/パイプ、Angular デコレータ付き)と shared/utilities/(プレーンな関数、Angular インポートなし — ESLint の restricted-import ルールで強制)。SCSS が選択された場合、SCSS ミックスインは styles/mixins/ に配置され、shared/ の下にはまったく置かれません。.agents/core/README.md は src/app/core/ 以下のアプリ全体のシングルトン(サービス/ガード/インターセプター)を登録します。どちらも「components」という名前ではありません。どちらもコンポーネント以上のものをカバーしているため、このような命名になっています。
  • .agents/decisions/README.md は、短い ADR が必要な場合(レイヤー方向、状態の所有権、ルーティング戦略、公開エイリアススキーム)を説明します。常に生成され、最初は ADR ファイルはありません。AGENTS.md はこれを条件付きの「構造変更用」グループの下にリンクし、必読リストには含めません。これは shared//core/ の「コンポーネント作業用」グループと同じパターンです。
  • 追跡されたすべてのファイルの内容(JSDoc を含む)は英語のみです。キリル文字や文字化けは禁止です。
  • .agents/ 内のすべてのドキュメントは、kikita-ui の angular-code-style.md のように読める必要があります。命令形、短く、例に基づき、レビュー/検証チェックリストで終わります。

関連スキル