Reporte del repositorio

Template Cuarzo, listo para agentes LLM

Un sistema de diseño en React 19, TanStack Start y Tailwind v4 convertido en un template que cualquier agente (Claude Code, OpenCode, Codex, Cursor) puede seguir sin alucinar: reglas escritas, comprobaciones automáticas y revisión obligatoria en el navegador.

npm run verify en verdeMedido el 2026-10-14commit 84381bf

En números

Métricas del repositorio

Cifras medidas automáticamente sobre el repositorio con npm run report:metrics en cada build.

Límite de líneas
77
por archivo de texto
Archivo propio más largo
75
líneas (excepciones aparte)
Archivos vigilados
249
código, guías, configs
Archivos en src/
125
TypeScript y TSX
Familias de la librería
6
módulos DDD de Cuarzo
Módulos del showcase
10
una página por módulo
Exports públicos
30
en src/index.ts
Tests e2e
61
escritorio y móvil
Archivos de test
10
en tests/e2e/
Guías para agentes
24
docs/agentes/, ≤77 líneas
Scripts npm
30
documentados en la guía 20
Excepciones de líneas
8
solo generados y plataforma

Entregables

Qué se hizo

Cada pestaña resume un tema con los archivos exactos donde vive.

Tres puntos de entrada equivalentes y 24 guías obligatorias con índice generado.

  • CLAUDE.md, OPENCODE.md y AGENTS.md

    Resumen de reglas no negociables para cada agente; CLAUDE.md carga automáticamente las guías 00 y 01.

    CLAUDE.mdOPENCODE.mdAGENTS.md

  • Guías obligatorias

    Protocolo paso a paso, recetas, errores frecuentes, mapa real del repo y definición de terminado; cada una ≤77 líneas.

    docs/agentes/

  • Índice automático

    INDICE.txt con título, propósito y líneas de cada guía; se pagina solo si crece y se verifica en el pre-commit.

    docs/agentes/INDICE.txtscripts/docs/build-index.mjs

Domain-Driven Design

Arquitectura

Dos contextos delimitados; cada módulo se divide en las capas que necesite y solo expone su index.ts.

Librería Cuarzo

src/components/cuarzo/

Se publica y Lovable la adjunta a otros proyectos. API pública: src/index.ts.

sharedactionsformsfeedbackcontainersdatanavigation

Showcase

src/showcase/

Este sitio. No se publica con la librería; cada página es un módulo y su ruta un adaptador.

sharedthemelayoutoverviewcolortypographyshapecatalogreport
CapaContienePuede importar
domain/Tipos, datos, reglas y funciones purasNada: sin React, sin window
application/Hooks y casos de usodomain, infrastructure, React
infrastructure/localStorage, fetch, matchMedia, DOMdomain
presentation/Componentes React (JSX)domain, application

Calidad

Cómo se verifica

Un solo comando ejecuta todo en orden y deja el resumen en logs/ultimo-resultado.txt.

PasoComandoCompruebaEstado
Índicesnpm run docs:indexINDICE.txt de las guías al díaCorrecto
Líneasnpm run check:linesNingún archivo propio supera 77 líneasCorrecto
DDDnpm run check:dddUbicación, pureza de domain, rutas sin JSX, data-testid y data-slotCorrecto
Lintnpm run lintESLint, capas DDD y max-linesCorrecto
Tiposnpm run typecheckTypeScript estricto sin erroresCorrecto
Buildnpm run buildBuild de producción (Cloudflare Workers)Correcto
E2Enpm run test:e2ePlaywright en escritorio y móvil, sin errores de consolaCorrecto
  • tests/e2e/showcase/navigation.spec.tsCada ruta carga, h1 único, menú activo
  • tests/e2e/showcase/theme.spec.tsTema claro/oscuro, persistencia y preferencia del sistema
  • tests/e2e/catalog/search.spec.tsBuscador del catálogo y anclas
  • tests/e2e/catalog/overlays.spec.tsModal: Escape, foco de vuelta, cerrar
  • tests/e2e/catalog/controls.spec.tsPaginación, pestañas con teclado, switch, checkbox, errores
  • tests/e2e/quality/testids.spec.tsdata-testid presentes y únicos en todas las rutas
  • tests/e2e/quality/responsive.spec.tsSin scroll horizontal a 375 px
  • tests/e2e/report/report.spec.tsEsta página: métricas, pestañas y guías
  • tests/e2e/quality/not-found.spec.tsSolo en el build estático: 404 propio y HTML sin JavaScript

