Fähigkeiten radix-ui-design-system
🎨

radix-ui-design-system

Sicher

Erstellen Sie barrierefreie Benutzeroberflächen mit Radix

Erstellen Sie produktionsreife, barrierefreie Design-Systeme mit Radix UI-Primitiven. Diese Skill bietet Muster für Headless-Komponentenanpassung, Theming-Strategien und Compound-Component-Architektur für React-Anwendungen.

Unterstützt: Claude Codex Code(CC)
📊 70 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "radix-ui-design-system". Create a dialog component with form fields using Radix UI

Erwartetes Ergebnis:

  • Vollständige Dialog-Komponente mit Root-, Trigger-, Portal-, Overlay-, Content-, Title-, Description- und Close-Elementen
  • CSS-Klassen für Overlay (feste Positionierung, Backdrop-Weichzeichner), Content (zentriert, Schatten, abgerundete Ecken)
  • Formular mit Name- und E-Mail-Feldern unter Verwendung korrekter fieldset- und label-Elemente
  • Barrierefreiheit: Fokus-Falle innerhalb des Modals, Escape zum Schließen, aria-labelledby und aria-describedby

Verwendung von "radix-ui-design-system". Build a dropdown menu with checkboxes and radio groups

Erwartetes Ergebnis:

  • DropdownMenu.Root mit verschachtelten Menüpunkten, Separatoren und CheckboxItems
  • RadioGroup für Einzelauswahl-Optionen mit visuellen Indikatoren
  • Tastaturnavigation: Pfeiltasten zum Navigieren, Enter zum Auswählen, Escape zum Schließen
  • SubMenu-Komponente für verschachtelte Dropdowns mit korrekter Positionierung

Sicherheitsaudit

Sicher
v1 • 2/24/2026

All static findings are false positives. The scanner incorrectly detected: (1) backticks in markdown as shell commands, (2) words like 'description' and 'destructive' as cryptographic algorithms, (3) relative markdown links as path traversal, (4) documentation URLs as hardcoded URLs, and (5) React import() syntax as dynamic code execution. This is a legitimate Radix UI documentation skill with no actual security concerns.

5
Gescannte Dateien
1,353
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
32
Community
100
Sicherheit
83
Spezifikationskonformität

Was du bauen kannst

Aufbau eines benutzerdefinierten Design-Systems

Erstellen Sie ein unternehmensspezifisches Design-System mit vollständiger Kontrolle über das Styling bei gleichzeitiger Einhaltung der Barrierefreiheit.

Migration von Styled-Bibliotheken

Ersetzen Sie schwere Styled-Component-Bibliotheken durch leichtgewichtige Radix-Primitive unter Beibehaltung der Komponenten-APIs.

Hinzufügen von Barrierefreiheit zu bestehenden Komponenten

Erweitern Sie benutzerdefinierte Komponenten mit Tastaturnavigation, Fokus-Management und Screenreader-Unterstützung.

Probiere diese Prompts

Basis-Dialog-Implementierung 
Create a modal dialog component using Radix UI Dialog primitive. Include trigger button, overlay, content with title and description, and close button. Use CSS variables for theming.
Dropdown-Menü mit Untermenüs 
Build a complete dropdown menu using Radix DropdownMenu. Include regular items, separators, checkbox items for multi-select, radio groups for single-select, and nested sub-menus.
Theme-System-Einrichtung 
Set up a theming system using CSS custom properties. Include light and dark mode support, semantic color tokens, and spacing scale. Show how to integrate with Radix components.
Barrierefreie Formular-Komponenten 
Create a set of form components (input, checkbox, radio, select) using Radix primitives. Include proper labels, error states with aria-invalid, and helper text with aria-describedby.

Bewährte Verfahren

  • Fügen Sie immer Dialog.Title und Dialog.Description für Barrierefreiheits-Compliance hinzu
  • Verwenden Sie die asChild-Eigenschaft, um Radix-Verhalten an benutzerdefinierte gestylte Komponenten anzuhängen
  • Implementieren Sie korrektes Fokus-Management: Fokus in Modals einschließen, Fokus beim Schließen wiederherstellen
  • Verwenden Sie die Portal-Komponente, um Dialoge außerhalb der DOM-Hierarchie zu rendern und z-index-Probleme zu vermeiden

Vermeiden

  • Überschreiben von ARIA-Attributen - Radix verwaltet diese automatisch, Änderungen brechen die Barrierefreiheit
  • Portal-Rendering überspringen - verursacht z-index- und Stacking-Context-Probleme mit Eltern-Stilen
  • Deaktivierte Zustände nicht behandeln - bieten Sie immer visuelles Feedback und korrektes aria-disabled
  • Standard-Stile verwenden - Radix ist headless, wenden Sie immer Ihr eigenes Styling an

Häufig gestellte Fragen

Was ist Radix UI?
Radix UI ist eine Sammlung von ungestylten, barrierefreien UI-Komponenten-Primitiven für React. Es bietet das Verhalten und die Barrierefreiheit ohne Styling und gibt Ihnen vollständige Kontrolle über das Erscheinungsbild.
Wie unterscheidet sich Radix von Komponenten-Bibliotheken wie Material UI?
Radix bietet Headless-Komponenten ohne angehängte Stile. Bibliotheken wie Material UI kommen fertig gestylt. Radix gibt Ihnen vollständige Freiheit beim Styling und übernimmt gleichzeitig Barrierefreiheit und Verhalten.
Muss ich bei Radix eigene Stile hinzufügen?
Ja, Radix-Komponenten haben standardmäßig keine Stile. Sie müssen CSS, Tailwind-Klassen oder eine Styling-Lösung hinzufügen. Dies ist für vollständige Anpassungskontrolle beabsichtigt.
Ist Radix UI ab Werk barrierefrei?
Ja, alle Radix-Primitive enthalten WAI-ARIA-konforme Attribute, Tastaturnavigation und Screenreader-Unterstützung. Sie sollten diese Attribute nicht überschreiben.
Kann ich Radix mit Tailwind CSS verwenden?
Ja, Radix funktioniert perfekt mit Tailwind. Viele Projekte kombinieren Radix-Primitive mit Tailwind-Klassen für das Styling. Die class-variance-authority-Bibliothek wird häufig für Variant-Management verwendet.
Was ist der Unterschied zwischen Radix und shadcn/ui?
shadcn/ui ist eine Sammlung vorgefertigter Komponenten, die auf Radix UI plus Tailwind CSS aufbauen. Es bietet Copy-Paste-Komponenten, die Sie besitzen und modifizieren können. Verwenden Sie Radix für vollständige Kontrolle, shadcn/ui für schnelles Prototyping.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/radix-ui-design-system

Ref

main

Dateistruktur

📁 examples/

📄 dialog-example.tsx

📄 dropdown-example.tsx

📄 README.md

📁 templates/

📄 component-template.tsx

📄 SKILL.md