ui-styling · Componentes accesibles con shadcn y Tailwind, sin pelear con el CSS

Qué hace

Construye interfaces con shadcn/ui sobre Tailwind: diálogos, formularios, tablas y menús que ya vienen accesibles, con soporte de modo oscuro y temas.

Los componentes accesibles de verdad son difíciles de hacer bien a mano. Un menú que funcione con teclado y lector de pantalla tiene más detalle del que parece.

Para qué sirve

Tres cosas concretas que puedes hacer con ella.

Accesibles de fábrica

Teclado, foco y lectores de pantalla ya vienen resueltos.

Modo oscuro sin drama

Los temas quedan configurados, no hay que perseguir cada color a mano.

Consistencia

Todos los componentes siguen el mismo criterio en vez de ir cada uno por su lado.

Cómo se instala

Necesitas Claude Code andando. Si todavía no lo tienes, en recursos está la guía para instalarlo desde cero.

1 Agrega el marketplace de claudekit
```
/plugin marketplace add mrgoonie/claudekit-skills
```
Se escribe dentro de Claude Code, no en la terminal.
2 Instala el paquete que la trae
```
/plugin install web-dev-tools@claudekit-skills
```
También puedes clonar el repositorio y copiar sólo la carpeta que te interese.
3 Reinicia Claude Code

Se activa sola cuando le pidas algo que le corresponda. No hay que invocarla por su nombre.

Cómo se usa

No hay que invocarla por su nombre. Se activa sola cuando le pides algo que le corresponde, por ejemplo:

arma el formulario de contacto con shadcn y que soporte modo oscuro

De quién es

Esta skill la hizo claudekit, yo sólo la uso y la recomiendo. El código y la documentación completa están en su repositorio.

Ver el original ↗