Is squeleton-skill safe to install?

SaferSkills independently audited squeleton-skill (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.

CategoryWeightCategory scoreContribution

Securityprompt, exec, net, exfil, eval

35%

100

35.0 pts

Supply chainhash, typosquat, maintainer, lockfile

20%

100

20.0 pts

Maintenancestaleness, pinning, CI

15%

100

15.0 pts

TransparencySKILL.md, perms, README

15%

100

15.0 pts

Communityinstalls, verify, response

15%

100

15.0 pts

Findings & checks · 0 flagged

Securityscore 100 · 0 findings

✓—All security checks passedNo findings in this category for the latest scan.pass

Supply chainscore 100 · 0 findings

✓—All supply chain checks passedNo findings in this category for the latest scan.pass

Maintenancescore 100 · 0 findings

✓—All maintenance checks passedNo findings in this category for the latest scan.pass

Transparencyscore 100 · 0 findings

✓—All transparency checks passedNo findings in this category for the latest scan.pass

Communityscore 100 · 0 findings

✓—All community checks passedNo findings in this category for the latest scan.pass

The primary manifest — the file an agent reads to learn what this artifact does.

skills/squeleton-skill/skill.md · 1 file

skills/squeleton-skill/skill.md27.4 KB · Markdown

name: squeleton-skill

description: Lightweight CSS/JS boilerplate with 12-column grid, utility classes for spacing/flexbox/display, WOW/Animated animations, and integrated JS libraries (HTMX, VanJS, Embla, VenoBox, Modals, Toasts). Use for responsive layouts, spacing, modals, carousels and animations. Always prefer Squeleton classes and scripts over writing new CSS/JS.

Squeleton

Boilerplate leve e moderno que combina o melhor do CSS utilitário, grid responsivo, animações elegantes e bibliotecas JavaScript essenciais para criar interfaces rápidas, intuitivas e com manutenção simplificada.

Princípios Fundamentais

O nome "esqueleto" reflete seu propósito: fornecer a estrutura base para os layouts, evitando que CSS adicional seja escrito para cada nova classe, além de criar componentes HTML reutilizáveis que podem ser transportados entre os projetos que fazem uso do boilerplate.

Ao usar essa habilidade, sempre prefira usar e combinar as classes do Squeleton ao invés de criar CSS novo. Para necessidades que geralmente envolvem JavaScript, como Carrosséis, Modais, Ajax, Animações, Notificações Toasts, Reatividade e Cookies, o Squeleton conta com bibliotecas integradas que podem ser aproveitadas.

Perguntas antes de começar

Note que o Squeleton é deliberadamente agnóstico em relação a paleta de cores, família de fontes e estilos muito específicos. Esta neutralidade é uma decisão estratégica para maximizar sua portabilidade entre diferentes temas e projetos. O foco está em fornecer estrutura, grid e utilitários essenciais, deixando a identidade visual para o desenvolvedor definir.

Ao desenvolver com Squeleton, você pode estar trabalhando em um projeto que já tem o boilerplate integrado e faz uso de arquivos adicionais de estilos e scripts personalizados. Para saber de onde partir, sempre pergunte:

Este projeto já possui o Squeleton integrado ou devo incluir seus arquivos via CDN?
Este projeto já tem uma folha de estilos adicional (CSS) com cores, família de fontes e formatos exclusivos?
Este projeto já tem arquivos JavaScript personalizados além das bibliotecas do Squeleton?
Caso existam estilos (CSS) ou scripts (JS) personalizados, pode me indicar os arquivos para que eu os combine da melhor forma com a base do Squeleton?

Criando CSS ou JS personalizado

Somente crie CSS ou JavaScript novo quando não existir uma classe ou biblioteca do Squeleton que resolva a necessidade. Nestes casos:

Para CSS personalizado:

Se estiver trabalhando em um arquivo HTML, adicione uma tag <style> no <head> do documento
Se o projeto tiver um arquivo CSS personalizado separado, edite esse arquivo diretamente

Para JavaScript personalizado:

Se estiver trabalhando em um arquivo HTML, adicione uma tag <script> antes do fechamento do </body>
Se o projeto tiver um arquivo JS personalizado separado, edite esse arquivo diretamente
Sempre verifique se as bibliotecas integradas do Squeleton (HTMX, VanJS, Embla, etc.) já resolvem o problema antes de criar código novo

Instalação e Configuração

Via CDN

<!-- CSS (Head) -->
<link rel="stylesheet" href="https://cdn.squeleton.dev/squeleton.v4.min.css">

<!-- JavaScript (Head) -->
<script src="https://cdn.squeleton.dev/squeleton-main.v4.min.js"></script>

<!-- JavaScript (Footer) -->
<script src="https://cdn.squeleton.dev/squeleton-scripts.v4.min.js"></script>

Arquivos para Download

squeleton.v4.css – Versão completa para desenvolvimento (~35KB gzip) squeleton.v4.min.css – Versão minificada para produção (~25KB gzip) squeleton-main.v4.min.js – JavaScript principal (~12KB gzip) squeleton-scripts.v4.min.js – JavaScript secundário (~18KB gzip)

Consulta direta ao CSS: Em caso de dúvida sobre a existência de uma classe específica ou para ter uma visão completa da estrutura do framework, consulte diretamente o arquivo squeleton.v4.css (versão não-minificada). Isso permite verificar todas as classes disponíveis, seus valores exatos e a organização das media queries.

Estrutura Base CSS

O Squeleton define estilos base em elementos HTML que influenciam o comportamento de layout:

Reset e Box Model

*, ::after, ::before {
  box-sizing: border-box;
}

Body como Flex Container

body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

Main e Section como Flex Containers

main, section {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

Implicações Práticas

Importante: Como body, main e section já são flex containers com flex-direction: column:

Classes de alinhamento funcionam no eixo vertical por padrão:

f-items-center em <section> → centraliza horizontalmente (cross-axis)
f-justify-center em <section> → centraliza verticalmente (main-axis)

Para layout horizontal, adicione f-row:

   <!-- Itens lado a lado dentro de section -->
   <section class="f-row f-items-center f-justify-between">
       <div>Esquerda</div>
       <div>Direita</div>
   </section>

Elementos block dentro de section/main se empilham naturalmente (comportamento column).

Para centralizar conteúdo em hero sections:

   <!-- Correto: section já é flex-column, só precisa de alinhamento -->
   <section class="h-100vh f-justify-center f-items-center">
       <h1>Centralizado vertical e horizontalmente</h1>
   </section>

Não é necessário adicionar `d-flex` em <body>, <main> ou <section> — eles já são flex containers.

Sistema Responsivo Híbrido

O Squeleton usa uma abordagem híbrida única: Grid mobile-first + Utilitários desktop-first.

Breakpoints para Colunas de Grid (Mobile-First)

Colunas usam min-width - comece em mobile e expanda para desktop:

Breakpoint	Dimensão	Exemplo
`c-xs-{1-12}`	≤ 639px (base)	`c-xs-12`
`c-sm-{1-12}`	≥ 640px	`c-sm-6`
`c-md-{1-12}`	≥ 992px	`c-md-4`
`c-lg-{1-12}`	≥ 1200px	`c-lg-3`

⚠️ Sempre inicie com `c-xs-{número}`: A base mobile é obrigatória para o grid.

✅ Correto: c-xs-12 c-md-6 (100% mobile, 50% desktop)
❌ Errado: c-md-6 (falta o c-xs-)

Breakpoints para Classes Utilitárias (Desktop-First)

Diferente do grid, classes utilitárias usam @max-width - escreva para desktop, ajuste para mobile:

Sem prefixo = desktop (padrão)
Adicione md-, sm-, xs- para ajustar em telas menores
Não existe `lg-` porque desktop já é o padrão

Classes utilitárias criam uma "redução progressiva":

Breakpoint	Query CSS	Quando Aplica	Exemplo
`xs-`	`@media (max-width: 639px)`	0px até 639px	`xs-p-20-all`
`sm-`	`@media (max-width: 991px)`	0px até 991px	`sm-d-flex`
`md-`	`@media (max-width: 1199px)`	0px até 1199px	`md-w-50`
Sem prefixo	(sem @media)	Todos os tamanhos	`p-20-all`

⚠️ Comportamento de Sobrescrita por Especificidade:

Como todos usam @max-width, a ordem de especificidade é:

xs- sobrescreve sm-, md- e global em ≤639px (mais específico)
sm- sobrescreve md- e global em ≤991px
md- sobrescreve global em ≤1199px
Desktop (≥1200px) = usa classe global ou padrão CSS

Nota: Não existe lg- para classes utilitárias.

Três padrões de uso:

Sem breakpoint = global (base para todos os tamanhos)

   <div class="p-20-all d-flex w-50">
   <!-- Aplica em todos os tamanhos -->

Apenas breakpoints = redução progressiva do maior para menor

   <div class="sm-text-center">
   <!-- ≤991px: center | ≥992px: padrão (left) -->

   <div class="xs-text-center sm-text-center">
   <!-- ≤639px: center (xs mais específico)
        640-991px: center (sm)
        ≥992px: padrão (left) -->

Global + breakpoints = base global sobrescrita progressivamente

   <div class="text-left sm-text-center">
   <!-- ≤991px: center | ≥992px: left (global) -->

   <div class="p-20-all xs-p-30-all">
   <!-- ≤639px: 30px (xs) | ≥640px: 20px (global) -->

Grid System (12 Colunas)

<div class="container">      <!-- max-width: 1250px, centralizado -->
    <div class="row">        <!-- display: flex, flex-wrap: wrap -->
        <div class="c-xs-12 c-md-8">Conteúdo</div>
        <div class="c-xs-12 c-md-4">Sidebar</div>
    </div>
</div>

Colunas

Padrão: c-xs-{1-12}, c-sm-{1-12}, c-md-{1-12}, c-lg-{1-12}
Auto: c-auto (flex: 1 1 0%)
Centralizar: c-center (margin: 0 auto)

Containers

.container - max-width: 1250px, centralizado (padrão para conteúdo)
.container-fluid - width: 100% (para seções full-width)

Quando usar cada um:

container → Conteúdo centralizado (textos, cards, grids de produtos) - usar na maioria dos casos
container-fluid → Conteúdo sem margem lateral (galerias full-width, dashboards, mapas)

Gaps (espaçamento entre colunas)

O .row tem display flex e gap padrão de 30px. Use classes gap-{valor} para alterar:

.gap-0 - 0px
.gap-5 - 5px
.gap-10 - 10px
.gap-15 - 15px
.gap-20 - 20px
.gap-25 - 25px
.gap-30 - 30px (padrão do row)
.gap-35 - 35px
.gap-40 - 40px
.gap-45 - 45px
.gap-50 - 50px
Responsivos: {xs|sm|md}-gap-{0-50} (intervalo de 5)
Exemplos: xs-gap-10, sm-gap-20, md-gap-0

Nota: O gap aplica espaçamento em ambas as direções (horizontal e vertical) quando colunas quebram de linha.

Performance - Content Visibility (Lazy Rendering)

Classes .render-auto, .render-auto-small, .render-auto-large para otimizar containers below-the-fold usando content-visibility: auto. Aplicar em .container ou .container-fluid. Consulte references/grid-reference.md para detalhes.

Classes Utilitárias de Padding (p-) e Margin (m-)

Padrão: {p|m}-{valor}-{direção}

Direção	Aplicação
`-all`	Todos os lados
`-t`	Top
`-b`	Bottom
`-l`	Left
`-r`	Right
`-tb`	Top + Bottom
`-lr`	Left + Right

Valores: 0, 5, 10, 15, 20, 25, 30... até 100 (intervalo de 5)

Os números representam pixels diretos: p-20-all = padding de 20px
Responsivo: xs-, sm-, md- ou sem prefixo (desktop)

<div class="p-20-tb m-10-lr">Padding 20px vertical, margin 10px horizontal</div>
<div class="xs-p-10-all md-p-30-all">10px mobile, 30px tablet+</div>
<div class="m-50-b p-15-lr">Margem 50px abaixo, padding 15px lateral</div>
<div class="xs-m-5-t sm-m-15-t m-40-t">Margem top progressiva: 5px → 15px → 40px</div>

Margin Auto (centralização):

<div class="m-auto-lr">Centralizado horizontalmente</div>

Consulte references/padding-reference.md e references/margin-reference.md para mais informações e exemplos.

Classes Utilitárias de Width (w-)

Width em Pixels - w-{valor}px:

5px até 100px (intervalo de 5px)
100px até 300px (intervalo de 10px)
300px até 900px (intervalo de 50px)
Responsivos: md-w-{valor}px, sm-w-{valor}px, xs-w-{valor}px

Width Percentual - w-{valor} (sem unidade):

10% até 100% (intervalo de 5%)
Responsivos: md-w-{valor}, sm-w-{valor}, xs-w-{valor}

Width Especiais:

w-auto - largura automática
Responsivos: md-w-auto, sm-w-auto, xs-w-auto

Todas as classes w-*px incluem max-width: 100% automaticamente, evitando overflow horizontal em telas menores.

<!-- Largura fixa -->
<div class="w-250px">250px de largura</div>

<!-- Largura percentual responsiva -->
<div class="w-50 xs-w-100">50% desktop, 100% mobile</div>

<!-- Modal com largura controlada -->
<div class="w-600px">Modal centrado</div>

Consulte references/width-reference.md para lista completa de valores.

Classes Utilitárias de Height (h-)

Height em Pixels - h-{valor}px:

5px até 100px (intervalo de 5px)
100px até 300px (intervalo de 10px)
300px até 900px (intervalo de 50px)
Responsivos: md-h-{valor}px, sm-h-{valor}px, xs-h-{valor}px

Height Percentual e Especiais:

h-50 (min-height: 50%)
h-100 (min-height: 100%)
h-100vh (min-height: 100vh) - útil para hero sections
h-100dvh (min-height: 100dvh) - melhor para mobile
h-auto (min-height: auto)
Responsivos: md-h-{valor}, sm-h-{valor}, xs-h-{valor}

<!-- Hero section altura total -->
<section class="h-100vh f-items-center">Hero</section>

<!-- Cards com mesma altura -->
<div class="row">
    <div class="c-md-4"><div class="card h-100">Card 1</div></div>
    <div class="c-md-4"><div class="card h-100">Card 2</div></div>
</div>

<!-- Altura fixa -->
<div class="h-300px">300px de altura</div>

Consulte references/height-reference.md para lista completa de valores.

Classes Utilitárias de Display (d-)

<div class="d-none">Oculto</div>
<div class="d-block">Block</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline-block</div>
<div class="d-flex">Flex</div>
<div class="d-inline-flex">Inline Flex</div>
<div class="d-grid">Grid</div>
<div class="d-contents">Contents</div>
<div class="d-table">Table</div>
<div class="d-table-cell">Table Cell</div>
<div class="xs-d-none md-d-block">Oculto mobile, visível desktop</div>

Consulte references/display-reference.md para mais informações e exemplos.

Classes Utilitárias de Flexbox (f-)

Container:

.f-grid - display: flex + wrap + row (ideal para layouts)
.d-flex - display: flex
.f-row, .f-col - direção
.f-wrap, .f-nowrap - quebra de linha

Alinhamento:

.f-items-center, .f-items-start, .f-items-end - align-items (dentro de cada linha)
.f-justify-center, .f-justify-between, .f-justify-evenly - justify-content (eixo principal)
.f-content-center, .f-content-between, .f-content-around - align-content (múltiplas linhas)
.f-self-center, .f-self-start, .f-self-end - align-self individual

Crescimento:

.f-grow-1, .f-grow-2, .f-grow-3
.f-shrink-0, .f-shrink-1
.f-auto-max (flex: 1 1 auto)
.f-auto-min (flex: 0 1 auto)

Gaps flex: .f-gap-{0-50} (intervalo de 5)

<!-- Centralizar conteúdo -->
<div class="d-flex f-items-center f-justify-center h-100vh">
    Centralizado
</div>

<!-- Header com logo e menu -->
<header class="d-flex f-items-center f-justify-between p-20-tb">
    <div class="logo">Logo</div>
    <nav class="d-flex f-gap-20">...</nav>
</header>

Consulte references/flex-reference.md para mais informações e exemplos.

Classes Utilitárias de Border

Border Completo e por Lado:

.border-all - borda em todos os lados (1px solid)
.border-t, .border-b, .border-l, .border-r - borda em um lado
.border-tb - borda top e bottom
.border-lr - borda left e right

Border Width:

.border-w-{1-5} - espessura de 1px a 5px

Border Style:

.border-solid, .border-dashed, .border-dotted
.border-none, .border-hidden, .border-transparent

Remover Border:

.border-0-{t|b|l|r|all}
Responsivos: {xs|sm|md}-border-0-*

Border Radius:

.border-rd-{0-20} - 0px a 20px (1 em 1)
.border-rd-50, .border-rd-100 - circular (50%)
.border-rd-{valor}-t - só cantos superiores (valores pares: 0, 2, 4... 20)
.border-rd-{valor}-b - só cantos inferiores (valores pares: 0, 2, 4... 20)
Responsivos: {xs|sm|md}-border-rd-* (mesmos padrões acima)

Classes Utilitárias de Opacity

Opacity de Elemento:

.opacity-{1-9} - onde 1 = 0.15 e 9 = 0.9

Opacity Background (overlay absoluto):

.opacity-bg-{0-10} - overlay com position absolute
0 = opacity 1 (opaco), 10 = opacity 0 (transparente)
Útil para overlays sobre imagens

Classes Utilitárias de Z-Index

.z-index-{0-5} - z-index de 0 a 5
.z-index-111, .z-index-1111 - valores altos
.z-index-minus-2 - z-index negativo (-2)

Classes Utilitárias de Tipografia

Font Size - Escala Numérica (fs-1 a fs-16):

.fs-1 a .fs-6 - tamanhos fixos (10px a 15px)
.fs-7 a .fs-16 - tamanhos fluidos com clamp() (16px a 64px)
Responsivos: md-fs-{1-16}, sm-fs-{1-16}, xs-fs-{1-16}

Classe	Tamanho	Uso
`.fs-1`	10px	Micro labels
`.fs-2`	11px	Badges
`.fs-3`	12px	Small text
`.fs-4`	13px	Secondary
`.fs-5`	14px	Body small
`.fs-6`	15px	Body alt
`.fs-7`	15→16px	Body padrão
`.fs-8`	16→17px	Body large
`.fs-9`	17→18px	Lead
`.fs-10`	18→20px	Subtítulo
`.fs-11`	21→24px	Título pequeno
`.fs-12`	24→28px	Título médio
`.fs-13`	28→32px	Título grande
`.fs-14`	34→40px	Headline
`.fs-15`	40→48px	Hero
`.fs-16`	52→64px	Display

Exemplo responsivo:

<h1 class="fs-14 md-fs-12 sm-fs-10 xs-fs-8">Título que escala com a tela</h1>

Font Weight e Espaçamento:

.fw-{300-900} - font-weight (300, 400, 500, 600, 700, 800, 900)
.ls-{0-5} - letter-spacing positivo
.ls-minus-{0-2|0-5|1|2|3} - letter-spacing negativo

Font Size - Ajustes Percentuais:

.minus-{10-50} - font-size menor (50-90%)
.more-{10-50} - font-size maior (110-150%)

Alinhamento e Transformação:

.text-left, .text-center, .text-right
.text-uppercase, .text-lowercase
.lh-1-{0-9} - line-height (1.0 a 1.9)

Classes Utilitárias de Posicionamento

.ps-relative, .ps-absolute, .ps-fixed, .ps-sticky, .ps-static
.top-0, .bottom-0, .left-0, .right-0, .top-auto, .bottom-auto - valores de posição
.absolute-xy - centraliza absoluto (transform translate -50%)

Outras Classes Utilitárias

Cursor: .cursor-pointer, .cursor-grab, .cursor-not-allowed, etc.
Imagem: .obj-cover, .obj-contain, .aspect-16-9, .aspect-1-1, etc.
Texto: .truncate, .line-clamp-2, .line-clamp-3
Interação: .pe-none, .pe-auto
Visibilidade: .visible-xs, .visible-sm, .visible-md, .visible-lg - mostra apenas no breakpoint
Vídeo: .video-responsive, .embed-responsive-16by9 - iframes/vídeos responsivos

Consulte references/utilities-reference.md para lista completa.

Animações

Com WOW (ativa ao entrar no viewport)

<div class="wow fadeInUp">Anima ao scroll</div>
<div class="wow bounceIn" data-wow-delay="0.2s">Com delay</div>
<div class="wow pulse" data-wow-iteration="3">3 vezes</div>

Com Animated (ativa imediatamente)

<div class="animated fadeIn">Imediato</div>
<div class="animated pulse infinite">Loop infinito</div>
<div class="animated zoomIn delay-500 duration-2000">Com delay e duração</div>

Animações disponíveis:

Fade: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeOut
Bounce/Zoom: bounceIn, zoomIn, zoomOut
Rotate/Flip: rotateIn, flipIn
BackIn: backInDown, backInLeft, backInRight, backInUp
Special: glowIn, slideIn, popIn, liquidIn, magnetIn, floatIn, waveIn
Attention: flash, pulse, shakeX, swing, tada

Classes auxiliares:

.delay-{100-5000} (100, 200, 250, 300... 1000, 1250, 1500...)
.duration-{500-3000}
.repeat-{2-5}, .infinite
.reverse, .alternate

Animações contínuas prontas: .anima-pulse, .anima-shake, .anima-heart, .anima-skeleton

Consulte references/animations-reference.md para mais informações e exemplos.

Bibliotecas JavaScript

O Squeleton integra bibliotecas JavaScript otimizadas e pré-configuradas:

Biblioteca	Finalidade	GitHub
HTMX	Requisições AJAX declarativas via atributos HTML. Ver `references/htmx-reference.md`	github.com/bigskysoftware/htmx
Embla Carousel	Carrossel minimalista com swipe fluido. Ver `references/carousel-reference.md`	github.com/davidjerleke/embla-carousel
js-cookie	Gerenciamento de cookies do navegador. Ver `references/cookies-reference.md`	github.com/js-cookie/js-cookie
a11y-dialog	Modais acessíveis e leves. Ver `references/modal-reference.md`	github.com/KittyGiraudel/a11y-dialog
VanJS	Framework reativo minimalista. Ver `references/vanjs-reference.md`	github.com/vanjs-org/van
Toastify	Notificações toast customizáveis. Ver `references/toastify-reference.md`	github.com/apvarun/toastify-js
VenoBox 2	Lightbox para imagens, vídeos e galerias. Ver `references/venobox-reference.md`	github.com/nicholasio/venobox
Counter-Up2	Animação de contagem numérica. Ver `references/counter-reference.md`	github.com/bfintal/Counter-Up2
Wow2 Animation	Animações on-scroll. Ver `references/animations-reference.md`	github.com/graingert/wow

Modais com classe .modal-dialog já vêm com scroll lock automático (eventos show/hide).

Configuração a11y-dialog: Os atributos originais data-a11y-dialog-* foram renomeados para data-modal-*:

Original	Squeleton
`data-a11y-dialog`	`data-modal`
`data-a11y-dialog-show`	`data-modal-show`
`data-a11y-dialog-hide`	`data-modal-hide`

Veja exemplo completo em "Padrões Comuns de Uso" > "Modal Centralizado". Consulte references/modal-reference.md para mais opções.

Ícones

Prefixo: iccon-{nome}-{variante}

<span class="iccon-home-1"></span>
<span class="iccon-user-2"></span>

IMPORTANTE: Use APENAS ícones da lista oficial em references/icons-reference.md. Ícones inventados ou de outros frameworks NÃO funcionarão. SEMPRE consulte a referência ANTES de usar qualquer ícone.

Consulte references/icons-reference.md para a lista completa organizada por categoria.

Tooltips

Tooltips em CSS puro baseados na Balloon.css (já integrada):

<button aria-label="Texto do tooltip" data-balloon-pos="up">Hover aqui</button>

Posições: up, down, left, right, up-left, up-right, down-left, down-right

Consulte references/tooltips-reference.md para mais opções.

Padrões Comuns de Uso

Hero Section Full Height

<section class="h-100vh f-items-center f-justify-center text-center p-30-all">
    <div class="w-600px">
        <h1 class="fs-13 fw-700 m-20-b">Título Principal</h1>
        <p class="fs-9 opacity-8">Subtítulo descritivo</p>
    </div>
</section>

Grid de Cards Responsivo

<section class="p-60-tb">
    <div class="container p-60-tb xs-p-30-tb render-auto">
        <div class="row gap-10">
            <div class="c-xs-12 c-sm-6 c-lg-3">
                <div class="border-all border-rd-8 p-20-all cursor-pointer">
                    <img src="produto.jpg" class="w-100 border-rd-4 m-15-b">
                    <h4 class="fs-5 m-10-b">Nome do Produto</h4>
                    <p class="fs-9 fw-700">R$ 99,90</p>
                </div>
            </div>
            <!-- Repetir para 20+ produtos -->
        </div>
    </div>
</section>

Header com Logo e Menu

<header class="p-20-tb border-b">
    <div class="container">
        <div class="d-flex f-items-center f-justify-between">
            <div class="logo">
                <img src="logo.svg" class="h-40px">
            </div>
            <nav class="d-flex f-gap-20 xs-d-none">
                <a href="#" class="cursor-pointer">Home</a>
                <a href="#" class="cursor-pointer">Sobre</a>
                <a href="#" class="cursor-pointer">Contato</a>
            </nav>
        </div>
    </div>
</header>

<!-- Trigger -->
<button data-modal-show="exemplo-modal" class="cursor-pointer">Abrir Modal</button>

<!-- Modal -->
<div data-modal="exemplo-modal" class="modal-dialog" aria-hidden="true">
    <div class="dialog-content">
        <div class="dialog-backdrop" data-modal-hide></div>
        <div class="dialog-inline w-500px">
            <button class="dialog-close" data-modal-hide></button>
            <div class="modal-popup border-rd-10 p-30-all">
                <h3 class="fs-11 m-20-b">Título do Modal</h3>
                <p>Conteúdo...</p>
            </div>
        </div>
    </div>
</div>

Carrossel com Embla

Embla Carousel requer inicialização via JavaScript. Estrutura HTML:

<div class="slide__viewport">
    <div class="slide__row gap-15">
        <div class="slide__item c-xs-12 c-sm-6 c-md-4">
            <img src="slide1.jpg" class="w-100">
        </div>
        <div class="slide__item c-xs-12 c-sm-6 c-md-4">
            <img src="slide2.jpg" class="w-100">
        </div>
    </div>
    <div class="slide__dots"></div>
    <button class="slide__prev"><span class="iccon-chevron-left-1"></span></button>
    <button class="slide__next"><span class="iccon-chevron-right-1"></span></button>
</div>

Consulte references/carousel-reference.md para inicialização e opções avançadas.

VenoBox já vem inicializado com os seletores: .open-gallery, .open-video, .open-iframe

<!-- Galeria de imagens -->
<a href="foto1.jpg" class="open-gallery" data-gall="galeria1"><img src="thumb1.jpg"></a>
<a href="foto2.jpg" class="open-gallery" data-gall="galeria1"><img src="thumb2.jpg"></a>

<!-- Vídeo -->
<a href="https://youtube.com/watch?v=xxx" class="open-video">Ver vídeo</a>

<!-- Iframe -->
<a href="pagina.html" class="open-iframe">Abrir iframe</a>

Consulte references/venobox-reference.md para mais opções.

Arquivos de Referência

Para lista completa de todas as classes disponíveis, consulte os arquivos em references/:

grid-reference.md - Sistema de grid de 12 colunas
display-reference.md - Classes de display, overflow e position
flex-reference.md - Flexbox completo
padding-reference.md - Todas as classes de padding
margin-reference.md - Todas as classes de margin
width-reference.md - Largura e max-width
height-reference.md - Altura e min-height
typography-reference.md - Tipografia e texto
border-reference.md - Bordas, radius, opacity e z-index
utilities-reference.md - Position, visibility, float, background
animations-reference.md - Animações WOW e Animated
icons-reference.md - Todos os ícones organizados por categoria
modal-reference.md - Modal (a11y-dialog)
carousel-reference.md - Carrossel (Embla)
venobox-reference.md - Lightbox (VenoBox)
tooltips-reference.md - Tooltips (Balloon.css)
counter-reference.md - Contagem animada (Counter-Up2)
htmx-reference.md - Requisições AJAX (HTMX)
cookies-reference.md - Gerenciamento de cookies (js-cookie)
vanjs-reference.md - Framework reativo (VanJS)
toastify-reference.md - Notificações toast (Toastify)

Is squeleton-skill safe to install?

Squeleton

Princípios Fundamentais

Perguntas antes de começar

Criando CSS ou JS personalizado

Instalação e Configuração

Via CDN

Arquivos para Download

Estrutura Base CSS

Reset e Box Model

Body como Flex Container

Main e Section como Flex Containers

Implicações Práticas

Sistema Responsivo Híbrido

Breakpoints para Colunas de Grid (Mobile-First)

Breakpoints para Classes Utilitárias (Desktop-First)

Três padrões de uso:

Grid System (12 Colunas)

Colunas

Containers

Gaps (espaçamento entre colunas)

Performance - Content Visibility (Lazy Rendering)

Classes Utilitárias de Padding (p-) e Margin (m-)

Classes Utilitárias de Width (w-)

Classes Utilitárias de Height (h-)

Classes Utilitárias de Display (d-)

Classes Utilitárias de Flexbox (f-)

Classes Utilitárias de Border

Classes Utilitárias de Opacity

Classes Utilitárias de Z-Index

Classes Utilitárias de Tipografia

Classes Utilitárias de Posicionamento

Outras Classes Utilitárias

Animações

Com WOW (ativa ao entrar no viewport)

Com Animated (ativa imediatamente)

Bibliotecas JavaScript

Modais com a11y-dialog

Ícones

Tooltips

Padrões Comuns de Uso

Hero Section Full Height

Grid de Cards Responsivo

Header com Logo e Menu

Modal Centralizado

Carrossel com Embla

Lightbox com VenoBox

Arquivos de Referência

Audit the pieces. Scan the whole. Decide.