--- name: bootstrap-guidelines description: Garante uso correto do Bootstrap 5 sem CSS customizado. Use quando criar ou modificar HTML, estilizar componentes, ajustar layout, ou o usuário mencionar Bootstrap, grid, responsividade, ou classes CSS. --- # Skill: Bootstrap 5 Guidelines Esta skill garante o uso correto do Bootstrap 5.3.0, seguindo o princípio fundamental do projeto de **ZERO CSS customizado**. ## Princípio Fundamental **🚫 NUNCA use CSS customizado. SOMENTE classes Bootstrap.** Toda estilização deve ser feita usando classes nativas do Bootstrap. Se algo não puder ser feito com Bootstrap, reconsidere o design. ## Quando Usar - Ao criar novas páginas HTML - Ao adicionar componentes (cards, badges, alerts, etc) - Ao ajustar layout e responsividade - Quando o usuário mencionar "estilizar", "layout", "responsivo" - Ao trabalhar com grid system - Quando precisar de cores, espaçamento, ou tipografia ## Sistema de Grid ### Container ```html
``` ### Grid System ```html
``` ### Breakpoints - `col-` : Extra small (< 576px) - Mobile - `col-sm-` : Small (≥ 576px) - `col-md-` : Medium (≥ 768px) - Tablet - `col-lg-` : Large (≥ 992px) - Desktop - `col-xl-` : Extra large (≥ 1200px) - `col-xxl-` : Extra extra large (≥ 1400px) ### Exemplos de Grid ```html
Coluna 1
Coluna 2
Col 1
Col 2
Col 3
Coluna menor
Coluna maior
``` ## Componentes Principais ### Cards ```html
Título
Título do Card

Conteúdo

Rodapé
``` ### Badges ```html Primário Sucesso Perigo Aviso Info Escuro Grande ``` ### Alerts ```html
Título

Conteúdo do alerta

Primário
Sucesso
Perigo
Aviso
Light com borda
Escuro
``` ### Progress Bars ```html
85%
Verde
Amarelo
Vermelho
Cinza
``` ### Accordion ```html

Conteúdo
``` ### Navbar ```html ``` ### Modals ```html ``` ## Utility Classes Essenciais ### Spacing (Margin e Padding) **Sintaxe:** `{property}{sides}-{size}` ou `{property}{sides}-{breakpoint}-{size}` **Properties:** - `m` : margin - `p` : padding **Sides:** - `t` : top - `b` : bottom - `s` : start (left em LTR) - `e` : end (right em LTR) - `x` : horizontal (left + right) - `y` : vertical (top + bottom) - (vazio) : todos os lados **Sizes:** - `0` : 0 - `1` : 0.25rem (4px) - `2` : 0.5rem (8px) - `3` : 1rem (16px) - `4` : 1.5rem (24px) - `5` : 3rem (48px) - `auto` : auto **Exemplos:** ```html
``` ### Cores **Background:** ```html
``` **Text:** ```html

``` ### Texto **Alinhamento:** ```html

``` **Peso:** ```html ``` **Tamanho:** ```html

P0000254 ``` ### Bordas ```html
``` ### Sombras ```html
``` ### Display ```html
``` ### Flexbox ```html
``` ### Largura ```html
``` ## Tabelas ```html
Célula
``` ## Gaps (Espaçamento em Grid) ```html
``` ## Cores para Tipos Pokémon (Sugestões) ```html
``` ## Regras de Ouro 1. ✅ **Use APENAS classes Bootstrap nativas** 2. ✅ **Combine classes para obter o efeito desejado** 3. ✅ **Use o sistema de grid responsivo** 4. ✅ **Aproveite as utility classes** 5. ❌ **NUNCA crie CSS customizado** 6. ❌ **NUNCA use tags `