jpskill.com
🛠️ 開発・MCP コミュニティ

perigon-angular

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o perigon-angular.zip https://jpskill.com/download/17329.zip && unzip -o perigon-angular.zip && rm perigon-angular.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17329.zip -OutFile "$d\perigon-angular.zip"; Expand-Archive "$d\perigon-angular.zip" -DestinationPath $d -Force; ri "$d\perigon-angular.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して perigon-angular.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → perigon-angular フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .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-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

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

使用場面

  • src/ClientApp/WebApp 内のフロントエンド作業（コンポーネント、ルート、サービス、スタイル、i18n）。

使用方法

  • レイアウト: エントリーポイントは main.ts、アプリ設定は app/app.config.ts、ルートは app/app.routes.ts、レイアウトシェルは app/layout/*、ページは app/pages/* 配下、共有UIは app/share/components、パイプは app/share/pipe、ガードは app/share/auth.guard.ts に配置します。
  • コンポーネント: スタンドアロンのみを使用し、NgModule は避けてください。Angular Material を使用し、テーマは styles.scss/theme.scss/vars.scss で設定します。各ページのスタイルは、それぞれの *.scss ファイルに記述します。
  • State/フォーム: シグナルとシグナルフォームを優先し、シグナルで十分な場合は従来の双方向バインディングを避けてください。
  • サービス/API: HTTPクライアント/型は app/services (admin-client, base.service, models/services) に配置します。customer-http.interceptor をアクティブに保ち、proxy.conf.json を尊重し、エンドポイント/設定には environments/environment*.ts を使用します。
  • i18n: 文字列は assets/i18n/*.json に配置します。キーは app/share/i18n-keys.ts および scripts/i18n-keys.js と整合するようにします。
  • UX/認証: layout/navigation コンポーネントを再利用します。認証は auth.service + auth.guard 経由で行います。ページネーターの国際化は share/custom-paginator-intl.ts で行います。
  • ツール: pnpm を使用します。ビルド/テストは要求されない限り避けてください。ESLint/tsconfig のデフォルトを維持し、非推奨のモジュールよりもスタンドアロンの Material インポートを優先します。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

When to use

  • Frontend work in src/ClientApp/WebApp (components, routes, services, styles, i18n).

Usage

  • Layout: entry main.ts; app config in app/app.config.ts; routes in app/app.routes.ts; layout shell in app/layout/; pages under app/pages/; shared UI in app/share/components; pipes in app/share/pipe; guards in app/share/auth.guard.ts.
  • Components: standalone only; avoid NgModules. Use Angular Material; theming in styles.scss/theme.scss/vars.scss; keep page styles alongside each *.scss.
  • State/forms: prefer signals and signal forms; avoid legacy two-way binding when signals suffice.
  • Services/API: HTTP clients/types in app/services (admin-client, base.service, models/services); keep customer-http.interceptor active; honor proxy.conf.json; use environments/environment*.ts for endpoints/config.
  • i18n: strings live in assets/i18n/*.json; align keys with app/share/i18n-keys.ts and scripts/i18n-keys.js.
  • UX/auth: reuse layout/navigation components; auth via auth.service + auth.guard; paginator intl in share/custom-paginator-intl.ts.
  • Tooling: use pnpm; avoid builds/tests unless requested. Keep ESLint/tsconfig defaults; prefer standalone Material imports over deprecated modules.