Manual: Como Criar uma Pagina de Ferramenta

Guia completo para converter qualquer pagina de ferramenta do Chipak Tools para o design system padrao (baseado em /ferramenta/modelo.html). Inclui checklist, estrutura HTML, CSS obrigatorio, armadilhas conhecidas e diretrizes de conteudo SEO.

1. Visao Geral do Processo

Cada pagina de ferramenta segue o template definido em /ferramenta/modelo.html (~2400 linhas). O processo de conversao e:

1. Ler a pagina antiga e entender a funcionalidade JS especifica (geracao, validacao, conversao, etc.).
2. Reescrever o HTML usando a estrutura do modelo (breadcrumbs → hero → tabs → tool-section → instructions → info-card → article → related-tools).
3. Copiar TODO o bloco CSS do modelo para dentro do <style> da pagina.
4. Manter o JS funcional da ferramenta original, adaptando apenas os hooks visuais (IDs, classes).
5. Escrever conteudo SEO rico na aba "Sobre" (artigo com 5-6 secoes).
6. Testar: funcionalidade, favoritos, rating, report, feedback modal, responsivo.

2. Componentizacao — O Que E Automatico e O Que E Manual

O Chipak Tools e um site estatico componentizado. Isso significa que varios elementos sao injetados em tempo de execucao pelo JavaScript, e nao escritos diretamente no HTML. Entender essa divisao e essencial para nao duplicar codigo nem esquecer de fornecer os hooks necessarios.

2.1. O que o ChipakComponents.init('Nome') injeta automaticamente

Componente	Onde injeta	O que voce precisa fornecer
Sidebar completa	#sidebar-container	Um <div id="sidebar-container"></div> vazio
Auth modal (login/cadastro)	body (append)	Nada — e 100% automatico
Mobile bottom nav	#mobile-nav-container	Um <div id="mobile-nav-container"></div> vazio
User menu updates	#loggedOutMenu, #loggedInMenu, #userAvatar, #userName	O HTML do header com esses IDs (veja secao 3)
Sidebar logo link	#sidebarLogoLink	Automatico — atualiza href baseado no estado de login

2.2. O que o ChipakFeatures.init('slug') injeta automaticamente

Feature	O que injeta/faz	O que voce precisa fornecer
Rating (estrelas)	Carrega nota e contagem do Firestore, atualiza UI	#starRating com 5 buttons + #ratingScore + #ratingCount + #ratingThankyou
Favoritos	Verifica estado no Firestore, alterna botoes	#btnFavoriteOff + #btnFavoriteOn (dois botoes separados!)
Report modal	Injeta HTML do modal no body (com SVGs sem width/height)	CSS para .report-modal-* na pagina (senao SVGs ficam gigantes)
Feedback modal	Injeta HTML do modal no body (abre para 1-2 estrelas)	CSS para .feedback-modal-* na pagina
Funcoes globais	Registra: rateTool(), hoverStars(), unhoverStars(), toggleFavorite(), openReportModal(), sendFeedback(), closeFeedbackModal()	Os handlers onclick nos elementos HTML

2.3. O que voce escreve manualmente

• Header — O HTML do <header class="app-header"> com menu toggle, titulo e user menu. Segue o modelo exato (copie e troque o titulo).
• Breadcrumbs — Navegacao com links corretos.
• Tool Hero — Cabecalho visual com badges, h1, description, meta, star rating e action buttons.
• Tabs + Conteudo — Sistema de abas e todo o conteudo da ferramenta.
• Artigo SEO — Conteudo textual rico da aba Sobre.
• Related Tools — Cards de ferramentas relacionadas.
• JS especifico — Funcionalidade da ferramenta em si (gerar, validar, converter, etc.).
• CSS completo — Todo o bloco de estilos no <style> (incluindo estilos para modais injetados).

3. Estrutura HTML Obrigatoria

A pagina deve seguir exatamente esta arvore. Cada bloco e explicado abaixo.

3.1. Head — Meta Tags

<title>Nome da Ferramenta Online Gratis - Para Testes | Chipak Tools</title>
<meta name="description" content="Descricao com 150-160 caracteres. Inclua a palavra-chave principal, o beneficio e 'sem cadastro' ou 'gratuito'.">
<meta name="keywords" content="palavra1, palavra2, variacao1, variacao2, variacao longa">
<link rel="canonical" href="https://chipak.tools/ferramenta/slug-da-ferramenta">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Mesmo titulo ou versao curta">
<meta property="og:description" content="Versao curta da description">
<meta property="og:url" content="https://chipak.tools/ferramenta/slug-da-ferramenta">

