Tucano v0.37.2

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.txt

La 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 hagasHazPor qué
Escribir date picker, select con búsqueda o color picker desde ceroMarcar el campo con data-tuc-datepicker, data-tuc-select, data-tuc-colorEs lo que la biblioteca existe para evitar
Usar la API en JavaScript por costumbrePreferir los data-*; JS solo para opciones que no existen como atributo — disabledDates, atajos propios, onChangeEl atributo funciona en la plantilla, sobrevive a HTMX y no necesita script
Quitar el <select> nativo o el name del inputDejar el elemento nativo en el formularioEs en él donde vive el valor: required y getlist() dependen de él
Dar estilo a las clases internas .tuc-*__*Sobrescribir las variables --tuc-* en :rootLas 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 paginadaDejar que la cabecera sea el <a> a ?sort= y ?dir=, con el orden en order_by() antes de PaginatorOrdenar 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 erroraria-invalid="true" en el campo y el mensaje en .tuc-errorEs el atributo que anuncia el lector de pantalla, y Django 5 ya lo escribe
Abrir el panel cuando el campo recibe el focoDejar que se abra con ↓, Espacio, clic; Enter también en el selectEs 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 tablaClase propia solo para posicionar
Escribir el placeholder de un campo con máscaraDejarlo vacíoSale 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 @latestFijar la versión: tucano@v0.37.2jsDelivr guarda @latest en caché mucho tiempo y sirve un build antiguo sin avisar
Importar de tucano por npm y esperar que los campos se montenTucano.init(document), o importar tucano/autoPor 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 pickere.detail.iso, o el <input type="hidden"> de al ladoEl 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 fechaTucano.mask, Tucano.dates y Tucano.colorSon 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 servidorLos messages de Django en <div data-tuc-toast>, o la cabecera HX-Trigger con tucano:toastEl 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 |safeSanearlo antes en el servidorEl filtro del editor protege el editor, no la publicación
Esperar que el HTML insertado por fetch o innerHTML se inicialice soloLlamar a Tucano.init(node) sobre el fragmento nuevoLo automático cubre la carga y cada htmx:afterSwap; otro camino de inserción la biblioteca no lo ve
Quitar data-tuc-readyDejar el atributoEs 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.