Habilidades radix-ui-design-system
🎨

radix-ui-design-system

Seguro

Construye UI Accesible con Radix

Crea sistemas de diseño accesibles listos para producción con primitivos de Radix UI. Esta habilidad proporciona patrones para personalización de componentes headless, estrategias de tematización y arquitectura de componentes compuestos para aplicaciones React.

Soporta: Claude Codex Code(CC)
📊 70 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "radix-ui-design-system". Crea un componente dialog con campos de formulario usando Radix UI

Resultado esperado:

  • Componente Dialog completo con elementos Root, Trigger, Portal, Overlay, Content, Title, Description y Close
  • Clases CSS para overlay (posicionamiento fijo, backdrop blur), contenido (centrado, sombra, bordes redondeados)
  • Formulario con campos nombre y email usando elementos fieldset y label apropiados
  • Accesibilidad: Foco atrapado dentro del modal, Escape para cerrar, aria-labelledby y aria-describedby

Usando "radix-ui-design-system". Construye un menú desplegable con checkboxes y grupos radio

Resultado esperado:

  • DropdownMenu.Root con ítems de Menú anidados, Separadores y CheckboxItems
  • RadioGroup para opciones de selección única con indicadores visuales
  • Navegación por teclado: Flechas para navegar, Enter para seleccionar, Escape para cerrar
  • Componente SubMenu para dropdowns anidados con posicionamiento apropiado

Auditoría de seguridad

Seguro
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
Archivos escaneados
1,353
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
32
Comunidad
100
Seguridad
83
Cumplimiento de la especificación

Lo que puedes crear

Construyendo un Sistema de Diseño Personalizado

Crea un sistema de diseño específico para la empresa con control total sobre el estilizado manteniendo el cumplimiento de accesibilidad.

Migrando desde Librerías Estilizadas

Reemplaza librerías pesadas de componentes estilizados con primitivos ligeros de Radix preservando las APIs de componentes.

Añadiendo Accesibilidad a Componentes Existentes

Mejora componentes personalizados con navegación por teclado, gestión de foco y soporte para lectores de pantalla.

Prueba estos prompts

Implementación Básica de Dialog 
Crea un componente modal dialog usando el primitivo Dialog de Radix UI. Incluye botón trigger, overlay, contenido con título y descripción, y botón de cierre. Usa variables CSS para tematización.
Menú Desplegable con Submenús 
Construye un menú desplegable completo usando DropdownMenu de Radix. Incluye ítems regulares, separadores, ítems checkbox para selección múltiple, grupos radio para selección única, y sub-menús anidados.
Configuración de Sistema de Temas 
Configura un sistema de tematización usando propiedades personalizadas CSS. Incluye soporte para modo claro y oscuro, tokens de color semánticos, y escala de espaciado. Muestra cómo integrar con componentes Radix.
Componentes de Formulario Accesibles 
Crea un conjunto de componentes de formulario (input, checkbox, radio, select) usando primitivos de Radix. Incluye labels apropiados, estados de error con aria-invalid, y texto de ayuda con aria-describedby.

Mejores prácticas

  • Siempre incluye Dialog.Title y Dialog.Description para cumplimiento de accesibilidad
  • Usa la prop asChild para adjuntar comportamiento de Radix a componentes estilizados personalizados
  • Implementa gestión de foco apropiada: atrapa el foco en modales, restaura el foco al cerrar
  • Usa el componente Portal para renderizar dialogs fuera de la jerarquía DOM para evitar problemas de z-index

Evitar

  • Sobrescribir atributos ARIA - Radix gestiona estos automáticamente, cambiarlos rompe la accesibilidad
  • Omitir renderizado con Portal - causa problemas de z-index y contexto de apilamiento con estilos padre
  • No manejar estado deshabilitado - siempre proporciona feedback visual y aria-disabled apropiado
  • Usar estilos por defecto - Radix es headless, siempre aplica tu propio estilizado

Preguntas frecuentes

¿Qué es Radix UI?
Radix UI es una colección de primitivos de componentes de UI sin estilo y accesibles para React. Proporciona el comportamiento y accesibilidad sin ningún estilo, dándote control total sobre la apariencia.
¿Cómo es diferente Radix de librerías de componentes como Material UI?
Radix proporciona componentes headless sin estilos adjuntos. Librerías como Material UI vienen pre-estilizadas. Radix te da libertad completa sobre el estilizado mientras maneja accesibilidad y comportamiento.
¿Necesito añadir mis propios estilos con Radix?
Sí, los componentes de Radix no tienen estilos por defecto. Debes añadir CSS, clases de Tailwind, o usar una solución de estilizado. Esto es intencional para control de personalización completo.
¿Es Radix UI accesible fuera de la caja?
Sí, todos los primitivos de Radix incluyen atributos compatibles con WAI-ARIA, navegación por teclado y soporte para lectores de pantalla. No deberías sobrescribir estos atributos.
¿Puedo usar Radix con Tailwind CSS?
Sí, Radix funciona perfectamente con Tailwind. Muchos proyectos combinan primitivos de Radix con clases de Tailwind para estilizado. La librería class-variance-authority se usa comúnmente para gestión de variantes.
¿Cuál es la diferencia entre Radix y shadcn/ui?
shadcn/ui es una colección de componentes pre-construidos construidos sobre Radix UI más Tailwind CSS. Proporciona componentes de copiar-pegar que puedes poseer y modificar. Usa Radix para control completo, shadcn/ui para prototipado rápido.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

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

Ref.

main

Estructura de archivos

📁 examples/

📄 dialog-example.tsx

📄 dropdown-example.tsx

📄 README.md

📁 templates/

📄 component-template.tsx

📄 SKILL.md