addEventListener
Escutar clique de forma idiomática.
Biblioteca de snippets
Padrões curtos com tags — HTML, CSS, JavaScript, React e Web Components para colar e adaptar.
Trilha
Tags
Anel de foco visível
Estado :focus-visible sem remover acessibilidade.
attachShadow
Abrir Shadow DOM e injetar markup + CSS.
Badge em formato pill
Etiqueta arredondada para status e tags.
Botão primário
Estilo base de CTA com hover.
Card com sombra suave
Elevação leve para blocos de conteúdo.
CE no React
Usar a tag no JSX após registrar o elemento.
CE no Vue
Import side-effect + tag no template Vue.
Centralizar com Flex
Centro absoluto de um filho no container.
Centralizar com Grid
place-items centraliza em um único eixo de grade.
Checkbox customizado
Visual próprio mantendo o input nativo acessível.
classList em menu
Abrir/fechar menu mobile.
Componente funcional
Função que retorna JSX.
Compor com children
Slot de conteúdo no componente.
Container query simples
Estilo baseado na largura do componente.
createElement
Criar e inserir nós no DOM.
CSS no Shadow DOM
Estilos encapsulados com :host e ::slotted.
customElements.define
Registrar um Custom Element com nome hifenizado.
dataset
Ler data-* como camelCase.
Debounce (esqueleto)
Atrasar execução até o usuário pausar.
Desestruturar props
Assinatura limpa com destructuring.
Details / summary
Disclosure nativo sem JavaScript.
Dialog básico
Modal nativo com showModal().
Efeito glassmorphism
Vidro fosco com backdrop-filter.
Esconder na impressão
Oculte nav, botões e anúncios com @media print.
Espaço entre itens com gap
Substitua margins manuais por gap no flex/grid.
Export dual
Classe nomeada + register() + auto-register.
fetch JSON
async/await com checagem de ok.
Footer grudado no rodapé
Footer no fim da viewport mesmo com pouco conteúdo.
Full bleed em container estreito
Seção que escapa da coluna e ocupa 100vw.
Guarda no define
Evitar erro se o módulo for importado duas vezes.
Imagem object-fit cover
Preenche o quadro sem distorcer — crop inteligente.
Label + input
Associação explícita for/id.
Limitar texto em N linhas
Corte multilinha com -webkit-line-clamp.
Lista de chips
Grupo de tags compactas com wrap automático.
map com key
Lista com identificador estável.
Meta viewport
Viewport essencial para layout mobile.
Navegação sticky
Mantém a barra no topo durante o scroll.
observedAttributes
Reagir a mudanças de atributos HTML.
Open Graph (stub)
Metas básicas para prévia em redes.
package.json exports
Campo exports apontando para o ESM da lib.
Picture + source
Imagem responsiva por media query.
preventDefault
Cancelar submit ou navegação padrão.
Proporção de mídia
Mantém 16:9 (ou outra) sem hacks de padding.
querySelectorAll + loop
Iterar NodeList com forEach.
Radio customizado
Grupo de opções com aparência consistente e foco visível.
Render condicional
&& e ternário em JSX.
Reset mínimo
Começo limpo sem apagar toda a UA stylesheet.
Scroll suave
Âncoras com rolagem animada nativa.
Skeleton loading
Placeholder animado enquanto o conteúdo carrega.
Skip link
Pular navegação e ir ao conteúdo.
Slot básico
Projetar light DOM no shadow com <slot>.
Store Zustand
create + selector.
Texto com gradiente
Preencha o texto com linear-gradient via clip.
Texto só para leitores de tela
Visually hidden acessível (sr-only).
time + datetime
Data legível com valor machine-readable.
Tipos de button
submit, button e reset com intenção clara.
Toggle de classe
Alternar estado visual via classList.
Tooltip só com CSS
Dica ao hover/focus usando attr() e pseudo-elemento.
Truncar texto em uma linha
Ellipsis quando o texto ultrapassa a largura.
Underline animado no hover
Linha que cresce com transform — leve e acessível.
useEffect na montagem
Array de deps vazio + cleanup.
useMutation + invalidate
Mutar e refrescar o cache.
useQuery básico
queryKey + queryFn.
useState toggle
Boolean com setter funcional.
Variáveis para dark mode
Base de tema claro/escuro com custom properties.
Vite lib mode
Trecho de vite.config para library mode.