Para agentes de IA
Una IA que no conoce la biblioteca escribe un date picker desde cero, inventa una clase roja para el
error y ordena la tabla en el cliente. Dos archivos lo resuelven sin que tengas que explicarlo de nuevo en cada conversación: la
referencia completa en texto plano y tres líneas en el AGENTS.md de tu proyecto.
llms.txt
La API entera en un archivo de texto, hecho para que lo lea un modelo y no una persona. Indícale a la IA que lo use:
https://juniorcarlini.github.io/tucano/llms.txt
Primero viene una sección por componente, con el camino declarativo por data-*, que es lo normal en un proyecto
Django. Después, la referencia completa: selector, atributos, todas las opciones con el comentario que las explica,
métodos, eventos, clases CSS y tokens. Esa parte se genera a partir del código en cada build — si una opción no está ahí,
no existe. Al final quedan las reglas de lo que no hay que hacer. La prosa del archivo está escrita en portugués, y
los nombres de la API — atributos, opciones, métodos, eventos — en inglés, así que un modelo la lee sin problema.
Todas las páginas de este sitio anuncian el archivo en el <head>, para las herramientas que lo buscan:
<link rel="alternate" type="text/plain" href="https://juniorcarlini.github.io/tucano/llms.txt">Por qué texto plano, y no esta documentación
Una página de documentación trae menú, demostraciones y scripts junto con la información, y la IA gasta contexto leyendo lo que no le sirve. El llms.txt es solo la API, en el orden en que se usa, y cabe entero en una conversación.
AGENTS.md en tu proyecto
Pega esto en el AGENTS.md de la raíz del proyecto que usa Tucano — o en el CLAUDE.md, en el
.cursorrules, donde tu herramienta lo busque. Es lo que hace que la IA elija la biblioteca en lugar de
escribir un componente desde cero.
## Interfaz
Este proyecto usa Tucano. No escribas desde cero date picker, select con búsqueda, color picker, upload, máscara, toast, tooltip, modal, panel lateral, acordeón, pestañas, menú desplegable, tabla, paginación ni editor de texto.
Referencia completa: https://juniorcarlini.github.io/tucano/llms.txtLa lista nombra los componentes con JavaScript, que son los que una IA más reescribe. Las piezas que son solo clases —
botón, aviso, etiqueta, cargando, línea de tiempo, casilla, opción e interruptor, menú lateral, rótulo y campo de formulario —
están en el mismo llms.txt, y la regla "no diseñes un segundo botón" cubre el resto.
Tres líneas bastan porque el trabajo está en el enlace. Si quieres que la IA acierte ya en la primera respuesta, sin abrir la referencia, añade los ejemplos que tu proyecto más usa:
## Interfaz
Este proyecto usa Tucano. No escribas desde cero date picker, select con búsqueda, color picker, upload, máscara, toast, tooltip, modal, panel lateral, acordeón, pestañas, menú desplegable, tabla, paginación ni editor de texto.
Referencia completa: https://juniorcarlini.github.io/tucano/llms.txt
<input data-tuc-datepicker data-mode="range">
<select data-tuc-select multiple>
<input data-tuc-mask="cpf-cnpj">
<input type="file" data-tuc-upload>
<button data-tuc-tip="..." class="tuc-btn is-primary">
Tucano.toast.success('Guardado');
await Tucano.confirm({ title: '¿Eliminar?' });
Tucano.drawer({ title: 'Filtros', side: 'right' });
El elemento nativo sigue siendo el dueño del valor: name, required y el getlist() de Django siguen funcionando. No lo sustituyas por estado solo en JS.Y el AGENTS.md de Tucano
El AGENTS.md del repositorio es para
quien va a tocar el código de la propia biblioteca: cómo ejecutarla, la estructura y las decisiones que no deben
revertirse sin motivo, cada una con el defecto que la motivó. Para usar Tucano en un proyecto no hace
falta — el llms.txt, sí.
Lo que la IA no debe hacer
Son las reglas que cierran el llms.txt. Cada una existe porque es el error que comete un modelo
cuando deduce en lugar de leer.
| No hagas | Haz | Por qué |
|---|---|---|
| Escribir date picker, select con búsqueda o color picker desde cero | Marcar el campo con data-tuc-datepicker, data-tuc-select, data-tuc-color | Es lo que la biblioteca existe para evitar |
| Usar la API en JavaScript por costumbre | Preferir los data-*; JS solo para opciones que no existen como atributo — disabledDates, atajos propios, onChange | El atributo funciona en la plantilla, sobrevive a HTMX y no necesita script |
Quitar el <select> nativo o el name del input | Dejar el elemento nativo en el formulario | Es en él donde vive el valor: required y getlist() dependen de él |
Dar estilo a las clases internas .tuc-*__* | Sobrescribir las variables --tuc-* en :root | Las clases internas las monta el script y el diseño sale de los tokens |
Escribir abrir(), tamanho, 'direita' | open/close/toggle, size, tone, side, items, actions; valores 'left', 'right', 'danger', 'success' | La API está toda en inglés, y una opción desconocida se ignora en silencio |
| Ordenar en el cliente una lista paginada | Dejar que la cabecera sea el <a> a ?sort= y ?dir=, con el orden en order_by() antes de Paginator | Ordenar la página de la pantalla produce un orden falso. data-sort-mode="client" solo para tablas pequeñas y sin paginación |
| Inventar una clase roja para el campo con error | aria-invalid="true" en el campo y el mensaje en .tuc-error | Es el atributo que anuncia el lector de pantalla, y Django 5 ya lo escribe |
| Abrir el panel cuando el campo recibe el foco | Dejar que se abra con ↓, Espacio, clic; Enter también en el select | Es la regla del <select> nativo y del ARIA APG |
Olvidar el hidden en el panel del dropdown escrito en la plantilla | <div class="tuc-dropdown" id="..." hidden> | Sin él el menú aparece en medio de la página hasta que se ejecuta el script. El <dialog> del modal y del panel lateral no lo necesita |
| Diseñar un segundo botón | .tuc-btn con is-outline, is-ghost, is-icon, is-sm — también dentro de una tabla | Clase propia solo para posicionar |
| Escribir el placeholder de un campo con máscara | Dejarlo vacío | Sale del formato: data-tuc-mask="cpf" ya nace con 000.000.000-00, y data-tuc-mask="brl" con R$ 0,00 |
Cargar desde el CDN con @latest | Fijar la versión: tucano@v0.37.2 | jsDelivr guarda @latest en caché mucho tiempo y sirve un build antiguo sin avisar |
Importar de tucano por npm y esperar que los campos se monten | Tucano.init(document), o importar tucano/auto | Por npm el auto-init no viene incluido, para que el empaquetador lleve solo lo que se importó; tucano/auto inicializa y escucha a HTMX como el script del CDN |
Leer e.target.name en el tucano:change del date picker | e.detail.iso, o el <input type="hidden"> de al lado | El date picker mueve el name al hidden con el valor ISO; el campo visible queda sin nombre. En el select, la máscara y el upload el name sigue en el elemento |
| Escribir a mano la validación de CPF o el formato de moneda o de fecha | Tucano.mask, Tucano.dates y Tucano.color | Son los mismos módulos que usan los componentes, expuestos como API: validateCpfCnpj, applyCurrency, format, parseUserInput, isDark |
| Montar un aviso flotante propio para la respuesta del servidor | Los messages de Django en <div data-tuc-toast>, o la cabecera HX-Trigger con tucano:toast | El toast ya se encarga de apilar, pausar con el foco y de las regiones que anuncia el lector de pantalla; el evento de HTMX se escucha solo |
Publicar lo que salió del editor directamente con |safe | Sanearlo antes en el servidor | El filtro del editor protege el editor, no la publicación |
Esperar que el HTML insertado por fetch o innerHTML se inicialice solo | Llamar a Tucano.init(node) sobre el fragmento nuevo | Lo automático cubre la carga y cada htmx:afterSwap; otro camino de inserción la biblioteca no lo ve |
Quitar data-tuc-ready | Dejar el atributo | Es lo que impide que autoInit monte el mismo campo dos veces |
En caso de duda, manda la referencia generada
Si un ejemplo en prosa y la "Referência completa" (referencia completa) del llms.txt no coinciden, vale la referencia: se extrae del código en cada build. Pide a la IA que copie el ejemplo de cada sección en lugar de deducir, y que compruebe cada opción en esa lista.