Repolode
Enviar
shadcn-ui

shadcn-ui/lint

Un linter diseñado para agentes que permite definir reglas de estilo para sistemas de diseño con Tailwind y ofrece correcciones basadas en los componentes y el tema del proyecto.

Ver en GitHub
Estrellas
3,239
Forks
69
Issues abiertos
13
Último commit
anteayer

¿Qué es?

@shadcn/lint es un linter para proyectos con Tailwind v4 que aplica las reglas del sistema de diseño al código de UI. Puedes definir qué estilos se permiten, por ejemplo, restringir las sobrescrituras de className en un Button, bloquear valores arbitrarios como p-[13px] o rechazar colores sin token. Cuando se infringe una regla, el error explica qué salió mal y sugiere una alternativa basada en los componentes, las variantes y el tema del proyecto.

Se ejecuta como plugin de ESLint u Oxlint y es compatible con React, Vue y Svelte. No requiere shadcn/ui: funciona con componentes y temas personalizados de Tailwind, y puede leer imports de componentes a partir de prefijos, patrones regex o un archivo components.json.

Las reglas se pueden aplicar a componentes específicos mediante contracts, y los mensajes personalizados con marcadores de posición como {{sizes}} permiten indicar a los agentes exactamente qué tamaño, variante o archivo de tema deben usar. Después de hacer cambios, los agentes ejecutan el comando de lint para comprobar su trabajo.

Funciones clave

  • 01Restringe las sobrescrituras de className en componentes mediante contracts específicos para cada componente.
  • 02Bloquea valores arbitrarios y colores sin token para priorizar los tokens del tema.
  • 03Sugiere correcciones basadas en los tamaños, las variantes y los archivos de tema del proyecto.
  • 04Funciona con ESLint y Oxlint para React, Vue y Svelte.
  • 05No requiere shadcn/ui y puede leer imports de componentes personalizados.

Casos de uso

  • Evitar que los agentes de programación con IA cambien el estilo de componentes de UI compartidos en una base de código con Tailwind.
  • Aplicar el uso de espaciados y colores definidos en el tema en todo el sistema de diseño de un equipo.
  • Aplicar reglas de diseño a paquetes de componentes de terceros o de un monorepo sin bifurcarlos.

Inicio rápido

  1. 1

    Instala el paquete y ESLint con npm

    npm install -D @shadcn/lint eslint @typescript-eslint/parser
  2. 2

    Crea eslint.config.mjs con el plugin y la regla (consulta el README)

  3. 3

    Ejecuta el linter

    npx eslint .

Antes de usarlo

  • Solo funciona con proyectos de Tailwind v4.
  • Oxlint solo lee los bloques script de los archivos Vue y Svelte, no el marcado.
  • Requiere Node.js 20.19 o posterior.

Temas

#linter#tailwindcss#design-system#ai-agents#eslint#oxlint#react#vue#agents#ai

Preguntas frecuentes

¿Qué es lint?
Un linter diseñado para agentes que permite definir reglas de estilo para sistemas de diseño con Tailwind y ofrece correcciones basadas en los componentes y el tema del proyecto. @shadcn/lint es un linter para proyectos con Tailwind v4 que aplica las reglas del sistema de diseño al código de UI. Puedes definir qué estilos se permiten, por ejemplo, restringir las sobrescrituras de className en un Button, bloquear valores arbitrarios como p-[13px] o rechazar colores sin token. Cuando se infringe una regla, el error explica qué salió mal y sugiere una alternativa basada en los componentes, las variantes y el tema del proyecto.
¿lint es gratuito? ¿Qué licencia tiene?
lint es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿lint sigue mantenido?
Mantenimiento activo. El último commit de lint fue el 19 oct 2026.
¿Para qué puedo usar lint?
Evitar que los agentes de programación con IA cambien el estilo de componentes de UI compartidos en una base de código con Tailwind. Aplicar el uso de espaciados y colores definidos en el tema en todo el sistema de diseño de un equipo. Aplicar reglas de diseño a paquetes de componentes de terceros o de un monorepo sin bifurcarlos.
¿Cómo se instala lint?
Instala el paquete y ESLint con npm: npm install -D @shadcn/lint eslint @typescript-eslint/parser Crea eslint.config.mjs con el plugin y la regla (consulta el README) Ejecuta el linter: npx eslint .
¿Dónde consigo lint?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/shadcn-ui/lint

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados