📦
tailwind-css
78レスポンシブな Tailwind CSS インターフェイスを構築する
Tailwind プロジェクトは、コンポーネント間やブレークポイント間で一貫性を失いやすくなります。このスキルは、レスポンシブなユーティリティクラス、テーマ設定、ダークモード、アクセシビリティチェックをガイドします。
コーディング＆開発 表示
スキル react-component
📦
react-component
コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス
型付き React コンポーネントを構築する
React コンポーネントの作業では、一貫した構造、hooks、tests、stories、アクセシビリティチェックが必要になることがよくあります。このスキルは、Claude、Codex、Claude Code が型付きでテスト可能な React コンポーネントを作成できるように導きます。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "react-component" from https://skillstore.io/skills/awais68-react-component.md and its manifest at https://skillstore.io/api/skills/awais68-react-component/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「react-component」を使用しています。 loading and error states を備えた student KPI card を構築してください。
期待される結果:
型付き KPI card component、state handling、accessibility labels、焦点を絞った tests、Storybook variants の計画。
「react-component」を使用しています。 再利用可能な attendance data hook を作成してください。
期待される結果:
typed data、loading、error、refetch behavior、dependency guidance、retry expectations を備えた custom hook design。
「react-component」を使用しています。 デザインシステム向けの modal component を文書化してください。
期待される結果:
default、open、loading、error、keyboard navigation states を網羅する Storybook-oriented outline。
セキュリティ監査
安全v8 • 2026/7/6 バージョン別レポートを開く
All static external command alerts are false positives caused by markdown code fences and inline React or TypeScript identifiers in SKILL.md. The network alerts are documentation reference links only, with no automated request or data transmission behavior. No prompt injection attempt or malicious semantic intent was found.
1
スキャンされたファイル
300
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
⚙️ 外部コマンド (25)
SKILL.md:27-42 SKILL.md:42-47 SKILL.md:47-48 SKILL.md:48-52 SKILL.md:52-77 SKILL.md:77-80 SKILL.md:80-81 SKILL.md:81-82 SKILL.md:82-84 SKILL.md:84 SKILL.md:88-121 SKILL.md:121-124 SKILL.md:124-132 SKILL.md:132-161 SKILL.md:161-165 SKILL.md:165-174 SKILL.md:174-180 SKILL.md:180-187 SKILL.md:187-214 SKILL.md:214-238 SKILL.md:238-241 SKILL.md:241 SKILL.md:252-267 SKILL.md:267-271 SKILL.md:271-292
🌐 ネットワークアクセス (4)
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/awais68-react-component/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/awais68-react-component?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/awais68-react-component?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/awais68-react-component/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/awais68-react-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形式の引用
Awais68. (2026). react-component security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/awais68-react-component/audits/8BibTeX形式の引用
@techreport{awais68-awais68-react-component-2026,
author = {Awais68},
title = {react-component security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/awais68-react-component/audits/8},
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-component security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Awais68"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/awais68-react-component/audits/8"
identifiers:
- type: other
value: "skillstore:awais68-react-component:audit:8"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 55
アーキテクチャ
85
保守性
87
コンテンツ
71
コミュニティ
83
仕様準拠
作成できるもの
再利用可能な UI コンポーネントを作成する
明確な props、loading states、error states、アクセシブルなインタラクションを備えた型付きコンポーネントを構築します。
コンポーネントテストを標準化する
React コンポーネント向けに render、interaction、loading、error、accessibility tests を計画します。
デザインシステムのバリアントを文書化する
component states、props、visual variants の Storybook カバレッジを作成します。
これらのプロンプトを試す
初心者向けコンポーネント
[purpose] のための React functional component を作成してください。TypeScript props、loading and empty states、accessibility basics、短い usage note を含めてください。
インタラクティブフォーム
[workflow] のための React form component を構築してください。typed values、validation behavior、submit handling、error display、React Testing Library test cases を定義してください。
再利用可能な Custom Hook
[data or behavior] のための custom hook を設計してください。typed return values、loading and error states、retry behavior、cleanup rules、component usage guidance を含めてください。
高度なコンポーネントシステム
[feature] のための composed React component system を作成してください。props design、subcomponents、performance choices、accessibility requirements、tests、Storybook stories を網羅してください。
ベストプラクティス
- 実装前に prop interfaces を定義し、コンポーネントを 1 つの責任に集中させます。
- 非同期 UI flows には loading、error、empty、success states を含めます。
- 各コンポーネントに interaction tests と Storybook variants を組み合わせます。
回避
- 新しい React component work では class components を使用しないでください。
- side effects の hook dependencies や cleanup を省略しないでください。
- プロジェクトが i18n readiness を必要とする場合、user-facing text をハードコードしないでください。
よくある質問
このスキルは backend code を生成しますか？
いいえ。React UI components、hooks、tests、Storybook documentation に焦点を当てています。
TypeScript をサポートしていますか？
はい。このガイダンスでは、明示的な TypeScript props と型付き custom hook results が必要です。
アクセシビリティに役立ちますか？
はい。ARIA labels、keyboard support、WCAG 2.1 AA considerations を求めます。
tests を作成できますか？
はい。React Testing Library を使用した Jest または Vitest tests を求めます。
Storybook は必須ですか？
component documentation と variant coverage が有用な場合、Storybook files を推奨します。
network requests を行いますか？
いいえ。このスキルは markdown guidance であり、参照として documentation links のみを含みます。
開発者情報
作成者
Awais68ライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
c4231f0153ccd2a2ed62274c5a372bf8f2386d3f
メンテナンスの新しさ
2026/7/18
利用状況
6 ダウンロード · 263 閲覧
ファイル構成
📄 SKILL.md
Awais68 のその他のスキル
すべて表示📦
api-client
77型付き API クライアントを構築する
API クライアントには、一貫した認証、キャッシュ、検証、エラーハンドリングが必要です。このスキルは、TanStack Query、Axios、JWT インターセプター、Zod パース、オフライン動作をガイドします。
コーディング＆開発 表示
📦
auth-integration
77安全な Next.js 認証を実装する
認証作業は仕様が不十分になりやすく、安全に実装するのが難しい領域です。このスキルは、フォーム、セッション、保護されたルート、ロールチェックについて Claude、Codex、Claude Code をガイドします。
セキュリティ＆コンプライアンス 表示
📦
sqlmodel-crud
77SQLModel CRUD レイヤーの構築
リレーションシップや非同期セッションが関わる場合、SQLModel モデルと CRUD コードの設計には時間がかかることがあります。このスキルは、Claude、Codex、Claude Code に対して、モデル、クエリ、リレーションシップ、データベース設定をガイドします。
コーディング＆開発 表示
📦
data-validation
76Pydantic と Zod でデータを検証する
検証ルールがレイヤー間でコピーされると、API とフォームはしばしばずれていきます。このスキルは、Claude、Codex、Claude Code に、共有スキーマ、明確なエラー、より安全な入力処理のための実践的なパターンを提供します。
データ＆アナリティクス 表示
📦
fastapi-app
76認証とモデルを備えたFastAPIバックエンドの構築
FastAPIプロジェクトでは、ルート、スキーマ、認証、データベースセッション、CORSに一貫した構造が必要です。このスキルは、Claude、Codex、Claude Codeが保守しやすいバックエンドパターンを作成できるようにガイドします。
コーディング＆開発 表示
関連スキル
すべて表示📦
react-dev
82型安全なReactコンポーネントを構築
作成者 softaworks
React TypeScript の作業では、event、hook、route の正確な型が必要になることがよくあります。このスキルは、型付きcomponents、React 19 APIs、routing に焦点を当てたパターンを提供します。
コーディング＆開発 表示
📦
senior-frontend
81本番環境対応のフロントエンド機能を構築
作成者 davila7
フロントエンドチームには、プロジェクト間で一貫したReactおよびNext.jsのガイダンスが必要です。このスキルは、フロントエンド分析のためのリファレンスワークフロー、品質プラクティス、ヘルパースクリプトを提供します。
コーディング＆開発 表示
📦
react-nextjs-development
80モダンなReactおよびNext.jsアプリを構築する
作成者 sickn33
ReactおよびNext.jsプロジェクトでは、ルーティング、コンポーネント、スタイリング、データ、フォーム、テスト、デプロイ全体で一貫したセットアップ方針が必要になることがよくあります。このスキルは、Claude、Codex、Claude Codeに、モダンなフロントエンドアプリケーションを計画および構築するためのフェーズベースのワークフローを提供します。
コーディング＆開発 表示
📦
convex-create-component
80Convexコンポーネントを構築する
作成者 get-convex
Convexコンポーネントには、明確なデータ所有権、ラッパー関数、生成された型が必要です。このスキルは、Convexプロジェクトにおけるコンポーネントの設計、実装、配線、検証をガイドします。
コーディング＆開発 表示
📦
playwright-testing
86Playwrightテストカバレッジの改善
作成者 C0ntr0lledCha0s
Playwrightスイートは、設定、ロケーター、フィクスチャに一貫性がないと不安定になることがあります。このスキルは、信頼性の高いブラウザテスト、デバッグ、再利用可能なページオブジェクトのための実践的なパターンを提供します。
コーディング＆開発 表示
📦
starknet-js
83starknet.js で Starknet アプリを構築
作成者 internet-court
Starknet 統合では、プロバイダー、アカウント、トランザクション、手数料を正確に処理する必要があります。このスキルは、Claude、Codex、Claude Code に実践的な starknet.js v9 パターンを提供します。
コーディング＆開発 表示