スキル angular-ui-patterns
📦

angular-ui-patterns

コンテンツリビジョン r2 安全 🌐 ネットワークアクセス⚙️ 外部コマンド

堅牢な Angular UI 状態を構築する

Angular のインターフェースでは、ローディング、エラー、フォーム、空データの扱いが一貫しないことがよくあります。このスキルは、Claude、Codex、Claude Code に、予測可能な UI 状態処理のための実践的なパターンを提供します。

対応: Claude Codex Code(CC)
🥉 77 ブロンズ

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト
Review the Skillstore skill "angular-ui-patterns" from https://skillstore.io/skills/sickn33-angular-ui-patterns.md and its manifest at https://skillstore.io/api/skills/sickn33-angular-ui-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/sickn33-angular-ui-patterns.md 署名済み manifest GET /api/skills/sickn33-angular-ui-patterns/manifest 署名済み lockfile GET /api/skills/sickn33-angular-ui-patterns/lockfile

テストする

「angular-ui-patterns」を使用しています。 リストページで、データが更新されるたびにスピナーが点滅する。

期待される結果:

  • 更新中も現在のリストを表示したままにします。
  • 項目が存在しない初回ロード時にのみスケルトンを表示します。
  • 更新に失敗した場合はエラーバナーを表示し、古いリストは引き続き利用可能にします。

「angular-ui-patterns」を使用しています。 フォームの保存中に送信ボタンを何度もクリックできる。

期待される結果:

  • signal または store 値で submitting 状態を追跡します。
  • 操作の実行中は送信ボタンを無効化します。
  • インラインの進行状況と、成功または失敗後の toast またはメッセージを表示します。

「angular-ui-patterns」を使用しています。 機能において、重要なページコンテンツの下に任意のコメントがある。

期待される結果:

  • 重要なヘッダーとメインコンテンツをすぐにレンダリングします。
  • コメント領域には段階的レンダリングを使用します。
  • 遅延領域にプレースホルダー、ローディング、エラー状態を提供します。

セキュリティ監査

安全
v5 • 2026/7/23 バージョン別レポートを開く

All 49 static findings are false positives caused by documentation URLs, Markdown formatting, TypeScript template literals, and ordinary Angular validation examples. No commands, network requests, system reconnaissance, prompt injection, or malicious intent are present.

3
スキャンされたファイル
587
解析済み行数
0
レビュー項目
0
誤検知を無視

リスク要因

🌐 ネットワークアクセス (4)
metadata.json:7 metadata.json:8 metadata.json:9 metadata.json:10
⚙️ 外部コマンド (41)
SKILL.md:16 SKILL.md:27-29 SKILL.md:39-48 SKILL.md:48-52 SKILL.md:52-65 SKILL.md:65-82 SKILL.md:82-90 SKILL.md:90-94 SKILL.md:94-105 SKILL.md:105-109 SKILL.md:109-124 SKILL.md:124-132 SKILL.md:132-137 SKILL.md:137-143 SKILL.md:143-170 SKILL.md:170-174 SKILL.md:174-179 SKILL.md:188-195 SKILL.md:195-203 SKILL.md:203-213 SKILL.md:213-219 SKILL.md:219-222 SKILL.md:233-252 SKILL.md:252-262 SKILL.md:262-274 SKILL.md:274-278 SKILL.md:278-281 SKILL.md:292-301 SKILL.md:301-309 SKILL.md:309-311 SKILL.md:345-384 SKILL.md:384-392 SKILL.md:392-416 SKILL.md:416-424 SKILL.md:424-432 SKILL.md:432-442 SKILL.md:442-446 SKILL.md:446-461 SKILL.md:461-465 SKILL.md:465-475 SKILL.md:475-487
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く
セキュリティ評価

レポートリンクをコピー

https://skillstore.io/skills/sickn33-angular-ui-patterns/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-angular-ui-patterns/security.svg)](https://skillstore.io/skills/sickn33-angular-ui-patterns?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/sickn33-angular-ui-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-angular-ui-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/sickn33-angular-ui-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
学術引用 (APA · BibTeX · CFF)

APA形式の引用

sickn33. (2026). angular-ui-patterns security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-angular-ui-patterns/audits/5

BibTeX形式の引用

