鉄則

reference/angular-conventions.md を最初に読む — Angular コードを書く前に必ず読むこと。規約、フォルダ構造、daisyUI トークンルールがすべてそこにあります

スタイル法則: すべての命名、ファイル構造、コード組織について、https://angular.dev/style-guide に厳密に従ってください。クイックリファレンスは reference/angular-conventions.md を参照してください。

アニメーション法則(web/property-harbor): すべてのインタラクティブアニメーションに @angular/animations を使用します。ステートフルな要素に対して生の CSS トランジションは決して使用しないでください。reference/angular-animations.md を参照してください。

Angular 21.x SPA 開発スキル

テックスタック: Angular 21+、TailwindCSS 4.x、daisyUI 5.5.5

規約とフォルダ構造

コード規約、スタイリングルール、デザイン原則、重要なパターン、フォルダ構造、一般的なコマンドについては、reference/angular-conventions.md を参照してください。

ドキュメントソース

コードを生成する前に、これらのソースで最新の構文と API を確認してください。

ソース	URL / ツール	目的
Angular v21	angular-cli MCP (ng mcp)	ワークスペース認識型ヘルプ、スキーマティックス、ビルド、ベストプラクティス
Angular v21	https://angular.dev/assets/context/llms-full.txt	スタティックドキュメントバンドル — API リファレンス、非推奨機能
daisyUI v5.5.5	https://daisyui.com/llms.txt	コンポーネントリファレンス、カラーシステム、テーマ
TailwindCSS / RxJS	Context7 MCP	最新の構文、ユーティリティ、オペレータ
Angular + Tailwind 公式ガイド	https://angular.dev/guide/tailwind	標準的なインストール手順、ng add tailwindcss、ビルド統合

取得したドキュメントに対して、すべての Angular API と CLI フラグをクロスチェックしてください — 非推奨または削除された機能は使用しないでください。

Angular & TypeScript のベストプラクティスについては、reference/angular-best-practices.md を参照してください。

クイックスカッフォルド — 新規 Angular プロジェクト

npx @angular/cli@latest new my-app --style=scss --ssr=false
cd my-app

--standalone を渡さないでください(v19 以降は削除/デフォルト)。取得したドキュメントに対してフラグを確認してください。

UI コードを書く前に

コンポーネントテンプレートやスタイルを作成または変更する前に:

1. reference/daisyui-v5-components.md を読む — セマンティックカラートークンとコンポーネントパターンについて
2. reference/tailwind-v4-config.md を読む — TailwindCSS 4.x セットアップの制約について
3. トークン認識を確認 — カラートークン(bg-primary、text-base-content)、スペーシングベース(4px)、使用する書体アプローチの名前を挙げられますか?
4. そうでない場合 → テンプレートやスタイルコードを書く前にリファレンスファイルを読んでください
5. アクセシビリティについては、インタラクティブ要素を追加する前に reference/accessibility-checklist.md を読んでください。

プロセス

1. 要件を理解する — 機能スコープ、API エンドポイント、データモデル、UI 要件を明確にする
2. 構造をスカッフォルディングする — src/app/features/<feature-name>/ の下に機能フォルダを作成する
3. コンポーネントを生成する — reference/angular-templates.md でテンプレートを読む。シグナルベースの状態で作成する
4. サービスを作成する — reference/angular-templates.md でサービステンプレートを読む。HttpClient + RxJS で API 呼び出しを実装する
5. ルートを構成する — app.routes.ts で loadComponent を使用して遅延ロード型ルートを追加するか、機能ルートを追加する
6. テストを書く — reference/angular-templates.md でテストテンプレートを読む。ゾーンレス TestBed でユニットテストを書く
7. コンポーネントにスタイルを適用する — daisyUI コンポーネント + TailwindCSS ユーティリティを使用。SCSS と BEM 命名にフォールバック
8. ビルドを確認する — ng build を実行してコンパイルエラーがないことを確認する

リファレンスファイル

詳細なパターンは reference/ にあります:

Angular ベストプラクティス & コードテンプレート

