shadcn-ui-patterns
Erstellen Sie barrierefreie UI mit ShadCN-Mustern
Das Erstellen barrierefreier React-Komponenten erfordert das Verständnis von ShadCN-Mustern und Radix UI-Primitiven. Diese Fähigkeit bietet Best Practices für die Implementierung barrierefreier Modals, Formulare und anderer Komponenten unter Verwendung von TailwindCSS und Standards vom November 2025.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“shadcn-ui-patterns”。 Erstellen Sie einen Löschbestätigungsdialog mit ShadCN-Mustern
预期结果:
- Verwenden Sie die Dialog-Komponente mit korrekter Barrierefreiheitsstruktur
- Fügen Sie DialogTitle für Screenreader hinzu
- Fügen Sie DialogDescription für Kontext hinzu
- Verwenden Sie variant='destructive' auf dem Bestätigungs-Button
- Verwenden Sie DialogTrigger mit asChild für Fokus-Management
正在使用“shadcn-ui-patterns”。 Erstellen Sie ein Registrierungsformular mit E-Mail und Passwort
预期结果:
- Definieren Sie ein Zod-Schema mit E-Mail- und Passwortvalidierung
- Verwenden Sie die Form-Komponente mit react-hook-form-Integration
- Fügen Sie FormField für jede Eingabe mit FormLabel hinzu
- Zeigen Sie Validierungsfehler mit FormMessage an
- Fügen Sie einen Submit-Button mit type='submit' hinzu
安全审计
安全This is a pure prompt-based documentation skill containing only markdown content with ShadCN UI best practices. No executable code, network calls, file system modifications, or external commands detected. All 109 static findings are false positives caused by pattern-matching on documentation text and code examples.
风险因素
⚙️ 外部命令 (73)
质量评分
你能构建什么
Komponentenstandardisierung
Stellen Sie sicher, dass alle Teammitglieder konsistente ShadCN-Muster für Buttons, Dialoge und Formulare befolgen.
Formularvalidierungsmuster
Implementieren Sie typsichere Formulare mit React Hook Form mit Zod-Schemas und barrierefreier Fehlerbehandlung.
WCAG-Konformität
Erstellen Sie Komponenten, die die WCAG 2.1 AA-Anforderungen mit korrekten ARIA-Labels und Fokus-Management erfüllen.
试试这些提示
Create a Button component using ShadCN patterns. Include default, destructive, outline, ghost, and link variants with default, small, large, and icon sizes.
Build a Dialog component with DialogHeader, DialogTitle, and DialogDescription. Use DialogTrigger with asChild for proper focus management.
Create a login form using ShadCN Form components with React Hook Form and Zod validation. Include email and password fields with error messages.
Explain when to use Server Components vs Client Components for ShadCN components. Show examples of both patterns including use client directive usage.
最佳实践
- Verwenden Sie DialogTrigger immer mit asChild, um verschachtelte Button-Elemente zu vermeiden
- Definieren Sie Zod-Schemas für die Formularvalidierung, bevor Sie Formularkomponenten implementieren
- Wenden Sie Dark-Mode-Klassen mit dem TailwindCSS dark:-Präfix für Theming an
避免
- Vermeiden Sie es, Farben hartzucodieren, anstatt eingebaute Variant-Props zu verwenden
- Lassen Sie DialogHeader- oder DialogTitle-Komponenten nicht aus
- Verwenden Sie in der Produktion keine unkontrollierten Formulare ohne Validierung