3.2. Head — Schema.org

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "Nome da Ferramenta",
    "description": "Descricao curta",
    "url": "https://chipak.tools/ferramenta/slug",
    "applicationCategory": "DeveloperApplication",
    "operatingSystem": "Web",
    "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "BRL"
    },
    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.7",
        "bestRating": "5",
        "worstRating": "1",
        "ratingCount": "XXX"
    }
}
</script>

3.3. Tool Hero

O hero e o cabecalho visual principal. Contem:

<div class="tool-hero">
    <div class="tool-hero-inner">
        <div class="tool-hero-content">
            <!-- Badges -->
            <div class="tool-hero-badges">
                <span class="badge badge-free">...Gratuito</span>
                <span class="badge badge-category">Categoria</span>
                <span class="badge badge-popular">...Popular</span>  <!-- opcional -->
            </div>

            <h1>Nome da Ferramenta</h1>
            <p class="tool-hero-description">Descricao rica em 1-2 frases.</p>

            <!-- Meta info -->
            <div class="tool-hero-meta">
                <span class="tool-hero-meta-item">...XX.Xk usuarios</span>
                <span class="tool-hero-meta-item">...Atualizado em Mes Ano</span>
                <span class="tool-hero-meta-item">...X.X/5</span>
            </div>

            <!-- Star Rating (IDs OBRIGATORIOS) -->
            <div class="star-rating">
                <span class="star-rating-label">Avalie esta ferramenta:</span>
                <div class="star-rating-stars" id="starRating">
                    <!-- 5 buttons com data-value="1" a "5" -->
                    <!-- onclick="rateTool(N)" onmouseenter="hoverStars(N)" onmouseleave="unhoverStars()" -->
                </div>
                <span class="star-rating-score" id="ratingScore">X.X</span>
                <span class="star-rating-count" id="ratingCount">(XXX votos)</span>
                <span class="star-rating-thankyou" id="ratingThankyou">...Obrigado!</span>
            </div>
        </div>

        <!-- Actions (IDs OBRIGATORIOS para favoritos) -->
        <div class="tool-hero-actions">
            <button class="btn-favorite" id="btnFavoriteOff" onclick="toggleFavorite()">...Favoritar</button>
            <button class="btn-favorite active" id="btnFavoriteOn" onclick="toggleFavorite()" style="display:none;">...Favoritado</button>
            <button class="btn-share" onclick="shareTool()">...Compartilhar</button>
            <button class="btn-report" onclick="openReportModal()">...Reportar Bug</button>
        </div>
    </div>
</div>

3.4. Tabs

<div class="tool-tabs">
    <button class="tool-tab active" onclick="switchTab('ferramenta')" data-tab="ferramenta">
        ...Ferramenta
    </button>
    <button class="tool-tab" onclick="switchTab('sobre')" data-tab="sobre">
        ...Sobre
    </button>
</div>

<div class="tool-tab-panel active" id="tab-ferramenta">...</div>
<div class="tool-tab-panel" id="tab-sobre">...</div>

A funcao switchTab() deve ser definida no script da pagina:

function switchTab(tabName) {
    document.querySelectorAll('.tool-tab').forEach(tab => {
        tab.classList.toggle('active', tab.dataset.tab === tabName);
    });
    document.querySelectorAll('.tool-tab-panel').forEach(panel => {
        panel.classList.toggle('active', panel.id === 'tab-' + tabName);
    });
}

3.5. Tab 1 — Ferramenta

Contem tres blocos nesta ordem:

1. div.tool-section — A ferramenta em si (inputs, botao principal .btn-calculate, resultado .result-display, acoes secundarias .actions-row, historico).
2. div.instructions-card — "Como Usar" em 3-4 passos com .step-item numerados.
3. div.info-card — Resumo sobre a ferramenta + usos permitidos + aviso legal.

3.6. Tab 2 — Sobre (Artigo)

Ver secao 7. Conteudo e SEO para detalhes completos.

3.7. Related Tools