• angular-best-practices.md — TypeScript、コンポーネント、テンプレート、状態管理、サービス、フォーム、ゾーンレス、アクセシビリティ、テストのベストプラクティス
• angular-templates.md — スタンドアロンコンポーネント、サービス、遅延ロード型ルート、app.config、インターセプター、ガード、テストテンプレート
• angular-troubleshooting.md — 一般的なエラー(NG0908、NullInjectorError、ブランク画面)、CLI コマンド、ベストプラクティス

UI/UX & デザインシステム

• tailwind-v4-config.md — TailwindCSS 4.x セットアップ、v3 からの大きな変更
• daisyui-v5-components.md — 完全なコンポーネントリファレンス、カラーシステム、テーマ、クイックセットアップパターン
• angular-forms-fields.md — 入力フィールド、選択、テキストエリア、チェックボックス、ラジオボタンパターン
• angular-forms-validation.md — 検証パターン、エラーメッセージ、非同期バリデータ
• angular-forms-advanced.md — 複数ステップフォーム、動的フィールド、フォーム配列
• angular-ui-tables.md — ソート、フィルタリング、ページネーション付きのテーブルとグリッドパターン
• angular-ui-lists.md — リスト、カード、フィードUI パターン
• angular-ui-navigation.md — ナビゲーション、パンくず、タブ、サイドバーパターン
• angular-ui-feedback-components.md — トースト、ダイアログ、テーマ、エラーハンドリング、ユーティリティ
• accessibility-checklist.md — WCAG 2.1 AA チェックリスト、ARIA パターン、テストプロトコル
• angular-aria.md — Angular CDK アクセシブルヘッドレスコンポーネント(FocusTrap、ListKeyManager、LiveAnnouncer、Accordion、Combobox)
• component-harnesses.md — Angular CDK コンポーネントハーネス(安定的な UI テスト用)
• testing-vitest.md — Vitest セットアップ、ゾーンレス TestBed、シグナルと resource() のテスト、Karma からの移行
• e2e-cypress.md — Cypress E2E セットアップ、コンポーネントテスト、カスタムコマンド、data-cy 規約
• smart-dumb-components.md — スマート(コンテナ)vs ダム(プレゼンテーション)コンポーネントパターン、決定ツリー、シグナルベースの例、ハード規則、ファイルロケーション強制
• angular-animations.md — Angular Animations API(animate.enter/animate.leave、trigger()、state()、keyframes()、stagger())、タイミング基準、PropertyHarbor アニメーション規則
• user-research.md — ペルソナテンプレート、カスタマージャーニーマッピング、ユーザビリティテスト、SUS サーベイ

アンチパターン — 避けるべきこと

アーキテクチャ

• 決して NgModule を作成しないでください — Angular 21 は完全にスタンドアロン。すべてのコンポーネント、パイプ、ディレクティブはデフォルトでスタンドアロンです
• 決して HTTP またはビジネスロジックをコンポーネントで直接呼び出さないでください — インジェクタブルなサービスに委譲してください

状態と変更検出

• 決して 新しいコードで @Input() / @Output() デコレータを使用しないでください — input()、output()、model() シグナル(Angular 21 標準)を使用してください
• 決して コンポーネント状態に BehaviorSubject を使用しないでください — signal() と computed() を使用してください
• 決して デフォルトの変更検出(ChangeDetectionStrategy.Default)に頼らないでください — シグナルで常に OnPush を使用してください

テンプレート

• 決して *ngIf、*ngFor、*ngSwitch 構造化ディレクティブを使用しないでください — @if、@for、@switch 制御フロー(Angular 17+、v21 では標準)を使用してください
• 決して スタンドアロンコンポーネントで CommonModule をインポートしないでください — これは互換性シム。何もインポートしないか、制御フロー構文を使用してください

依存性注入

• 決して コンストラクタパラメータ経由でサービスをインジェクトしないでください — Angular 21 で inject() 関数を使用してください
• 決して HttpClientModule をインポートしないでください — app.config.ts で provideHttpClient() を使用してください(関数型 API)

サブスクリプションとメモリ

• 決して takeUntilDestroyed(destroyRef) なしで手動でサブスクライブしないでください — 長生きコンポーネントでメモリリーク
• 決して ngOnDestroy を使用してアンサブスクライブしないでください — DestroyRef と takeUntilDestroyed() を代わりに使用してください

