jpskill.com
💬 コミュニケーション コミュニティ

capabilitys-layer

アプリケーションの機能追加や変更時に、プレゼンテーションから統合までを考慮し、Angularの最新技術で実装パターンを提供するSkill。

📜 元の英語説明(参考)

Patterns for implementing features under src/app/capabilitys, including presentation/application/domain/integration boundaries, NgRx Signals stores, event-driven communication, and Angular 20 template rules; use when adding or changing a capability.

🇯🇵 日本人クリエイター向け解説

一言でいうと

アプリケーションの機能追加や変更時に、プレゼンテーションから統合までを考慮し、Angularの最新技術で実装パターンを提供するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[スキル名] capabilitys-layer

ケイパビリティ層

目的

独立したケイパビリティを、イベントとワークスペースコンテキストのみを介して相互作用するバウンデッドコンテキストとして提供します。

構造ルール

  • 各ケイパビリティを凝集性のあるものに保ちます。UI + アプリケーションオーケストレーション + ドメインモデル（必要な場合）。
  • ビジネスロジックのためにケイパビリティ間のインポートを作成しないでください。イベントを介して通信します。

状態管理

  • ケイパビリティの状態の信頼できる情報源として、@ngrx/signals ストアを使用します。
  • 算出シグナルを介してビューの状態を導出します。可変配列/オブジェクトを避け、.push() を避けてください。
  • 非同期の副作用は、明示的な演算子の選択を伴う rxMethod + tapResponse を介して実行されます。

イベント駆動型インタラクション

  • 永続化後にドメイン/アプリケーションイベントを公開します（append-before-publish）。
  • プレゼンテーションコンポーネントではなく、アプリケーションストア/エフェクトでイベントを購読します。

UIルール

  • スタンドアロンのゾーンレスコンポーネント。
  • テンプレートはシグナルのみにバインドされ、Angular の制御フロー（@if、@for、@switch、@defer）を使用します。
  • Material Design 3 のトークンのみを使用し、ハードコードされた色は使用しません。

データ境界

  • インフラストラクチャは Observables/Promises を返します。テンプレートの前にシグナルに変換します。
  • Firebase/DataConnect DTO を統合/インフラストラクチャの外に漏らさないでください。

テストの期待事項

  • ストアの遷移に対する単体テストと、ハッピーパスに対する Playwright で重要なフローをカバーします。
  • 安定したセレクター（data-testid、ロール/ラベル）を使用します。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Capabilitys Layer

Intent

Deliver independent capabilities as bounded contexts that interact only via events and the workspace context.

Structure Rules

  • Keep each capability cohesive: UI + application orchestration + domain model (if needed).
  • Do not create cross-capability imports for business logic; communicate via events.

State Management

  • Use @ngrx/signals stores as the source of truth for capability state.
  • Derive view state via computed signals; avoid mutable arrays/objects and avoid .push().
  • Async side effects run through rxMethod + tapResponse with explicit operator choice.

Event-Driven Interactions

  • Publish domain/application events after persistence (append-before-publish).
  • Subscribe to events in application stores/effects, not in presentation components.

UI Rules

  • Standalone, zone-less components.
  • Templates bind to signals only and use Angular control flow (@if, @for, @switch, @defer).
  • Material Design 3 token usage only; no hardcoded colors.

Data Boundaries

  • Infrastructure returns Observables/Promises; convert to signals before templates.
  • Do not leak Firebase/DataConnect DTOs outside integration/infrastructure.

Testing Expectations

  • Cover critical flows with unit tests for store transitions and Playwright for happy paths.
  • Use stable selectors (data-testid, roles/labels).