<div class="related-tools">
    <div class="related-tools-title">...Ferramentas Relacionadas</div>
    <div class="related-tools-grid">
        <a href="/ferramenta/slug" class="related-tool-card">
            <div class="related-tool-icon">...svg...</div>
            <div class="related-tool-info">
                <div class="related-tool-name">Nome</div>
                <div class="related-tool-desc">Descricao curta</div>
            </div>
        </a>
        <!-- 3-4 ferramentas relacionadas -->
    </div>
</div>

Escolha 3-4 ferramentas do mesmo grupo tematico. Se a ferramenta e um gerador, inclua o validador correspondente e vice-versa.

4. CSS Obrigatorio

As classes CSS se dividem em dois grupos:

4.1. Classes da pagina (visuais)

Classe	O que estiliza
.breadcrumbs	Navegacao de migalhas
.tool-hero, .tool-hero-*	Cabecalho hero (badges, h1, meta)
.badge, .badge-free, .badge-category, .badge-popular	Etiquetas do hero
.star-rating, .star-rating-*	Sistema de avaliacao por estrelas
.btn-favorite, .btn-share, .btn-report	Botoes de acao do hero
.tool-tabs, .tool-tab, .tool-tab-panel	Sistema de abas
.tool-section, .section-title	Container principal da ferramenta
.input-grid, .input-wrapper, .input-field, .input-label, .input-hint	Campos de formulario
.checkbox-group, .checkbox-label, .checkbox-sublabel	Opcoes com checkbox
.btn-calculate	Botao principal de acao (gradiente)
.actions-row	Linha de botoes secundarios
.result-display, .result-value, .result-placeholder	Area de resultado
.history-section, .history-list, .history-item	Historico de resultados
.alert-box, .alert-box.warning	Caixas de alerta/dica
.instructions-card, .step-item, .step-number	Card "Como Usar"
.info-card	Card informativo
.article-section, .article-header, .article-toc, .article-body	Artigo SEO (aba Sobre)
.related-tools, .related-tool-card	Ferramentas relacionadas

4.2. Classes para modais INJETADOS pelo JS CRITICO

Estas classes DEVEM estar no <style> de TODA pagina de ferramenta:

Classe	Por que e necessaria
.report-modal-overlay	Overlay do modal de report (display:none por padrao, flex quando .active)
.report-modal	Container do modal (max-width: 500px)
.report-modal-header	Cabecalho com titulo + botao fechar
.report-modal-header h3 svg	Limita SVG do titulo a 20x20px
.report-modal-close	Botao X de fechar
.report-modal-body	Corpo do modal
.report-type-grid	Grid 2 colunas das opcoes de tipo de report
.report-type-option	Cada opcao de tipo
.report-type-option svg	Limita SVG das opcoes a 16x16px — sem isso, ficam GIGANTES
.report-modal-footer	Rodape com botoes
.feedback-modal-content	Container do modal de feedback (max-width: 480px)
.feedback-stars-display	Estrelas dentro do modal
.feedback-stars-display svg	Limita SVG das estrelas a 24x24px
.toast-container, .toast	Notificacoes toast (posicao fixa, z-index alto)

4.3. Responsive Breakpoints

Tres breakpoints obrigatorios:

• @media (max-width: 1024px) — Sidebar escondida, main sem margin-left
• @media (max-width: 768px) — input-grid 1 coluna, hero vertical, botoes full-width, article menor
• @media (max-width: 640px) — mobile-bottom-nav visivel, padding-bottom extra, hero h1 menor

Mais as classes base de .mobile-bottom-nav e .mobile-nav-item (usadas pelo componente injetado).

5. IDs e Elementos Obrigatorios

O chipak-features.js e o components.js buscam estes elementos por ID. Se faltarem, a funcionalidade falha silenciosamente.

ID	Usado por	Descricao
#sidebarOverlay	components.js	Overlay para fechar sidebar no mobile
#sidebar-container	components.js	Onde a sidebar e injetada
#userMenu	components.js	Container do menu de usuario
#loggedOutMenu	components.js	Botoes Entrar/Cadastrar
#loggedInMenu	components.js	Menu do usuario logado (comeca display:none)
#userAvatar	components.js	Inicial do usuario
#userName	components.js	Nome do usuario
#userDropdown	components.js	Dropdown do usuario
#mobile-nav-container	components.js	Onde o nav mobile e injetado
#toastContainer	components.js	Container de toasts
#starRating	chipak-features.js	Container das estrelas de avaliacao
#ratingScore	chipak-features.js	Nota media exibida
#ratingCount	chipak-features.js	Contagem de votos
#ratingThankyou	chipak-features.js	Mensagem "Obrigado!" apos avaliar
#btnFavoriteOff	chipak-features.js	Botao favoritar (estado OFF)
#btnFavoriteOn	chipak-features.js	Botao favoritado (estado ON, comeca escondido)