@techreport{sickn33-sickn33-angular-ui-patterns-2026, author = {sickn33}, title = {angular-ui-patterns security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/sickn33-angular-ui-patterns/audits/5}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "angular-ui-patterns security audit report (audit version 5)" version: "unspecified" type: report authors: - name: "sickn33" date-released: "2026-07-23" url: "https://skillstore.io/skills/sickn33-angular-ui-patterns/audits/5" identifiers: - type: other value: "skillstore:sickn33-angular-ui-patterns:audit:5" description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由 証拠の信頼度: 高
55
アーキテクチャ
85
保守性
87
コンテンツ
69
コミュニティ
78
仕様準拠

作成できるもの

機能 UI 状態を標準化する

Angular の機能画面全体に、一貫したローディング、空、エラー、データ状態を適用します。

非同期コンポーネントの動作をレビューする

コンポーネントが繰り返し操作を無効化し、失敗を表示し、更新中も既存データを表示したままにできているかを確認します。

AI コード生成をガイドする

コンポーネントやテンプレートを生成する前に、Claude、Codex、Claude Code に具体的な Angular UI ルールを与えます。

これらのプロンプトを試す

UI 状態を追加する 
angular-ui-patterns を使用して、この Angular コンポーネントにローディング、空、エラー、成功状態を追加してください。更新中も既存データを表示したままにしてください。
フォームフィードバックを改善する 
angular-ui-patterns を使用して、この Angular フォームをレビューしてください。フィールド検証メッセージ、送信ボタンの無効化動作、明確な成功または失敗フィードバックを追加してください。
非同期フローをリファクタリングする 
angular-ui-patterns を適用して、この非同期 Angular 画面をリファクタリングしてください。データが存在しない場合にのみスケルトンを使用し、回復可能なすべてのエラーを表示してください。
機能体験を監査する 
angular-ui-patterns に照らして、この Angular 機能を監査してください。不足している状態、繰り返し操作のリスク、古い UI のリスク、アクセシビリティのギャップを特定してください。

ベストプラクティス

  • 表示できる有用なデータがない場合にのみ、ローディングインジケーターを表示します。
  • すべてのエラーを、フィールドメッセージ、toast、バナー、または全体エラー状態で表示します。
  • 非同期処理中は繰り返し操作を無効化し、進行状況を視覚的にフィードバックします。

回避

  • すべての更新時に既存データをスピナーで置き換える。
  • ユーザーに復旧方法を示さず、エラーをログだけで捕捉する。
  • 操作の実行中に、送信、保存、削除のコントロールを有効なままにする。

よくある質問

このスキルは完全な Angular アプリケーションを生成しますか？
いいえ。コンポーネント実装の指針となる UI 状態パターンと例を提供します。
どの Angular 機能を重視していますか？
Signals、最新の制御フロー、@empty、@defer、フォーム、非同期 UI 状態処理を重視します。
Angular Material と併用できますか？
はい。このパターンは Angular Material やその他のコンポーネントライブラリと互換性があります。
アクセシビリティのガイダンスは含まれていますか？
はい。ローディング状態の通知、フィールドエラーの関連付け、状態変更後のフォーカス管理をユーザーに促します。
ネットワーク呼び出しを行いますか？
いいえ。このスキルにはガイダンスと参照リンクが含まれていますが、コードを実行したりリクエストを行ったりすることはありません。
誰がこのスキルを使用すべきですか？
非同期データとユーザー操作を伴う Angular インターフェースを構築するフロントエンド開発者および AI 支援チームです。

開発者情報

作成者

sickn33

ライセンス

MIT

Skillstore リビジョン

r2

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/angular-ui-patterns

参照

ebdfe608f5de2b66ff37ab4af12af8ac4f5e8006

メンテナンスの新しさ

2026/7/26

利用状況

6 ダウンロード · 100 閲覧

ファイル構成

📄 metadata.json

📄 README.md

📄 SKILL.md

sickn33 のその他のスキル

すべて表示
📦

senior-fullstack

81

シニアレベルのパターンでフルスタックアプリを構築

チームには、モダンなWebアプリケーション向けに一貫したセットアップ、アーキテクチャ、レビュー指針が必要です。このスキルは、React、Next.js、Node.js、GraphQL、PostgreSQLプロジェクト向けのスキャフォールダー、ワークフローのリファレンス、品質向上のためのプロンプトを提供します。

コーディング＆開発 表示

関連スキル

すべて表示
📦

frontend-accessibility

79

フロントエンドのアクセシビリティを改善する

作成者 EIS-ITS

フロントエンドチームは、日常的なUI作業の中で、キーボード、セマンティック、スクリーンリーダーに関する要件を見落としがちです。このスキルは、Claude、Codex、Claude Code がインターフェースの作成や編集を行う際にアクセシビリティチェックを適用できるよう支援します。

コーディング＆開発 表示
📦

frontend-fundamentals

79

フロントエンドコンポーネントの基礎をレビューする

作成者 DanielPodolsky

フロントエンドレビューでは、コンポーネントが保守しにくくなるまで、アーキテクチャ、状態、アクセシビリティ、パフォーマンスの問題が見落とされがちです。このスキルは、Claude、Codex、Claude Codeがコンポーネント品質のための焦点を絞ったチェックリスト質問とレビューパターンに沿って進められるようにします。

コーディング＆開発 表示
📦

accessibility-fundamentals

79

React アクセシビリティの基礎をレビューする

作成者 DanielPodolsky

インタラクティブな React インターフェースでは、キーボード操作、ラベル付け、フォーカス要件が見落とされがちです。このスキルは、JSX、フォーム、ナビゲーション、ダイアログに対する実践的な WCAG チェックを、Claude、Codex、Claude Code が進められるように支援します。

コーディング＆開発 表示