Fähigkeiten radix-ui-design-system
🎨

radix-ui-design-system

Sicher

Créer des interfaces utilisateur accessibles avec Radix

Créez des systèmes de conception accessibles et prêts pour la production avec les primitives Radix UI. Cette compétence fournit des modèles pour la personnalisation des composants headless, les stratégies de thèmes et l'architecture des composants composés pour les applications React.

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:

  • Composant Dialog complet avec les éléments Root, Trigger, Portal, Overlay, Content, Title, Description et Close
  • Classes CSS pour la superposition (positionnement fixe, flou d'arrière-plan), contenu (centré, ombre, coins arrondis)
  • Formulaire avec champs nom et email utilisant les éléments fieldset et label appropriés
  • Accessibilité: Piège de focus dans la modal, Échap pour fermer, aria-labelledby et aria-describedby

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

Erwartetes Ergebnis:

  • DropdownMenu.Root avec les éléments Menu imbriqués, Separators et CheckboxItems
  • RadioGroup pour les options de sélection unique avec indicateurs visuels
  • Navigation au clavier: Touches fléchées pour naviguer, Entrée pour sélectionner, Échap pour fermer
  • Composant SubMenu pour les menus déroulants imbriqués avec positionnement approprié

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

Construction d'un système de conception personnalisé

Créez un système de conception spécifique à l'entreprise avec un contrôle total sur le style tout en maintenant la conformité à l'accessibilité.

Migration depuis des bibliothèques stylisées

Remplacez les bibliothèques de composants stylisés lourds par des primitives Radix légères tout en préservant les API des composants.

Ajout d'accessibilité aux composants existants

Améliorez les composants personnalisés avec la navigation au clavier, la gestion du focus et le support des lecteurs d'écran.

Probiere diese Prompts

Implémentation de dialogue basique 
Créez un composant de dialogue modal en utilisant la primitive Dialog de Radix UI. Incluez le bouton déclencheur, la superposition, le contenu avec titre et description, et le bouton fermer. Utilisez les variables CSS pour le thème.
Menu déroulant avec sous-menus 
Construisez un menu déroulant complet en utilisant DropdownMenu de Radix. Incluez des éléments réguliers, des séparateurs, des éléments à case à cocher pour la multi-sélection, des groupes radio pour la sélection unique, et des sous-menus imbriqués.
Configuration du système de thèmes 
Configurez un système de thèmes en utilisant les propriétés personnalisées CSS. Incluez le support du mode clair et sombre, les jetons de couleurs sémantiques et l'échelle d'espacement. Montrez comment intégrer avec les composants Radix.
Composants de formulaire accessibles 
Créez un ensemble de composants de formulaire (input, checkbox, radio, select) en utilisant les primitives Radix. Incluez les labels appropriés, les états d'erreur avec aria-invalid, et le texte d'aide avec aria-describedby.

Bewährte Verfahren

  • Incluez toujours Dialog.Title et Dialog.Description pour la conformité à l'accessibilité
  • Utilisez la prop asChild pour attacher le comportement Radix à des composants stylisés personnalisés
  • Implémentez une gestion appropriée du focus: piégez le focus dans les modales, restaurez le focus à la fermeture
  • Utilisez le composant Portal pour afficher les dialogues en dehors de la hiérarchie DOM afin d'éviter les problèmes de z-index

Vermeiden

  • Override des attributs ARIA - Radix les gère automatiquement, les modifier casse l'accessibilité
  • Omettre le rendu du Portal - cause des problèmes de z-index et de contexte d'empilement avec les styles parents
  • Ne pas gérer l'état désactivé - fournissez toujours un retour visuel et un aria-disabled approprié
  • Utiliser les styles par défaut - Radix est headless, appliquez toujours vos propres styles

Häufig gestellte Fragen

Qu'est-ce que Radix UI?
Radix UI est une collection de primitives UI non stylisées et accessibles pour React. Il fournit le comportement et l'accessibilité sans aucun style, vous donnant un contrôle total sur l'apparence.
Comment Radix est-il différent des bibliothèques de composants comme Material UI?
Radix fournit des composants headless sans styles attachés. Les bibliothèques comme Material UI sont pré-stylisées. Radix vous donne une liberté complète sur le style tout en gérant l'accessibilité et le comportement.
Dois-je ajouter mes propres styles avec Radix?
Oui, les composants Radix n'ont pas de styles par défaut. Vous devez ajouter du CSS, des classes Tailwind ou utiliser une solution de style. Ceci est intentionnel pour un contrôle total de la personnalisation.
Radix UI est-il accessible prêt à l'emploi?
Oui, toutes les primitives Radix incluent des attributs conformes WAI-ARIA, la navigation au clavier et le support des lecteurs d'écran. Vous ne devez pas override ces attributs.
Puis-je utiliser Radix avec Tailwind CSS?
Oui, Radix fonctionne parfaitement avec Tailwind. De nombreux projets combinent les primitives Radix avec les classes Tailwind pour le style. La bibliothèque class-variance-authority est couramment utilisée pour la gestion des variantes.
Quelle est la différence entre Radix et shadcn/ui?
shadcn/ui est une collection de composants pré-construits basés sur Radix UI plus Tailwind CSS. Il fournit des composants copier-coller que vous pouvez posséder et modifier. Utilisez Radix pour un contrôle complet, shadcn/ui pour un prototypage rapide.

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