radix-ui-design-system
アクセシブルな Radix UI デザインシステムを構築する
ヘッドレスプリミティブからアクセシブルなコンポーネントライブラリを構築するのは困難です。このスキルは、本番環境の React チーム向けに Radix UI のアーキテクチャ、テーマ設定、コンポーネントパターンをガイドします。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "radix-ui-design-system" from https://skillstore.io/skills/sickn33-radix-ui-design-system.md and its manifest at https://skillstore.io/api/skills/sickn33-radix-ui-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「radix-ui-design-system」を使用しています。 チームがアカウント設定用の再利用可能なモーダルパターンを必要としています。
期待される結果:
このスキルは、Dialog パーツ、フォーカス復元、タイトルと説明の要件、オーバーレイの挙動、テーマトークン、テストチェックを概説します。
「radix-ui-design-system」を使用しています。 デザイナーがプロダクトスイート全体で一貫したドロップダウンメニューを求めています。
期待される結果:
このスキルは、メニュー構造、項目の状態、キーボードナビゲーション、区切り、インジケーター、衝突処理、バリアント命名規則を提案します。
「radix-ui-design-system」を使用しています。 プラットフォームチームがコンポーネントスタイリングを標準化したいと考えています。
期待される結果:
このスキルは、CSS 変数、Tailwind クラス、CVA バリアントを比較し、保守しやすいトークンワークフローを推奨します。
セキュリティ監査
安全Static findings were reviewed against the skill content and are false positives from Markdown fences, documentation links, React lazy imports, and Radix keyboard examples. No prompt injection, data exfiltration intent, credential harvesting, or hidden execution behavior was found in the reviewed files.
リスク要因
📁 ファイルシステムへのアクセス (2)
⚡ スクリプトを含む (2)
⚙️ 外部コマンド (97)
🌐 ネットワークアクセス (8)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/sickn33-radix-ui-design-system/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/sickn33-radix-ui-design-system?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/sickn33-radix-ui-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-radix-ui-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/sickn33-radix-ui-design-system.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). radix-ui-design-system security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-radix-ui-design-system/audits/4BibTeX形式の引用
@techreport{sickn33-sickn33-radix-ui-design-system-2026,
author = {sickn33},
title = {radix-ui-design-system security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/sickn33-radix-ui-design-system/audits/4},
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: "radix-ui-design-system security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-radix-ui-design-system/audits/4"
identifiers:
- type: other
value: "skillstore:sickn33-radix-ui-design-system:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
コンポーネントライブラリを作成する
スロット、バリアント、テーマトークン、アクセシビリティ要件を備えた再利用可能な Radix ベースのコンポーネントを計画します。
アクセシビリティパターンを改善する
フォーカス処理、ARIA カバレッジ、キーボードサポート、スクリーンリーダーの文脈について、ダイアログ、ドロップダウン、フォームをレビューします。
スタイル付き UI キットから移行する
デザイントークンとインタラクション動作を維持しながら、意見の強いコンポーネントをヘッドレスな Radix プリミティブに置き換えます。
これらのプロンプトを試す
React アプリ向けの Radix UI ダイアログコンポーネントを設計してください。必要なパーツ、アクセシビリティチェック、テーマトークンの推奨事項を含めてください。
CSS 変数と Tailwind を使用した Radix UI のテーマ設定計画を作成してください。色、余白、radius、影、ダークモードの挙動を扱ってください。
計画中の Radix 複合コンポーネント API をレビューしてください。asChild の使用、制御された状態、アクセシビリティ責任、バリアント命名を確認してください。
ダイアログ、ドロップダウン、タブ、セレクト、ツールチップ向けの本番用 Radix UI インタラクションシステムを計画してください。テスト、移行、ドキュメント化のガイダンスを含めてください。
ベストプラクティス
- Radix のアクセシビリティプリミティブをそのまま保ち、期待される構造の周囲にスタイリングを追加します。
- コンポーネント固有のビジュアル上書きを追加する前に、CSS 変数またはトークンを使用します。
- リリース前に、キーボードナビゲーション、スクリーンリーダーラベル、フォーカス復元、コントラストをテストします。
回避
- 必須の Dialog title および description 要素を省略しないでください。
- 同じ Radix root 内で制御された状態と非制御の状態を混在させないでください。
- 同等のアクセシビリティサポートを置き換えずに、Radix のキーボード動作を上書きしないでください。
よくある質問
このスキルは完成済みの UI コンポーネントを生成しますか？
React プロジェクト専用ですか？
Tailwind ベースのデザインシステムに役立ちますか？
アクセシビリティテストの代わりになりますか？
shadcn/ui ワークフローをサポートできますか？
インストールコマンドを自動的に実行しますか？
開発者情報
作成者
sickn33ライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
9f814fc6a43fd99946f2da5e0df231c65a38bc76
メンテナンスの新しさ
2026/7/18
利用状況
14 ダウンロード · 105 閲覧
ファイル構成