6. Scripts e Ordem de Carregamento

A ordem dos scripts e importante. Sempre nesta sequencia:

<!-- 1. Bibliotecas de dominio (se a ferramenta precisar) -->
<script src="../js/documentos-br.js"></script>

<!-- 2. Componentes visuais (sidebar, header, auth modal, mobile nav) -->
<script src="../js/components.js"></script>

<!-- 3. Firebase config (inicializa app + auth + firestore) -->
<script src="../js/firebase-config.js"></script>

<!-- 4. Features (rating, favorites, report, feedback) -->
<script src="../js/chipak-features.js"></script>

<!-- 5. Router SPA -->
<script src="../js/chipak-router.js"></script>

<!-- 6. Script inline da pagina -->
<script>
    // PRIMEIRO: inicializar componentes
    ChipakComponents.init('Nome da Ferramenta');
    ChipakFeatures.init('slug-da-ferramenta');

    // DEPOIS: funcoes especificas da pagina
    function switchTab(tabName) { ... }
    function shareTool() { ... }
    // ... funcoes da ferramenta ...
</script>

6.1. Funcoes que toda pagina precisa definir

Funcao	Descricao
switchTab(tabName)	Alterna entre abas (ferramenta/sobre)
shareTool()	Usa navigator.share ou copia URL

As funcoes rateTool(), hoverStars(), unhoverStars(), toggleFavorite(), openReportModal(), sendFeedback() e closeFeedbackModal() sao registradas globalmente pelo chipak-features.js — NAO precisa redefini-las.

6.2. Slug da ferramenta

O slug passado para ChipakFeatures.init('slug') e usado como chave no Firestore para ratings, favoritos e reports. Deve corresponder ao nome do arquivo HTML sem extensao:

• gerador-cpf.html → ChipakFeatures.init('gerador-cpf')
• validador-cnpj.html → ChipakFeatures.init('validador-cnpj')
• conversor-base64.html → ChipakFeatures.init('conversor-base64')

7. Conteudo e SEO — Como Escrever

7.1. Principio Central

O texto deve ser rico, informativo e util para quem busca pelo assunto — nao apenas para quem ja sabe o que a ferramenta faz. Alguem que pesquisa "gerador de CNPJ" no Google pode estar querendo:

• Gerar um CNPJ para teste (uso direto)
• Entender como funciona o CNPJ (educacional)
• Saber se gerar CNPJ e ilegal (duvida juridica)
• Usar em automacao de testes (caso de uso tecnico)

O artigo deve responder a TODAS essas intencoes de busca, nao apenas a primeira.

7.2. Estrutura do Artigo (5-6 secoes)

Siga este modelo testado:

1. O que e [coisa] e para que serve — Contexto geral, historia breve, importancia no Brasil. Conecte com cenarios reais.
2. Estrutura e formato — Quantos digitos, como sao organizados, o que cada parte significa. Use listas e exemplos de formato.
3. Como funciona o algoritmo — Explicacao tecnica acessivel. Pesos, modulo 11, digitos verificadores. Blockquote com frase-chave sobre como o gerador funciona.
4. Por que desenvolvedores precisam disso — Casos de uso concretos: testes, automacao, staging, demos, integracao com APIs. Liste 4-6 cenarios com explicacao de uma linha.
5. Como usar a ferramenta — Passo a passo pratico (formatacao → quantidade → gerar → copiar). Mencione que e 100% local.
6. Perguntas frequentes (FAQ) — 4-6 perguntas. SEMPRE inclua: "E ilegal?", "Pertence a alguem real?", "Funciona em cadastros reais?", "Meus dados sao coletados?".

7.3. Tom e Extensao

• Tom: Tecnico mas acessivel. Como se estivesse explicando para um dev junior. Sem jargao desnecessario, sem ser condescendente.
• Extensao: 800-1200 palavras no total. Suficiente para o Google considerar conteudo de qualidade, mas sem enrolacao.
• Equilibrio: NAO exagere no SEO. Nada de repetir a palavra-chave 50 vezes. Escreva naturalmente. O Google recompensa conteudo genuinamente util, nao keyword stuffing.

