📦
systematic-debugging
79根本原因分析でコードをデバッグする
チームが根拠なしに症状だけを修正すると、バグは時間を浪費します。このスキルは、Claude、Codex、Claude Code が変更前に構造化された診断を行えるように導きます。
コーディング＆開発 表示
スキル react-ui-patterns
📦
react-ui-patterns
コンテンツリビジョン r1 安全 ⚙️ 外部コマンド
堅牢なReact UI状態を構築する
Reactインターフェースでは、ローディング、エラー、空、送信中の状態を明確に表示できないことがよくあります。このスキルは、予測可能な非同期UI動作のための実践的なパターンを提供します。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "react-ui-patterns" from https://skillstore.io/skills/chriswiles-react-ui-patterns.md and its manifest at https://skillstore.io/api/skills/chriswiles-react-ui-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「react-ui-patterns」を使用しています。 商品リストがバックグラウンドで再フェッチされるたびにスピナーを点滅表示します。
期待される結果:
このスキルは、再フェッチ中も既存の商品データを表示し、有用な場合にのみ控えめな更新インジケーターを使用することを推奨します。
「react-ui-patterns」を使用しています。 ミューテーションの実行中も送信ボタンがアクティブなままです。
期待される結果:
このスキルは、ボタンを無効化し、ローディング状態を表示し、完了またはエラーのフィードバックを提示することを推奨します。
「react-ui-patterns」を使用しています。 検索画面で結果がなく、空白ページが表示されます。
期待される結果:
このスキルは、検索ガイダンスと明確な次のアクションを含む、文脈に応じた空状態を推奨します。
セキュリティ監査
安全v9 • 2026/7/6 バージョン別レポートを開く
The static findings are false positives caused by Markdown code fences and React component examples in SKILL.md. No executable scripts, shell commands, prompt injection, credential access, or malicious intent were found.
1
スキャンされたファイル
290
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
⚙️ 外部コマンド (27)
SKILL.md:22-31 SKILL.md:31-33 SKILL.md:33-36 SKILL.md:36-40 SKILL.md:40-53 SKILL.md:53-68 SKILL.md:68-73 SKILL.md:73-79 SKILL.md:79-97 SKILL.md:97-101 SKILL.md:101-118 SKILL.md:118-124 SKILL.md:124-132 SKILL.md:132-138 SKILL.md:138-152 SKILL.md:152-160 SKILL.md:160-171 SKILL.md:171-175 SKILL.md:175-190 SKILL.md:190-194 SKILL.md:194-227 SKILL.md:227-233 SKILL.md:233-239 SKILL.md:239-243 SKILL.md:243-256 SKILL.md:256-260 SKILL.md:260-268
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/chriswiles-react-ui-patterns/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/chriswiles-react-ui-patterns?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/chriswiles-react-ui-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/chriswiles-react-ui-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/chriswiles-react-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形式の引用
ChrisWiles. (2026). react-ui-patterns security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/chriswiles-react-ui-patterns/audits/9BibTeX形式の引用
@techreport{chriswiles-chriswiles-react-ui-patterns-2026,
author = {ChrisWiles},
title = {react-ui-patterns security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/chriswiles-react-ui-patterns/audits/9},
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: "react-ui-patterns security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "ChrisWiles"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/chriswiles-react-ui-patterns/audits/9"
identifiers:
- type: other
value: "skillstore:chriswiles-react-ui-patterns:audit:9"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Skillstore スコアが最高
作者 / ソース Skillstore スコア 証拠の信頼度 Skillstore 利用状況 更新済み
chriswiles-react-ui-patterns
Skillstore スコア 79
証拠の信頼度 高
Skillstore 利用状況 12
更新済み
2026-09-09
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 55
アーキテクチャ
85
保守性
87
コンテンツ
70
コミュニティ
91
仕様準拠
作成できるもの
データフェッチビューを安定させる
React画面で古いスピナー、不足している空状態、不明確な再試行パスを避けるために、これらのパターンを使用します。
非同期UI要件をレビューする
リリース前にローディング、エラー、空状態をレビューする際にチェックリストを適用します。
プロダクトフォームのフィードバックを標準化する
フォームとボタンのパターンを使用して、送信を明確で、無効化され、回復可能な状態に保ちます。
これらのプロンプトを試す
コンポーネントをチェックする
react-ui-patternsスキルを使用して、このReactコンポーネントをレビューしてください。不足しているローディング、エラー、空、ボタンの状態を特定してください。
データビューを改善する
react-ui-patternsのガイダンスに従って、このデータフェッチビューをリファクタリングしてください。再フェッチ中もキャッシュ済みデータを保持し、明確な復旧パスを表示してください。
フォーム送信状態を設計する
react-ui-patternsを使用して、このフォームの非同期状態を設計してください。バリデーションフィードバック、送信ボタンの無効化動作、成功フィードバック、失敗時の復旧を含めてください。
ワークフローを監査する
react-ui-patternsを使用して、このReactワークフローを監査してください。ローディング、エラー、空データ、ミューテーションにわたるUI状態のギャップを優先順位付きリストで作成してください。
ベストプラクティス
- 表示できる有用なデータがない場合にのみローディングインジケーターを表示します。
- 意味のあるすべてのエラーについて、フィードバックと復旧パスを提示します。
- 非同期操作の進行中はアクショントリガーを無効化します。
回避
- バックグラウンド再フェッチ中に、キャッシュ済みコンテンツを全面スピナーで置き換える。
- ユーザー向けの失敗状態を何も表示せずにエラーをログ出力する。
- 保留中のミューテーション中に送信ボタンをアクティブなままにする。
よくある質問
このスキルは完全なReactコンポーネントを生成しますか？
いいえ。Claude、Codex、Claude Codeがコンポーネントを改善するのに役立つパターンと例を提供します。
GraphQLミューテーション状態に役立ちますか？
はい。ローディング、成功、エラー、送信ボタンの無効化状態に関するミューテーションガイダンスが含まれています。
デザインシステムを置き換えますか？
いいえ。状態の動作とインタラクションの期待値を定義することで、デザインシステムを補完します。
Web Reactに限定されていますか？
ほとんどのガイダンスはReact UI作業に適用されます。一部のリスト例はReact Nativeパターンにも適合します。
空状態を監査できますか？
はい。コレクション、検索、初回利用時の空状態に関する要件が含まれています。
コマンドを実行したり依存関係をインストールしたりしますか？
いいえ。このスキルはドキュメントのみで、実行可能なスクリプトは含まれていません。
開発者情報
作成者
ChrisWilesライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
dd4a3ef9f20ddf38830950b4bb713df96b431fd6
メンテナンスの新しさ
2026/7/18
利用状況
8 ダウンロード · 188 閲覧
ファイル構成
📄 SKILL.md
ChrisWiles のその他のスキル
すべて表示📦
formik-patterns
79信頼性の高いFormikフォームを構築する
Formikフォームでは、バリデーション、エラー表示、送信状態ロジックが繰り返されがちです。このスキルは、再利用可能なフィールド、Yupスキーマ、GraphQL送信、編集フォーム、multi-stepフローのための簡潔なパターンを提供します。
コーディング＆開発 表示
📦
core-components
79一貫性のあるコアUIコンポーネントを構築する
一貫性のないUIコンポーネントはプロダクト開発を遅らせ、見た目のばらつきを生みます。このスキルは、Claude、Codex、Claude Code が共有トークン、レイアウト、コンポーネントパターンを使うための指針を提供します。
コーディング＆開発 表示
📦
testing-patterns
78再利用可能なパターンでより良いJestテストを書く
ユニットテストは、セットアップやテスト実装の詳細を重複させると脆くなりがちです。このスキルは、ファクトリ、モック、レンダーヘルパー、TDDのための再利用可能なJestパターンを提供します。
コーディング＆開発 表示
📦
graphql-schema
78生成された型を使って GraphQL 操作を作成
GraphQL クライアント作業では、重複した操作、弱いエラーハンドリング、古くなった生成型が発生しがちです。このスキルは、一貫した .gql ファイル、Apollo 生成フック、codegen 手順、mutation UI の安全策をガイドします。
コーディング＆開発 表示
関連スキル
すべて表示📦
senior-fullstack
82シニアのガイダンスでフルスタックアプリを構築
作成者 alirezarezvani
フルスタックプロジェクトでは、一貫したセットアップ、アーキテクチャ選定、品質チェックが必要になることがよくあります。このスキルは、React、Next.js、Node.js、GraphQL、PostgreSQL の作業向けにスクリプトとリファレンスを提供します。
コーディング＆開発 表示
📦
vercel-react-view-transitions
82React View Transitions を実装する
作成者 vercel-labs
React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。
コーディング＆開発 表示
📦
react-dev
82型安全なReactコンポーネントを構築
作成者 softaworks
React TypeScript の作業では、event、hook、route の正確な型が必要になることがよくあります。このスキルは、型付きcomponents、React 19 APIs、routing に焦点を当てたパターンを提供します。
コーディング＆開発 表示
📦
senior-frontend
81本番環境対応のフロントエンド機能を構築
作成者 davila7
フロントエンドチームには、プロジェクト間で一貫したReactおよびNext.jsのガイダンスが必要です。このスキルは、フロントエンド分析のためのリファレンスワークフロー、品質プラクティス、ヘルパースクリプトを提供します。
コーディング＆開発 表示
📦
nextjs-optimization
80Next.js パフォーマンスの最適化
作成者 Atman36
Next.js アプリケーションは、大きなバンドル、弱いキャッシュ、最適化されていないメディアによって遅くなることがあります。このスキルは、Claude、Codex、Claude Code が本番アプリ向けに的を絞ったパフォーマンス改善を行えるよう支援します。
コーディング＆開発 表示
📦
vercel-react-best-practices
80React と Next.js のパフォーマンス最適化
作成者 vercel-labs
React と Next.js アプリは、ウォーターフォール、大きなバンドル、回避可能な再レンダリングによって速度が低下しがちです。このスキルは、エージェントがより安全にパフォーマンス重視の変更を行うための具体的なルールを提供します。
コーディング＆開発 表示