DOM とスタイリング

• 決して document.getElementById または直接 DOM 操作を使用しないでください — viewChild() シグナルまたは Angular CDK を使用してください
• 決して インラインの style="" 属性を使用しないでください — TailwindCSS ユーティリティまたは SCSS を使用してください

デザイントークン

• 決して style="color: #3B82F6" インラインを使用しないでください — class="text-primary" を使用してください
• 決して bg-blue-500 のようなハードコード化された Tailwind プリミティブカラークラスを使用しないでください — セマンティック bg-primary を使用してください
• 決して style="padding: 16px" を使用しないでください — class="p-4" を使用してください
• 決して style="font-size: 16px" を使用しないでください — class="text-base" を使用してください

エラーハンドリング

ビルド失敗(NG0908、NullInjectorError): reference/angular-troubleshooting.md で一般的なエラーと修正方法を読んでください。

TailwindCSS が適用されない: .postcssrc.json が存在すること(.postcss.config.js ではなく)、グローバルスタイルが .css を使用していること(.scss ではなく)を確認してください。

読み込み時にブランク画面: ブラウザコンソールで遅延ロードエラーを確認してください。ルートパスと loadComponent インポートを確認してください。

一般的なコマンド

ng serve                          # 開発サーバー(http://localhost:4200)
ng test --watch=false             # ユニットテスト 1 回実行(ウォッチなし)
ng test                           # ユニットテスト ウォッチモード実行
ng build                          # プロダクションビルド
ng lint                           # ESLint チェック
ng generate component features/my-feature/my-component --standalone   # コンポーネントをスカッフォルディング
ng generate service features/my-feature/my-service                    # サービスをスカッフォルディング

デザイントークンシステム

完全なトークン定義は .claude/skills/ui-standards-tokens/reference/ui-design-tokens.md にあります。このセクションは Angular 固有の使用方法をカバーしています。

トークンの階層(3 段階)

プリミティブ → セマンティック → コンポーネント

/* プリミティブ */
--color-blue-500: #3B82F6;

/* セマンティック */
--color-primary: var(--color-blue-500);

/* コンポーネント */
--button-bg-primary: var(--color-primary);

コンポーネント CSS でプリミティブトークンを直接使用しないでください。コンポーネントはコンポーネントトークンを参照します。コンポーネントトークンはセマンティックトークンを参照します。

daisyUI トークンマッピング

カテゴリ	daisyUI / Tailwind クラス
色	bg-primary、text-base-content、bg-base-100/200/300、text-error、bg-success
スペーシング	p-2 = 8px、p-4 = 16px、p-6 = 24px(4px ベーススケール)
書体	text-sm、text-base、text-lg、font-semibold、font-bold
ボーダー	rounded-sm、rounded-md、rounded-lg、rounded-full、border border-base-300
シャドウ	shadow-sm、shadow-md、shadow-xl
モーション	transition-all duration-200
Z インデックス	カスタム CSS 変数: --z-dropdown: 1000、--z-modal: 1050、--z-tooltip: 1070

テーマ切り替え

// theme.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ThemeService {
  setTheme(theme: 'light' | 'dark' | 'custom'): void {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }

  getTheme(): string {
    return localStorage.getItem('theme') ?? 'light';
  }
}

daisyUI v5.5.5 は <html> の data-theme 属性を使用します。すべての daisyUI セマンティッククラスは自動的に切り替わります — コンポーネント単位で追加の CSS は不要です。

確認

ng serve                   # http://localhost:4200 で起動 — ターミナルにエラーなし
ng test --watch=false      # すべてのユニットテストが合格
ng build                   # 終了コード 0、NG ビルドエラーなし
npx ng lint                # リント違反ゼロ

• アプリがコンソールエラーなしで提供される
• すべての Vitest ユニットテストが合格(>90% カバレッジを強制)
• プロダクションビルドが正常に完了する
• TypeScript エラーなし(tsc --noEmit)
• shared/components/ の共有コンポーネントに inject() 呼び出しがない(ダム規則)
• サービス注入コンポーネントが pages/ または features/ に存在する(スマート規則)