7.4. Elementos Visuais do Artigo

<div class="article-section" style="margin-top: 0;">
    <div class="article-header">
        <div class="article-label">...Artigo</div>
        <h2>Titulo longo e descritivo para SEO</h2>
        <div class="article-meta">
            <span>Por Equipe Chipak</span> • <span>Atualizado em Mes Ano</span> • <span>X min de leitura</span>
        </div>
    </div>

    <div class="article-toc">
        <div class="article-toc-title">...Neste artigo</div>
        <ol>
            <li><a href="#art-oque">Titulo da secao 1</a></li>
            <!-- ... -->
        </ol>
    </div>

    <div class="article-body">
        <h3 id="art-oque">1. Titulo</h3>
        <p>...</p>
        <!-- Use <ul>, <ol>, <blockquote>, <strong> para quebrar o texto -->
    </div>
</div>

7.5. O que NAO fazer

• NAO copie texto de outras ferramentas concorrentes.
• NAO use texto generico tipo "esta e a melhor ferramenta do mercado".
• NAO repita o mesmo paragrafo do info-card no artigo — expanda significativamente.
• NAO deixe a aba Sobre vazia ou com apenas 2 paragrafos.
• NAO exagere — se o artigo parece marketing forcado, reduza. Tom informativo > tom vendedor.

8. Armadilhas Conhecidas

Bugs que ja encontramos ao converter paginas. Leia antes de comecar.

9. Checklist Final

Use esta lista para verificar cada pagina antes de considerar a conversao concluida.

Head

• Title tag com nome da ferramenta + "Online Gratis" + "| Chipak Tools"
• Meta description com 150-160 caracteres, inclui palavra-chave + beneficio + "sem cadastro"
• Meta keywords com 6-10 variacoes da palavra-chave
• Canonical URL apontando para /ferramenta/slug
• Open Graph tags (og:type, og:title, og:description, og:url)
• Google Fonts carregadas (Inter + JetBrains Mono)
• styles.css linkado
• Firebase SDKs (app-compat, auth-compat, firestore-compat) v10.7.0
• Schema.org JSON-LD com type WebApplication e aggregateRating

CSS (dentro do <style>)

• Breadcrumbs — .breadcrumbs, .separator, .current
• Tool Hero — .tool-hero, .tool-hero::before, .tool-hero-inner, .tool-hero-content, .tool-hero-badges, .badge, .badge-free, .badge-category, .badge-popular, .tool-hero h1, .tool-hero-description, .tool-hero-meta, .tool-hero-meta-item, .tool-hero-actions
• Star Rating — .star-rating, .star-rating-label, .star-rating-stars, button, button svg, .active svg, .hover svg, .star-rating-count, .star-rating-score, .star-rating-thankyou
• Action Buttons — .btn-favorite (+ .active, + svg), .btn-share (+ svg), .btn-report (+ svg)
• Tabs — .tool-tabs, .tool-tab (+ .active, + svg), .tool-tab-panel (+ .active)
• Tool Section — .tool-section, .section-title (+ svg)
• Inputs — .input-grid, .input-wrapper, .input-label, .input-hint, .input-field (+ :focus)
• Checkboxes — .checkbox-group (+ :hover, + input), .checkbox-label, .checkbox-sublabel
• Buttons — .btn-calculate (+ :hover), .actions-row
• Result — .result-display (+ .has-result), .result-value, .result-placeholder
• History — .history-section, .history-title, .history-list, .history-item (+ :hover)
• Alerts — .alert-box (+ .warning)
• Instructions — .instructions-card, .instructions-steps, .step-item, .step-number, .step-content, .step-title, .step-desc
• Info Card — .info-card, h3, p, ul, li
• Report Modal — .report-modal-overlay (+ .active), .report-modal, .report-modal-header (+ h3, + h3 svg), .report-modal-close, .report-modal-body, .report-type-grid, .report-type-option (+ :hover, + .selected, + input, + svg), .report-modal-footer CRITICO
• Feedback Modal — .feedback-modal-content, .feedback-stars-display (+ svg) CRITICO
• Toast — .toast-container, .toast (+ .success, + .error, + .warning), @keyframes slideIn CRITICO
• Article — .article-section, .article-header, .article-label, .article-section h2, .article-meta, .article-toc, .article-toc-title, .article-toc ol/li/a, .article-body h3/p/ul/ol/li/blockquote
• Related Tools — .related-tools, .related-tools-title, .related-tools-grid, .related-tool-card (+ :hover), .related-tool-icon (+ svg), .related-tool-info, .related-tool-name, .related-tool-desc
• Responsive — @media 1024px, @media 768px, @media 640px
• Mobile Nav — .mobile-bottom-nav, .mobile-nav-item (+ :hover, + .active, + svg)

