--- name: codigo-html description: Garante padrões de código HTML limpo, semântico e consistente. Use quando criar ou modificar arquivos HTML, estruturar páginas, ou o usuário mencionar HTML, tags, atributos, ou estrutura de código. --- # Skill: Padrões de Código HTML Esta skill garante código HTML limpo, semântico, bem-estruturado e consistente em todo o projeto. ## Quando Usar - Ao criar novos arquivos HTML - Ao modificar estrutura de páginas existentes - Quando o usuário mencionar "HTML", "tags", "estrutura" - Ao revisar ou refatorar código - Ao corrigir problemas de formatação ## Estrutura Básica Obrigatória Toda página HTML deve seguir esta estrutura: ```html [Título Descritivo da Página] ``` ## Regras de Formatação ### 1. Indentação **Padrão: 4 espaços** ```html

Conteúdo

``` **Regras:** - Use 4 espaços, nunca tabs - Mantenha consistência em todo o arquivo - Indente cada nível de aninhamento - Elementos inline podem ficar na mesma linha quando curtos ### 2. Comentários HTML Use comentários para separar seções principais: ```html

...

``` **Boas práticas:** - Comentários descritivos e concisos - Em inglês para consistência - Não comente código óbvio - Use para delimitar seções grandes ### 3. Atributos **Ordem recomendada:** 1. `class` 2. `id` 3. `data-*` 4. `type` 5. `href` / `src` 6. `title` 7. `alt` 8. `aria-*` 9. `role` **Exemplos:** ```html ``` ## Padrões Específicos do Projeto ### Navbar Padrão ```html ``` ### Footer Padrão ```html ``` ### Modal Padrão ```html ``` ## O Que Evitar ### ❌ CSS Inline ou Tags Style ```html

``` **Exceções permitidas:** - Width de progress bars: `style="width: 85%;"` - Height de progress bars: `style="height: 25px;"` - Object-fit de imagens: `style="object-fit: contain;"` ### ❌ JavaScript Inline ```html ``` **Exceção:** Atributos `data-bs-*` do Bootstrap são permitidos. ### ❌ Tabelas para Layout ```html

Conteúdo

``` **Exceção:** Tabelas são OK para dados tabulares reais. ### ❌ Divs Desnecessárias ```html

Texto

``` ### ❌ IDs Duplicados ```html

Item 1

Item 2

Item 1

Item 2

``` ### ❌ Mistura de Idiomas ```html

Pokemon Cards

Bem-vindo ao portfólio

Cartas Pokémon

Bem-vindo ao portfólio

``` **Exceções:** Nomes próprios e termos técnicos (ex: "Base Set", "Gem Mint"). ## Checklist de Código HTML Ao criar ou modificar HTML: **Estrutura:** - ✅ `` no início - ✅ `` - ✅ Meta charset e viewport no `` - ✅ Título descritivo - ✅ CDN do Bootstrap (CSS e JS) **Formatação:** - ✅ Indentação de 4 espaços consistente - ✅ Comentários para seções principais - ✅ Ordem de atributos padronizada - ✅ Aspas duplas em todos os atributos **Semântica:** - ✅ Tags HTML5 semânticas (`

`, `

Título Principal

Seção

Subseção

Outra Seção

Subseção

Título

Subseção

Pokemon Cards

Cartas Pokémon