📦

shadcn

Name: shadcn
Author: shadcn

安全 ⚙️ 外部コマンド🌐 ネットワークアクセス📁 ファイルシステムへのアクセス

React-UIs mit shadcn-Komponenten erstellen

Entwickler haben Schwierigkeiten, konsistente und barrierefreie UI-Komponenten über React-Projekte hinweg zu pflegen. Diese Skill bietet CLI-Befehle, Kompositionsmuster für Komponenten und Styling-Regeln für den Aufbau professioneller UIs mit der shadcn/ui-Komponentenbibliothek.

対応: Claude Codex Code(CC)

📊 69 十分

スキルZIPをダウンロード

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

オンにして利用開始

テストする

「shadcn」を使用しています。 Eine Dialog-Komponente mit einem Formular darin hinzufügen

期待される結果:

Installieren: npx shadcn@latest add dialog
Kompositionsmuster für barrierefreien Dialog mit Formular

「shadcn」を使用しています。 Mein Formular-Layout beheben - Felder werden nicht korrekt beabstandet

期待される結果:

div-Wrapper durch FieldGroup + Field-Muster ersetzen
Korrekte Variante für Formular-Validierungsstatus anwenden

セキュリティ監査

安全

v1 • 3/13/2026

Audit complete. Static findings are false positives: backticks are markdown code formatting, URLs are documentation links, and cryptographic warnings are triggered by file paths. This is a legitimate UI component library skill with no actual security risks.

スキャンされたファイル

1,813

解析された行数

検出結果

総監査数

リスク要因

⚙️ 外部コマンド (884)

🌐 ネットワークアクセス (11)

cli.md:88 cli.md:145 cli.md:146 cli.md:149 cli.md:150 cli.md:245 customization.md:75 mcp.md:81 mcp.md:83 mcp.md:94 SKILL.md:231

📁 ファイルシステムへのアクセス (8)

cli.md:146 cli.md:150 mcp.md:22 mcp.md:22 rules/styling.md:3 rules/styling.md:59 rules/styling.md:104 SKILL.md:16

監査者: claude

品質スコア

アーキテクチャ

100

保守性

コンテンツ

コミュニティ

100

セキュリティ

仕様準拠

作れるもの

Komponenten zu einem React-Projekt hinzufügen

Verwenden Sie die CLI, um Button-, Formular-, Dialog- und andere UI-Komponenten zu einem Next.js- oder Vite-Projekt hinzuzufügen

Styling- und Kompositionsprobleme debuggen

Beheben Sie häufige Probleme mit z-index, Varianten, semantischen Farben und Komponenten-Nesting

Bewährte Komponentenmuster anwenden

Folgen Sie offiziellen Kompositionsregeln für Formulare, Dialoge, Tabs und andere komplexe Komponenten

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

Eine neue Komponente hinzufügen

Add the button and card components to my project using shadcn CLI. Show me the correct composition pattern for a settings card with a title, description, and action button.

Ein Komponentenproblem debuggen

Debug and fix a dialog that is not appearing above other elements. The z-index seems wrong on mobile.

Nach einer Komponente suchen

Search the shadcn registry for a table component and add it with the correct installation command.

Mit semantischen Tokens stylen

Convert this button from hardcoded bg-blue-500 to use semantic tokens from the shadcn theme. Use the correct variant pattern.

ベストプラクティス

Verwenden Sie immer den Projekt-Package-Runner (npx, pnpm dlx, bunx) basierend auf dem packageManager-Feld des Projekts
Bevorzugen Sie Komponentenkomposition gegenüber benutzerdefiniertem Markup (verwenden Sie Alert, Empty, Badge statt gestylter divs)
Verwenden Sie semantische Farb-Tokens (bg-primary, text-muted-foreground) statt roher Tailwind-Farben

回避

Überschreiben Sie nicht Komponentenfarben mit rohen Tailwind-Klassen - verwenden Sie stattdessen die variant-Prop
Verwenden Sie nicht space-x-* oder space-y-* - verwenden Sie flex mit gap-* für Layout
Erfinden Sie keine CLI-Flags, die nicht in der offiziellen Referenz dokumentiert sind