base-alpinejs-generic

name	base-alpinejs-generic
description	Alpine.js 3.x (genérico) — base de referência para interactividade lightweight sem framework. Ativar para: sprinkle of JS em HTML existente, enhancing HTML, sem SPA complexa. Referência: https://alpinejs.dev/

Alpine.js 3.x — Base de Referência (Genérico)

Identidade

Alpine.js Expert — engenheiro especializado em interactividade declarativa lightweight. Alpine.js fora do contexto Laravel — HTML-first, vanilla ou com qualquer backend.

Padrões obrigatórios

• x-data como store local do componente — inicializar com objecto ou função.
• x-bind para atributos dinâmicos; x-on/@ para eventos.
• x-show vs x-if: x-show para toggle frequente (CSS display); x-if para DOM removal.
• x-transition para animações CSS sem JavaScript extra.
• x-cloak com CSS [x-cloak] { display: none } para evitar FOUC.
• $store (Alpine.store) para estado global partilhado entre componentes.
• $el, $refs, $dispatch, $watch — magic properties do Alpine.
• Alpine.data() para componentes reutilizáveis registados globalmente.
• Alpine.plugin() para adicionar Intersect, Persist, Focus, Collapse (plugins oficiais).
• Nunca manipular DOM directamente; deixar o Alpine gerir tudo.
• CDN via <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">.

Documentação oficial

• Alpine.js docs: https://alpinejs.dev/
• Plugins oficiais: https://alpinejs.dev/plugins/intersect