HTML (body)

• sidebar-overlay com id="sidebarOverlay" e onclick="toggleSidebar()"
• sidebar-container com id="sidebar-container"
• App header com menu toggle, page-title, user-menu completo (loggedOut + loggedIn)
• content-area full-width como wrapper do conteudo
• Breadcrumbs com links corretos (Inicio > Categoria > Nome)
• Tool Hero com badges, h1, description, meta, star-rating, actions
• Star Rating com id="starRating" e 5 buttons com data-value, onclick, onmouseenter, onmouseleave
• Favorito OFF com id="btnFavoriteOff" (visivel por padrao)
• Favorito ON com id="btnFavoriteOn" e style="display:none;"
• Botao Share com onclick="shareTool()"
• Botao Report com onclick="openReportModal()"
• Tabs com data-tab="ferramenta" e data-tab="sobre"
• Tab panels com id="tab-ferramenta" (active) e id="tab-sobre"
• Tool Section com section-title, result-display, inputs, btn-calculate, actions-row, history
• Instructions Card com 3-4 passos
• Info Card com resumo, usos e aviso legal
• Article Section com header, TOC, body (5-6 secoes) — na tab-sobre
• Related Tools com 3-4 ferramentas do mesmo grupo (fora das tabs)
• mobile-nav-container
• toastContainer

Scripts

• Biblioteca de dominio (se necessario, ex: documentos-br.js) — primeiro
• components.js — segundo
• firebase-config.js — terceiro
• chipak-features.js — quarto
• chipak-router.js — quinto
• ChipakComponents.init('Nome') chamado no script inline
• ChipakFeatures.init('slug') chamado logo apos — slug = nome do arquivo sem .html
• switchTab() definida no script inline
• shareTool() definida no script inline
• Funcoes especificas da ferramenta preservadas e adaptadas

Conteudo e SEO

• Title tag contem a palavra-chave principal
• Meta description e unica e atrativa (nao generica)
• H1 do hero contem a palavra-chave principal
• Artigo (aba Sobre) tem 5-6 secoes com 800-1200 palavras no total
• Secao 1 responde "o que e" e "para que serve" (intencao informacional)
• Secao 2 explica formato/estrutura (intencao tecnica)
• Secao 3 detalha o algoritmo (intencao educacional)
• Secao 4 lista casos de uso para devs (intencao pratica)
• Secao 5 ensina a usar a ferramenta (intencao de uso direto)
• Secao 6 FAQ com pelo menos: "E ilegal?", "Pertence a alguem?", "Funciona em cadastros reais?", "Dados coletados?"
• Tom informativo e tecnico, nao vendedor. Sem keyword stuffing
• Blockquote com frase destacada sobre como o gerador funciona (diferencial SEO)
• Info Card (tab ferramenta) tem resumo util, nao apenas "esta ferramenta faz X"
• Aviso legal presente tanto no info-card quanto no FAQ

Teste Final

• Funcionalidade principal funciona (gerar, validar, converter, etc.)
• Copiar resultado funciona e mostra toast
• Historico funciona (se aplicavel)
• Tabs alternam corretamente
• Star rating — hover destaca estrelas, click envia avaliacao
• Favoritar — alterna entre Off/On (precisa estar logado)
• Compartilhar — copia URL ou abre share nativo
• Reportar Bug — modal abre corretamente, SVGs tem tamanho normal (16-20px)
• Feedback modal — abre ao dar 1-2 estrelas
• Toast — aparece no canto superior direito com estilo correto
• Mobile — layout responsivo, nav inferior aparece em 640px
• Sidebar — abre/fecha no mobile
• Links internos — navegam via SPA router (sem reload)

---

Manual criado em Março 2026 — Chipak Tools
Referencia: /ferramenta/modelo.html | Exemplos convertidos: gerador-cpf.html, gerador-cnpj.html