shadcn-ui
shadcn/uiインターフェースをより速く構築
モダンなReactチームには、セットアップ調査を繰り返すことなく、一貫したshadcn/uiコンポーネントが必要です。このスキルは、コンポーネント選定、インストール、テーマ設定、移行、品質チェックを支援します。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "shadcn-ui" from https://skillstore.io/skills/google-labs-code-shadcn-ui.md and its manifest at https://skillstore.io/api/skills/google-labs-code-shadcn-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「shadcn-ui」を使用しています。 ユーザーがshadcn/uiを使ったログインフォームを依頼する。
期待される結果:
- tabs、cards、inputs、labels、buttonsに推奨されるコンポーネント。
- インストール順序とファイル配置のガイダンス。
- コミット前のアクセシビリティと検証チェック。
「shadcn-ui」を使用しています。 ユーザーがアプリケーションテーマのカスタマイズを依頼する。
期待される結果:
- ライトモードとダークモード向けのテーマトークンチェックリスト。
- buttons、forms、layout components向けのバリアント計画。
- コントラスト、タイポグラフィ、レスポンシブ動作のレビュー手順。
「shadcn-ui」を使用しています。 ユーザーがChakra UIからshadcn/uiへの移行を依頼する。
期待される結果:
- 既存のプリミティブからshadcn/ui相当へのコンポーネントマッピング。
- 画面のリスクと依存関係の深さに基づく段階的ロールアウト計画。
- フォーム、モーダル、キーボード操作、見た目の同等性に関するテストチェックリスト。
セキュリティ監査
安全Static analysis produced many alerts, but reviewed evidence shows markdown examples, relative documentation links, TypeScript annotations, and local verification commands. No evidence found of prompt injection, data exfiltration, credential access, or hidden execution. The skill uses Bash, Write, web fetch, and shadcn tools for normal component setup, so install commands should remain explicit.
リスク要因
📁 ファイルシステムへのアクセス (3)
⚙️ 外部コマンド (59)
⚡ スクリプトを含む (2)
🌐 ネットワークアクセス (2)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/google-labs-code-shadcn-ui/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/google-labs-code-shadcn-ui?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/google-labs-code-shadcn-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/google-labs-code-shadcn-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/google-labs-code-shadcn-ui.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形式の引用
google-labs-code. (2026). shadcn-ui security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/google-labs-code-shadcn-ui/audits/4BibTeX形式の引用
@techreport{google-labs-code-google-labs-code-shadcn-ui-2026,
author = {google-labs-code},
title = {shadcn-ui security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/google-labs-code-shadcn-ui/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: "shadcn-ui security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "google-labs-code"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/google-labs-code-shadcn-ui/audits/4"
identifiers:
- type: other
value: "skillstore:google-labs-code-shadcn-ui:audit:4"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
google-labs-code-shadcn-ui
2026-09-09
giuseppe-trisciuoglio-shadcn-ui
2026-09-09
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
Reactアプリにコンポーネントを追加
Tailwindとプロジェクトのエイリアス規約を維持しながら、shadcn/uiコンポーネントをインストールして適用します。
デザインシステムを標準化
コピーしたshadcn/uiソースを基盤に、共有テーマトークン、バリアント、ラッパーコンポーネントを作成します。
別のUIキットから移行
Material UI、Chakra UI、Ant Designコンポーネントをshadcn/uiパターンへ段階的に置き換える計画を立てます。
これらのプロンプトを試す
Reactプロジェクトにshadcn/ui Buttonを追加するのを手伝ってください。インストール手順、imports、簡単な使用パターンを説明してください。
shadcn/ui向けにプロジェクト設定をレビューしてください。コンポーネントを追加する前に、Tailwind、components.json、aliases、cn utilityを確認してください。
shadcn/uiのcolors、typography、button variantsをカスタマイズする計画を作成してください。アクセシビリティとダークモード対応は維持してください。
現在のコンポーネントライブラリとshadcn/uiを比較してください。段階的ロールアウトに向けて、置き換え対応、移行順序、リスク、検証チェックを整理してください。
ベストプラクティス
- 標準コンポーネントにはshadcn CLIを使用し、コミット前にコピーされたソースをレビューしてください。
- コンポーネントをカスタマイズする際は、アクセシビリティ動作、ARIA属性、キーボード対応、フォーカスインジケーターを維持してください。
- コンポーネント変更後は、型チェック、lint、視覚的レビュー、アクセシビリティチェックを実行してください。
回避
- 必要な画面を決める前に、大量のコンポーネントセットをインストールしないでください。
- upstream diffsを確認せずに、カスタムコンポーネントの変更を上書きしないでください。
- スタイリングの問題を素早く解決するために、RadixやBase UIの動作を削除しないでください。
よくある質問
このスキルはshadcn/uiを自動的にインストールしますか？
Next.jsやViteで使用できますか？
カスタムレジストリに対応していますか？
アクセシビリティは維持されますか？
既存のデザインシステムを移行できますか？
公式のshadcn/uiドキュメントを置き換えるものですか？
開発者情報
作成者
google-labs-codeライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
30c73eac2afe762f6aa9c4553158769369d47351
メンテナンスの新しさ
2026/7/18
利用状況
6 ダウンロード · 443 閲覧
ファイル構成