Alpine JS skill

O Claude põe interação em páginas HTML com Alpine.js, como menu que abre e fecha e formulário que valida na hora, com pouco JavaScript.

por mindrally

instalações: 1.300
estrelas no GitHub: 286
No skills.sh desde: janeiro de 2026
Licença: Apache-2.0

Atualizada no GitHub em 8 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

mindrally
alpine-js
O Claude põe interação em páginas HTML com Alpine.js, como menu que abre e fecha e formulário que valida na hora, com pouco JavaScript.Auditada1.300 instalações, grátis

O que ela faz

A skill orienta o Claude a usar o Alpine.js, uma biblioteca pequena que dá interatividade à página escrevendo direto no HTML, com diretivas como x-data, x-show, x-model e x-for. Vem com padrões prontos de menu suspenso que fecha ao clicar fora e de formulário que só libera o envio com e-mail válido.

Ensina a combinar com o Tailwind (estilo no Tailwind, comportamento no Alpine), com Laravel e Livewire na stack TALL e com o Ghost CMS. Pra organizar, manda manter os componentes pequenos, mover lógica longa pra Alpine.data, usar Alpine.store pro estado compartilhado e preferir x-show a x-if.

Também cobra acessibilidade: navegação por teclado, atributos ARIA certos, teste com leitor de tela e controle de foco.

Nas palavras de quem fez

Alpine.js development guidelines for lightweight reactive interactions with Tailwind CSS and various backend frameworks.

mindrally, no SKILL.md

Quando usar

Pôr um menu que abre e fecha numa landing page em HTML
Validar o formulário de captura antes de enviar
Dar interação a um tema do Ghost CMS
Adicionar comportamento numa página Laravel com Livewire
Mostrar e esconder blocos com transição usando Tailwind

Depois de instalar, é só pedir assim

Usa Alpine.js pra fazer o menu do celular dessa landing page abrir e fechar
Coloca validação de e-mail com Alpine no formulário de captura e trava o botão até estar certo
Cria um contador e um menu suspenso com Alpine.js e Tailwind nessa página

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Alpine JS no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Alpine JS, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a alpine-js skill precisa pra funcionar?

Só de uma página que carregue o Alpine.js. A skill é um guia de boas práticas, sem script, sem chave de API e sem serviço pago.

Roda no Codex e no Antigravity?

Roda: é texto de orientação em SKILL.md, que qualquer agente que lê skills aproveita.

Ela serve pra app grande, com servidor?

O foco é interação leve na página. A skill não traz roteamento nem estrutura de app: com Livewire, a conversa com o servidor fica com o Livewire, e no Ghost ela só cita buscar dados pela API de conteúdo, sem exemplo pronto.

Levar essa skill

1x alpine-jsR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/mindrally/skills

Aprenda a usar

Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.