Documentación

Guías para agentes LLM

Lectura obligatoria para cualquier agente. El índice docs/agentes/INDICE.txt se genera solo y cada guía tiene como máximo 77 líneas.

  1. 00 · Protocolo obligatorio para CADA tareadocs/agentes/00-protocolo-obligatorio.md
  2. 01 · Reglas no negociablesdocs/agentes/01-reglas-no-negociables.md
  3. 02 · Entorno: npm, dev server y puerto único 43177docs/agentes/02-entorno-npm-y-puerto.md
  4. 03 · Estructura Domain-Driven Design (obligatoria)docs/agentes/03-ddd-estructura.md
  5. 04 · Capas y dependencias permitidasdocs/agentes/04-ddd-capas-y-dependencias.md
  6. 05 · ¿Dónde va cada cosa? (tabla de decisión)docs/agentes/05-ddd-donde-va-cada-cosa.md
  7. 06 · Límite de 77 líneas por archivodocs/agentes/06-limite-77-lineas.md
  8. 07 · Cómo modularizar (patrones concretos)docs/agentes/07-como-modularizar.md
  9. 08 · data-testid: convención obligatoriadocs/agentes/08-test-ids.md
  10. 09 · Playwright por MCP (revisión interactiva)docs/agentes/09-playwright-mcp.md
  11. 10 · Playwright por scripts (Node/npm)docs/agentes/10-playwright-scripts.md
  12. 11 · Cómo escribir tests e2edocs/agentes/11-escribir-tests-e2e.md
  13. 12 · Logs en TXT para depurar rápidodocs/agentes/12-logs-txt.md
  14. 13 · Receta: componente nuevo de la libreríadocs/agentes/13-receta-nuevo-componente.md
  15. 14 · Receta: página o módulo nuevo del showcasedocs/agentes/14-receta-nueva-pagina.md
  16. 15 · Sistema de diseño Cuarzo (lo esencial)docs/agentes/15-sistema-de-diseno.md
  17. 16 · Errores frecuentes y alucinaciones típicasdocs/agentes/16-errores-frecuentes.md
  18. 17 · Definición de terminado (checklist final)docs/agentes/17-definicion-de-terminado.md
  19. 18 · Mapa del repositorio (rutas reales)docs/agentes/18-mapa-del-repo.md
  20. 19 · Qué se ejecuta solo (automatización y hooks)docs/agentes/19-automatizacion-y-hooks.md
  21. 20 · Referencia de comandos npmdocs/agentes/20-comandos-referencia.md
  22. 21 · Despliegue estático en Cloudflare Pagesdocs/agentes/21-despliegue-cloudflare-pages.md
  23. 22 · Las 10 heurísticas de Nielsen (obligatorias)docs/agentes/22-heuristicas-nielsen.md
  24. 23 · Páginas por plano: un LLM pequeño CONFIGURA, no programadocs/agentes/23-paginas-por-plano.md

Transparencia

Pendientes y riesgos

Lo que conviene revisar antes de dar el template por cerrado.

Vista previa de Lovable

Antes el servidor usaba el puerto 8080. Si la vista previa de Lovable deja de cargar, hay que volver a ese puerto para ese entorno.

Hooks y MCP probados fuera de los clientes

Los hooks se probaron con entradas simuladas y el MCP con JSON-RPC directo; conviene una sesión real de Claude Code y de OpenCode.

Dos lockfiles

package-lock.json para npm y bun.lock para Lovable. Al cambiar dependencias hay que actualizar ambos.

Fuentes desde Google Fonts

Public Sans e IBM Plex Mono se cargan desde un CDN; el sistema pide servirlas en local cuando lleguen los .woff2.

Cloudflare Pages

Cómo se publica

Este reporte es un sitio estático prerenderizado. Destino previsto: template-ui.benjacode.com.

  1. 1npm run build:pagesMide el repo, prerenderiza cada ruta a HTML y deja el sitio en dist-pages/.
  2. 2npm run preview:pagesSirve dist-pages/ en http://localhost:43177 como lo haría Cloudflare Pages.
  3. 3npm run test:pagesPasa los tests e2e contra el sitio estático ya compilado.
  4. 4npx wrangler pages deploy dist-pagesSubida directa a Cloudflare Pages (o conectar el repo con salida dist-pages).