# Basis Web Frontend > Use when building or changing the web UI of a Basis application — Thymeleaf + HTMX + Tailwind v4 + DaisyUI, listing tables with pinned header/footer where only the rows scroll, forms aligned with Tailwind utilities, and a custom error page so the user never hits the Whitelabel Error Page. Covers both visual identities and which one applies — the `caramellatte` theme with sidebar layout for internal authenticated systems, and the `basis-publico` theme following the institutional site (navy, orange accent, single centred column, measured WCAG contrast) for public login-free applications such as candidacy or citizen-facing forms. Activate for new screens, templates and fragments, table/listing work, form layout, error pages, theme/branding/colour choices, accessibility and contrast questions, or the Tailwind/DaisyUI build. - Skill: `basisti/basis-web-frontend` (Agent Skill, multi-file: 11 files) - Install (CLI): `npx skillmds@latest add basisti/basis-web-frontend` - Raw SKILL.md: https://api.skillmd.com/api/skills/basisti/basis-web-frontend/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: BasisTI (https://skillmd.com/u/basisti) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/basisti/basis-web-frontend --- # Basis Web Frontend Padrões da Basis para a UI de apps web. Pareada com `basis-spring-app` (aquela cobre a app Spring; esta cobre tudo que vive em `templates/` e no build de CSS/JS). ## 1. Stack e princípios - **Thymeleaf** para renderização server-side; **HTMX** para interatividade; **Tailwind v4** + **DaisyUI 5** para estilo; **List.js** quando a tabela precisa de ordenação/filtro client-side - **HTML é gerado no servidor.** Fragmento Thymeleaf trocado por HTMX é o default; JS solto só quando não há alternativa - **Nada de framework SPA** nesta stack (Angular é a alternativa quando o caso pede, e aí é outra decisão de projeto — ver `basis-spring-app`) - **Componente DaisyUI antes de utilitário Tailwind, utilitário antes de CSS próprio.** `