スキル angular-20-standalone-component

📦

angular-20-standalone-component

Name: angular-20-standalone-component
Author: 7Spade

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド

Angular 20 スタンドアロンコンポーネントを構築

Angular チームには、現在のフレームワークパターンに従った一貫性のあるスタンドアロンコンポーネントが必要です。このスキルは、Claude、Codex、Claude Code が、signals、モダンなテンプレート、クリーンなサービス統合を備えたコンポーネントを生成できるように導きます。

対応: Claude Codex Code(CC)

🥉 78 ブロンズ

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

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

エージェントリクエスト

Review the Skillstore skill "angular-20-standalone-component" from https://skillstore.io/skills/7spade-angular-20-standalone-component.md and its manifest at https://skillstore.io/api/skills/7spade-angular-20-standalone-component/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

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

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

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

Markdown詳細 GET /skills/7spade-angular-20-standalone-component.md 署名済み manifest GET /api/skills/7spade-angular-20-standalone-component/manifest 署名済み lockfile GET /api/skills/7spade-angular-20-standalone-component/lockfile

テストする

「angular-20-standalone-component」を使用しています。サービス読み込みと更新イベントを備えたスタンドアロンのタスクリストコンポーネントを依頼する。

期待される結果:

signal 状態、サービス注入、ローディング処理、空状態処理、型付き output イベントを含むコンポーネント計画。

「angular-20-standalone-component」を使用しています。デコレーターと構造ディレクティブを使用する古いコンポーネントのモダン化を依頼する。

期待される結果:

レガシーデコレーターとディレクティブを Angular 20 の関数と制御フローに置き換えるリファクタリング概要。

「angular-20-standalone-component」を使用しています。タスク作成用のフォームコンポーネントを依頼する。

期待される結果:

リアクティブバリデーション、submit イベント、reset 動作、OnPush に適した状態更新を備えたフォームコンポーネント設計。

セキュリティ監査

安全

v6 • 2026/7/6 バージョン別レポートを開く

All static findings were adjudicated as false positives caused by Markdown backticks, TypeScript template strings, and normal Angular sample identifiers. No prompt injection, command execution intent, data exfiltration, or system reconnaissance behavior was found in SKILL.md.

スキャンされたファイル

369

解析済み行数

レビュー項目

誤検知を無視

最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

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

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/7spade-angular-20-standalone-component/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/7spade-angular-20-standalone-component/security.svg)](https://skillstore.io/skills/7spade-angular-20-standalone-component?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/7spade-angular-20-standalone-component?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/7spade-angular-20-standalone-component/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/7spade-angular-20-standalone-component.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形式の引用

7Spade. (2026). angular-20-standalone-component security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/7spade-angular-20-standalone-component/audits/6

BibTeX形式の引用

@techreport{7spade-7spade-angular-20-standalone-component-2026,
  author = {7Spade},
  title = {angular-20-standalone-component security audit report (audit version 6)},
  institution = {Skillstore},
  year = {2026},
  number = {6},
  url = {https://skillstore.io/skills/7spade-angular-20-standalone-component/audits/6},
  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-20-standalone-component security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
  - name: "7Spade"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/7spade-angular-20-standalone-component/audits/6"
identifiers:
  - type: other
    value: "skillstore:7spade-angular-20-standalone-component:audit:6"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

機能コンポーネントを作成

signals、ローディング状態、エラー状態、サービス統合を備えたスタンドアロンコンポーネントを生成します。

Angular パターンをモダン化

デコレーター、NgModules、レガシーテンプレートディレクティブから離れたコンポーネントガイダンスに書き換えます。

チームのスキャフォールディングを標準化

Angular ワークスペース全体で新しいコンポーネントに使える反復可能なテンプレートを AI アシスタントに提供します。

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

基本コンポーネントを作成

タスクカード用の Angular 20 スタンドアロンコンポーネントを作成してください。signals、input()、output()、@if、@for、inject()、OnPush を使用してください。

サービス統合を追加

サービスからデータを読み込み、ローディング状態とエラー状態を表示し、タスク更新を emit するスタンドアロンのタスクリストコンポーネントを構築してください。

レガシー構文を変換

この Angular コンポーネント計画を、standalone imports、signals、inject()、input()、output()、新しいテンプレート制御フローを使用するようにリファクタリングしてください。

フォームワークフローを設計

リアクティブバリデーション、型付き outputs、OnPush change detection、明確な空状態とエラー状態を備えた Angular 20 スタンドアロンフォームコンポーネントを設計してください。

ベストプラクティス

生成前に、コンポーネントの目的、inputs、outputs、サービス名を提供してください。
すべてのユーザー向けコンポーネントで、ローディング、エラー、空状態を依頼してください。
生成された imports と UI ライブラリ参照を、プロジェクト標準に照らして確認してください。

回避

このスキルを使用する場合は、NgModule ベースのコンポーネントを依頼しないでください。
デコレーターの inputs と outputs を、新しい関数ベース API と混在させないでください。
生成されたコンポーネントクラスにビジネスロジックを直接配置しないでください。

よくある質問

このスキルはどの Angular バージョンを対象にしていますか？

Angular 20 パターンを対象としており、スタンドアロンコンポーネント、signals、関数ベースの inputs と outputs、新しいテンプレート制御フローを含みます。

古い Angular コンポーネントの変換に役立ちますか？

はい。NgModules、デコレーター、コンストラクター注入、レガシー構造ディレクティブからの移行をガイドできます。

完全なアプリケーション機能を生成しますか？

いいえ。コンポーネント構造とパターンに重点を置いています。サービス、ルート、バックエンドコントラクトには、引き続きプロジェクトのコンテキストが必要です。

特定の UI ライブラリが必要ですか？

いいえ。一部の例では ng-zorro スタイルのマークアップを使用していますが、代わりにプロジェクトの UI コンポーネントを指定できます。

どの AI ツールでこのスキルを使用できますか？

レポートでは Claude、Codex、Claude Code のサポートが記載されています。

プロンプトには何を含めるべきですか？

コンポーネントの役割、データモデル、inputs、outputs、サービスメソッド、UI 状態、バリデーション要件を含めてください。

開発者情報

作成者

7Spade

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

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

リポジトリ

https://github.com/7Spade/ng-dragon/tree/main/.github/skills/angular-component

参照

c1fdca50ff516318f65fed0d7f9e82797c5171dc

メンテナンスの新しさ

2026/7/24

利用状況

11 ダウンロード · 213 閲覧

ファイル構成

React View Transitions を実装する

作成者 vercel-labs

React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。

コーディング＆開発表示

angular-20-standalone-component

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

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

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

Skillstore スコア

作成できるもの

機能コンポーネントを作成

Angular パターンをモダン化

チームのスキャフォールディングを標準化

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

ベストプラクティス

回避

よくある質問

開発者情報

7Spade のその他のスキル

skill-creator

azure-role-selector

webapp-testing

delon-util

doc-coauthoring

delon-chart

関連スキル

vue-options-api-best-practices

senior-frontend

playwright-testing

starknet-js

vue-best-practices

vercel-react-view-transitions