Aula 19Projeto final: do pedido à página no ar

🖥️ Versão Desktop. Nesta versão do curso, você usa o Claude Code no app Claude Desktop, na aba Code, e esta aula usa também o site do GitHub, no seu navegador. Quase tudo é feito por janelas e botões, e os comandos do Git que o Claude roda aparecem nos pedidos de aprovação, como na Aula 05. Na caixa de mensagem, você digita o /code-review, como na Aula 09. E o terminal aparece numa etapa só, a 6: para instalar o gh (no Mac, antes dele, o Homebrew) e fazer o login dele, você digita comandos no terminal integrado do app (Ctrl + `). A aula mostra exatamente o que digitar.

Objetivos

Ao final desta aula você vai ter:

• Terminado a sua página com o fluxo da Aula 06, a partir de um plano da página inteira
• Escrito as regras da casa num CLAUDE.md
• Conferido o resultado pelo que se vê: no painel Browser, também estreito, e no seu celular
• Revisado tudo antes de publicar, com o .env fora de todas as versões
• Criado uma conta no GitHub e posto a página no ar, de graça, com um endereço para mandar a quem quiser
• Feito uma seção nova numa linha paralela (branch) e levado essa seção para o site por um pedido para juntar (pull request), revisado no site do GitHub
• Criado uma skill com os passos de uma seção nova

Chegou a hora de juntar tudo. Nesta aula, você termina a página da confeitaria, ou a da sua ideia, e põe no ar, com um endereço de verdade, como https://seu-usuario.github.io/confeitaria/, para mandar a quem quiser. Cada etapa usa o que você aprendeu numa aula do curso, indicada no título.

A página é pequena de propósito: o que importa é o jeito de trabalhar. Planejar antes de fazer, conferir pelo que se vê, revisar antes de publicar e guardar uma versão sempre que algo funcionar.

O que você vai precisar:

• a pasta da sua página, com o Git das Aulas 06 a 10: o cardápio com filtro, o formulário de encomenda e a trava do envio;
• um e-mail para a conta no GitHub e um celular, para a verificação em duas etapas e para ver a página no ar;
• tempo: as etapas cabem em dias diferentes. Para voltar de onde parou, clique na sessão, na barra lateral da aba Code (Aula 10).

Não acompanhou a página ao longo do curso? Comece pelo pedido da Aula 03, prepare o Git como na Aula 06 e siga daqui: o plano da Etapa 2 pede o que faltar.

💡 A aula inteira é no Manual. Na aba Code, na linha abaixo da caixa de mensagem, escolha Local e a pasta da sua página. Antes da primeira mensagem, escolha Manual no seletor de modo, na mesma linha. No Manual, cada mudança e cada comando esperam o seu sim, menos os que só olham. Toda vez que voltar a uma sessão, confira de novo o seletor.

Etapa 1 · As regras da casa (Aula 11)

O CLAUDE.md é um arquivo de anotações que o Claude lê no começo de toda conversa: o que você escrever nele, não precisa repetir. Fez a Aula 11? Então ele já existe: peça ao Claude para conferir se ele tem as regras do pedido abaixo e completar o que faltar. Se ainda não existe, escreva na caixa de mensagem:

Crie um CLAUDE.md com as regras da casa desta página: o texto é em
português do Brasil; as cores são os tons de rosa de hoje; o modo escuro,
o filtro do cardápio e o formulário de encomenda têm de continuar
funcionando; a página precisa ficar fácil de ler no celular; não instale
nada sem me perguntar; e, antes de rodar um comando, explique em
português simples o que ele faz.

Tem o decisoes.md da Aula 07? Acrescente ao pedido: "e use as cores e os textos combinados no decisoes.md".

O app mostra o diff do arquivo novo: leia o que ele propõe e aceite. Depois, peça "guarde uma versão com o CLAUDE.md" e aprove os comandos do Git, como na Aula 06.

Etapa 2 · O plano da página completa (Aulas 04 e 06)

No seletor de modo, escolha Plan e faça o pedido com as cinco partes da Aula 04:

Quero terminar a página da confeitaria, numa página só, com quatro
partes, nesta ordem: o início, com o nome e a frase de boas-vindas;
o cardápio com o filtro por tipo de doce; as encomendas pelo WhatsApp;
e o horário de funcionamento com um endereço de exemplo. O que já
existe, como o filtro, o formulário e o modo escuro, tem de continuar
funcionando. Está pronta quando der para ler tudo num celular sem dar
zoom, sem nada cortado nas laterais e com os botões fáceis de tocar com
o dedo. Para conferir, eu abro a página no painel Browser, normal e
estreito, do tamanho de um celular, e te mando um print de cada um.

Ficou algo no "deixar para depois" da Aula 09, como o rosa diferente de um botão? Ponha no pedido também: o plano é a hora de juntar o que estava esperando.

O Claude devolve um plano. Revise com calma. Antes de aprovar, peça um ajuste seu, na caixa de mensagem, por exemplo:

Ponha um menu no topo, com Cardápio, Encomendas e Onde estamos, que leve até cada parte da página.

Ele revisa o plano antes de qualquer mudança. O plano podia estar certo sem esse menu. O ajuste é de gosto, e é aí que está a graça: a página é sua, e é você quem conduz, enquanto mudar de ideia ainda não custa nada. Quando o plano estiver bom, troque o seletor para Manual e escreva: "Plano aprovado, pode seguir."

Etapa 3 · Fazer no Manual, conferindo pelo que se vê (Aulas 04 a 06)

A cada mudança, o app mostra o diff, o antes e o depois do arquivo, e você aceita ou recusa. Aceite as que fizerem sentido. Não entendeu uma? Recuse e peça, na caixa de mensagem, a explicação em português simples, como na Aula 05.

Quando ele terminar, clique no caminho do index.html na conversa: a página abre no painel Browser (navegador), ao lado da conversa, como na Aula 06. O painel também abre com um clique em Browser, na barra de título da sessão, ou com Cmd + Shift + B no Mac (Ctrl + Shift + B no Windows). Depois de uma mudança, clique no caminho de novo, para ver a versão nova. Confira:

1. O menu do topo leva até cada parte.
2. No cardápio, ao clicar em Bolos, só os bolos aparecem; em Todos, os seis voltam.
3. Nas encomendas, preencha o nome, o doce e a data e confira a prévia da mensagem. O clique em Enviar pelo WhatsApp, faça no seu navegador de sempre, como na Aula 09: ele leva ao WhatsApp, e, com o número inventado, a conversa não chega a abrir.
4. O horário e o endereço estão no fim.
5. Com o modo escuro ligado, tudo continua fácil de ler.

Agora, o teste do celular, ainda no computador: arraste a borda do painel Browser até ele ficar estreito, perto da largura de um celular. Tire um print, como na Aula 04 (no Mac, Command + Shift + 4; no Windows, Windows + Print Screen), arraste o arquivo para a caixa de mensagem e peça:

Este é o print da página no painel estreito. Confira se dá para ler tudo sem zoom, se nada ficou cortado nas laterais e se os botões são fáceis de tocar com o dedo.

O painel não fica tão estreito quanto um celular? Faça o mesmo no seu navegador de sempre: abra a página com dois cliques no index.html, arraste a borda da janela até ela ficar o mais estreita possível e tire o print do mesmo jeito.

Viu algo errado? Peça o ajuste, aprove e confira de novo. O celular de verdade entra na Etapa 9, com a página no ar.

Guarde uma versão a cada passo que funcionar: "guarde uma versão com uma mensagem em português explicando o que mudou". Se o passo seguinte der errado, você volta para a última versão guardada, como na Aula 10, sem perder o que já estava bom.

Etapa 4 · Revisar antes de publicar (Aula 09)

Daqui a pouco, tudo o que está nas versões guardadas vai para a internet. Antes, a revisão da Aula 09, com mais cuidado do que nunca.

O que mudou. Peça:

Liste os arquivos que mudaram desde a primeira versão guardada e explique cada mudança em português simples.

Depois, pergunte: "mudou algum arquivo que eu não pedi?". Os dois pedidos usam comandos do Git que só olham e rodam sem pedir licença.

A segunda opinião. Rode o revisor da Aula 09, apontando para o arquivo da página. Digite na caixa de mensagem:

/code-review index.html

Se a sua página também tem um estilo.css, rode de novo com /code-review estilo.css. Os achados chegam no card Code review, como na Aula 09. Peça a tradução, como lá: "explique cada achado em português simples: o que acontece com o cliente se isso ficar como está?". Depois, separe cada achado nas três pilhas. Por exemplo (os seus achados serão outros):

Para corrigir, peça na caixa de mensagem, um achado de cada vez, e confira você mesmo, com um print, como na Etapa 3. Deixe o Apply fixes (aplicar as correções) de lado: ele corrige tudo o que ainda está aberto, inclusive um achado que pode estar errado, como o do WhatsApp no exemplo.

A senha de fora. Peça:

Confira se o .gitignore ainda tem o .env e se o .env aparece em alguma versão guardada.

A resposta certa: o .gitignore tem o .env, e nenhuma versão guardada tem o .env. Se alguma tiver, pare aqui e pergunte ao Claude como tirar o .env das versões antes de enviar qualquer coisa: o que está numa versão vai junto para a internet. No curso, a senha do .env é falsa, mas o cuidado é o mesmo da senha de verdade.

Os seus dados. O repositório vai ser público: qualquer pessoa vê todos os arquivos e todas as versões guardadas. Antes de enviar, olhe:

• O telefone. O número das encomendas ainda é o inventado da Aula 09, (11) 90000-0000? Para mostrar a página, deixe assim. Com o número de verdade, ele aparece para qualquer pessoa, na página e no repositório, e continua no histórico mesmo que você o tire depois. Só troque se ele puder ser público.
• O endereço. O de exemplo serve. Se o Claude usou um de verdade, como o da sua casa, troque.
• O seu e-mail. O e-mail que assina as versões (Aula 06) aparece no histórico. A Etapa 5 mostra como usar um e-mail privado nas próximas versões.
• Os outros arquivos. Vão todos, menos o que está no .gitignore: o CLAUDE.md, o decisoes.md, o .gitignore e a pasta .claude, com o settings.json e as skills que você criou (Aula 13), também. Nada disso é segredo, mas é bom saber. O index-copia.html da Aula 05 também vai, e ganha um endereço próprio no site. Se não precisa mais dele, peça para apagar.

Corrigiu algo? Confira com um print e guarde uma versão.

Etapa 5 · A sua conta no GitHub

O GitHub é um site que guarda projetos na internet. Com uma conta, você guarda lá as suas versões e liga o GitHub Pages, que põe a página no ar de graça. A conta gratuita basta para tudo nesta aula.

1. No seu navegador, abra https://github.com/signup. Dá para entrar com um e-mail ou com Continue with Google (continuar com o Google).
2. Siga os passos da tela. Escolha o nome de usuário com calma: ele vira parte do endereço da página, https://seu-usuario.github.io/confeitaria/. Prefira um nome curto e fácil de ditar.
3. Confirme o e-mail. Durante o cadastro, o GitHub pede para você verificar o seu e-mail. Sem isso, ele não deixa criar um repositório.

A verificação em duas etapas. Além da senha, o GitHub passa a pedir um código que muda a cada poucos segundos, gerado num aplicativo do seu celular. Ele recomenda fortemente e exige de algumas contas, avisando por e-mail quando chega a vez delas. Ligue já:

1. No celular, instale um aplicativo de códigos (o GitHub chama de TOTP app), como o Google Authenticator ou o Microsoft Authenticator. O GitHub aceita qualquer um.
2. No GitHub, clique na sua foto, no canto de cima, à direita, e em Settings (configurações).
3. Na barra lateral, na seção "Access" (acesso), clique em Password and authentication (senha e autenticação).
4. Na parte "Two-factor authentication" (verificação em duas etapas), clique em Enable two-factor authentication (ligar a verificação em duas etapas).
5. Em "Scan the QR code" (leia o código QR), aponte o aplicativo para o código da tela. Ele mostra um número de seis dígitos: digite esse número no campo de "Verify the code from the app" (confirme o código do aplicativo).
6. Em "Save your recovery codes" (seus códigos de recuperação), clique em Download (baixar) e deixe o arquivo num lugar seguro: os códigos de recuperação devolvem a sua conta se você perder o celular. Depois, clique em I have saved my recovery codes (já deixei os códigos num lugar seguro).

Opcional: um e-mail privado nas versões. O e-mail que assina as versões aparece para quem olhar o histórico. Para esconder:

1. Em Settings, na seção "Access", clique em Emails (e-mails) e marque Keep my email addresses private (manter os meus e-mails privados).
2. O GitHub mostra um endereço que termina em @users.noreply.github.com. Copie esse endereço e peça ao Claude, com ele no lugar do de exemplo:

Configure o Git desta pasta para assinar as próximas versões com o e-mail 12345678+seu-usuario@users.noreply.github.com.

⚠️ Vale só daqui para a frente. As versões que você já guardou continuam com o e-mail da Aula 06, e elas vão para o GitHub junto com as novas. Se esse e-mail não pode aparecer, pergunte ao Claude antes do primeiro envio: "as versões antigas têm um e-mail que eu não quero publicar; quais são as minhas opções?"

Etapa 6 · O gh, no terminal integrado do app

O gh é o programa oficial do GitHub para o terminal. Com ele, o Claude cria o repositório e abre o pedido para juntar por você. Ele não vem no computador: você instala uma vez e faz o login. O app até oferece instalar o gh na primeira vez que você tenta abrir um pedido para juntar, mas aqui você precisa dele antes, para criar o repositório.

Esta é a etapa em que você digita. Abra o terminal integrado: clique em Terminal, na barra de título da sessão, ou aperte Ctrl + ` (no Mac também é Ctrl). Ele abre num painel, já na pasta da sua página. Os comandos daqui são digitados nesse painel, e não na caixa de mensagem.

Windows. Digite e aperte Enter:

winget install --id GitHub.cli --source winget

Se o Windows ou o winget fizerem alguma pergunta durante a instalação, leia com calma e aceite: é o instalador oficial.

Mac. O gh se instala pelo Homebrew, um instalador de programas para o terminal. Confira se ele já existe:

brew --version

Apareceu um número de versão? Pule para o brew install gh, mais abaixo. Apareceu command not found (comando não encontrado)? Instale o Homebrew pela página oficial: abra https://brew.sh no seu navegador e, na parte Install Homebrew (instalar o Homebrew), clique no botão de copiar, ao lado do comando. Cole no terminal integrado e aperte Enter.

É o tipo de comando com que a Aula 05 pediu cuidado: baixar um programa e rodar na hora. Aqui, quem decide é você, copiando do endereço oficial. O instalador explica o que vai fazer e espera você confirmar com Enter antes de começar. Ele pede a senha do seu usuário, e é normal nada aparecer na tela enquanto você digita. No fim, ele mostra uma parte chamada Next steps (próximos passos), com comandos para colar: cole e rode cada um, ali mesmo, porque sem eles o Homebrew não funciona. Depois, no mesmo terminal, instale o gh:

brew install gh

Num Mac com processador Intel, ou com macOS anterior ao 15 (Sequoia), o Homebrew avisa que essa configuração não tem suporte completo e pode demorar bem mais, porque monta o gh no seu computador. Para saber qual é o seu, abra o menu da Apple e clique em Sobre Este Mac. Deixe terminar e, se der erro, copie a mensagem e peça ajuda ao Claude, na caixa de mensagem.

Linux. No Ubuntu e no Debian, abra no seu navegador a página oficial "Installing gh on Linux and BSD" (instalar o gh no Linux e no BSD), em https://github.com/cli/cli/blob/trunk/docs/install_linux.md. Em "Recommended (Official)" (recomendado, oficial), na parte Debian, passe o mouse sobre o bloco que vem depois de "To install:" (para instalar) e clique no botão de copiar, no canto do bloco. Cole o bloco inteiro no terminal integrado e aperte Enter. O sudo pede a senha do seu usuário, e é normal nada aparecer na tela enquanto você digita.

Não instale o gh pelos pacotes que já vêm no Ubuntu e no Debian: a mesma página avisa que, desde novembro de 2025, as versões 2.45 e 2.46 desses pacotes não funcionam mais com o GitHub, e recomenda o pacote oficial.

Feche o app e abra de novo. Só assim o terminal integrado e o Claude enxergam o gh recém-instalado. A sessão continua na barra lateral: clique nela, confira o Manual no seletor e abra o terminal integrado outra vez.

Conferir. Digite gh --version. Apareceu um número de versão? O gh está instalado. Apareceu que o comando não existe? Escreva na caixa de mensagem: "instalei o gh, mas o terminal não encontra; o que eu faço?".

O login. Digite:

gh auth login

Ele faz quatro perguntas. Escolha com as setas e confirme com Enter:

O Yes da terceira é o que deixa o Git enviar as suas versões sem pedir senha a cada envio. Depois das perguntas, o gh mostra um código de uso único, como A1B2-C3D4. Anote, aperte Enter, e o navegador abre numa página do GitHub. Se pedir, entre na sua conta, com a senha e o código do aplicativo da Etapa 5. Digite o código e autorize o acesso. De volta ao terminal, aparecem Authentication complete. (login concluído) e Logged in as seu-usuario (entrou como seu-usuario). Para conferir depois, gh auth status mostra a conta.

Pronto: o resto da aula volta para a caixa de mensagem e para o site do GitHub.

Etapa 7 · A trava do envio (Aula 10)

Na Aula 10, você criou uma regra ask (perguntar) para o Claude sempre pedir licença antes de enviar para o GitHub (o Git chama de push). Confira se ela está lá, antes do primeiro envio. Peça:

Abra o .claude/settings.json e me explique as regras em português simples.

Clique no caminho do arquivo na resposta: ele abre no painel de arquivos do app, e a regra aparece na lista ask, como Bash(git push *), perto da regra deny do .env.

Não está? Peça, como na Aula 10:

crie uma regra ask no .claude/settings.json para que você sempre me pergunte antes de enviar para o GitHub (git push)

A pasta .claude é protegida, então ele pede licença: aceite. Depois, guarde uma versão com a regra nova.

Por que conferir agora? A partir da Etapa 9, cada envio para a linha principal muda o site no ar. No Manual, todo envio já espera o seu sim. A trava é para o dia em que você usar o modo Auto: nele, o Claude envia sem perguntar, até na linha principal, e a regra ask continua perguntando. Ela pega o envio do jeito como o Claude costuma escrever o comando, não todos os jeitos possíveis: é uma trava, não uma cerca. Por isso, continue lendo cada pedido de comando. E o CLAUDE.md da Etapa 1 orienta, mas não tranca nada: quem tranca são as regras.

Etapa 8 · O repositório público e o primeiro envio

Agora, o Claude cria o repositório no GitHub. Peça:

Crie no GitHub, com o gh, um repositório público chamado confeitaria, ligado a esta pasta. Ainda não envie nada.

O nome do repositório vira a segunda parte do endereço: https://seu-usuario.github.io/confeitaria/. Na sua ideia, use o nome da sua pasta. No Manual, o comando aparece antes de rodar, algo como gh repo create confeitaria --public --source=. --remote=origin. Peça a explicação, se quiser, e aprove.

⚠️ Público quer dizer público. Qualquer pessoa vê todos os arquivos do repositório e todas as versões guardadas, com as mensagens, as datas, o nome e o e-mail que assinam cada uma. É o preço do plano gratuito: nele, o GitHub Pages só publica a partir de um repositório público. Por isso a revisão da Etapa 4 veio antes.

Agora, o primeiro envio. Peça:

Envie as versões guardadas da linha principal para o GitHub.

O pedido de permissão aparece, por causa do Manual e da trava, com um comando como git push -u origin main. Leia e aprove, só desta vez.

Confira no navegador: abra https://github.com/seu-usuario/confeitaria. Se você clicar num link da conversa, na primeira vez o app pergunta se os links abrem no painel Browser ou no seu navegador de sempre. Para o GitHub, escolha o navegador de sempre: é nele que você entrou na sua conta. Os arquivos da página estão lá, e o .env não está. O histórico também foi, com as suas mensagens em português: no site, as versões guardadas se chamam commits.

Etapa 9 · A página no ar, com o GitHub Pages

No site do GitHub, na página do repositório:

1. Embaixo do nome do repositório, clique em Settings (configurações). Se não aparecer, procure no menu ao lado das outras abas.
2. Na barra lateral, na seção "Code, planning, and automation", clique em Pages.
3. Em "Build and deployment" (montagem e publicação), em "Source" (origem), escolha Deploy from a branch (publicar a partir de uma linha).
4. No menu da linha, escolha main. No menu da pasta, deixe / (root), a pasta inteira.
5. Clique em Save (salvar).

O GitHub leva até 10 minutos para publicar. Atualize a página de Pages de vez em quando: quando aparecer o botão Visit site (visitar o site), a página está no ar, no endereço:

https://seu-usuario.github.io/confeitaria/

Agora, o celular de verdade. Mande o endereço para você mesmo no WhatsApp e abra no celular. Confira o mesmo da Etapa 3: o menu, o filtro, o formulário, o modo escuro e, principalmente, se dá para ler tudo sem zoom. Toque em Enviar pelo WhatsApp: o toque leva ao WhatsApp, mas, como o número é inventado, a conversa não chega a abrir. Viu algo errado? Tire um print no celular, mande para o computador (por e-mail, por exemplo) e arraste para a caixa de mensagem.

Daqui em diante, cada envio para a linha principal muda o site no ar, em até 10 minutos. Por isso, a próxima seção vai por outro caminho.

⚠️ Os limites do GitHub Pages. Ele serve para mostrar projetos, não para tocar um negócio: as regras dele não permitem usar o site gratuito como loja ou canal de vendas, nem para receber senhas ou números de cartão. Para mostrar a página que você fez, à família, aos amigos ou num portfólio, ele é ótimo. Os limites de tamanho (1 GB por site, cerca de 100 GB de transferência por mês e cerca de 10 publicações por hora) ficam muito longe de uma página como esta. Se a confeitaria for de verdade e for vender pelo site, procure uma hospedagem feita para isso.

Etapa 10 · Depoimentos numa linha paralela, até o pedido para juntar

Com a página no ar, uma seção nova pede outro caminho: se você mudar direto na linha principal, cada versão enviada aparece no site, pronta ou não. A saída é uma linha paralela (o Git chama de branch): um caminho separado de versões, para mexer sem afetar a linha principal. Quando a seção ficar boa, um pedido para juntar (pull request) leva o que foi feito na linha paralela para a principal, com uma revisão no site do GitHub antes.

É uma tarefa nova, então comece do zero, como na Aula 07: clique em + New (nova sessão), na barra lateral, ou aperte Cmd + N no Mac (Ctrl + N no Windows), e abra a sessão nova na mesma pasta. Antes da primeira mensagem, escolha Plan no seletor de modo e peça:

Crie uma linha paralela chamada depoimentos e, nela, uma seção de
depoimentos de clientes depois do cardápio, com três depoimentos de
exemplo, cada um com um nome e uma frase. Está pronto quando a seção
ficar fácil de ler no modo escuro e com o painel Browser estreito. Para
conferir, eu te mando um print.

💡 Numa página de verdade, use depoimentos de verdade, com a permissão de quem escreveu. Os de exemplo servem para treinar.

Quando o plano estiver bom, troque o seletor para Manual, escreva "Plano aprovado, pode seguir." e faça como na Etapa 3: mudança por mudança, conferindo com prints. Repare numa coisa: o site no ar continua sem os depoimentos. Eles estão só na linha paralela, no seu computador.

Ficou bom? Guarde uma versão. Depois, peça:

Envie a linha depoimentos para o GitHub e abra um pedido para juntar (pull request) para a main, com uma descrição em português do que mudou.

A trava pergunta antes do envio, e o Manual pergunta antes de abrir o pedido: leia e aprove os dois. No fim, o Claude mostra o endereço do pedido, e o pedido também aparece no card Changes (mudanças), no painel ao lado da conversa.

A revisão, no site do GitHub. Abra o endereço do pedido, ou, na página do repositório, clique em Pull requests (pedidos para juntar) e escolha o seu.

1. Clique na aba Files changed (arquivos alterados). Ela mostra, linha por linha, o que muda na linha principal se você juntar: em verde, o que entra; em vermelho, o que sai.
2. Confira com a pergunta da Aula 09: mudou algum arquivo que eu não pedi? Só o arquivo da página deveria aparecer, com a seção nova. Se aparecer outro, volte ao Claude e pergunte por quê, antes de juntar.
3. Quer anotar algo numa linha? Passe o mouse sobre ela e clique no ícone azul de comentário. É opcional.

No GitHub, quem abriu o pedido não pode aprová-lo. Mas, como o repositório é seu, você junta mesmo assim.

Juntar. Volte para a página do pedido e desça até o fim:

1. Clique em Merge pull request (juntar o pedido) e, depois, em Confirm merge (confirmar).
2. Se aparecer Delete branch (apagar a linha paralela), pode clicar: ela já foi juntada, e a lista de linhas fica arrumada.

Em até 10 minutos, os depoimentos aparecem no site. Confira no celular.

Traga a linha principal de volta. O pedido foi juntado no GitHub, não no seu computador: aqui, a linha principal ainda não tem os depoimentos. Peça:

Volte para a linha principal e traga do GitHub as versões novas dela.

Aprove os comandos e abra a página no painel Browser: os depoimentos estão lá. Sem esse passo, a próxima mudança começaria da linha principal antiga.

Etapa 11 · Uma skill para a próxima seção (Aula 13)

Toda seção nova segue os passos que você acabou de fazer. Isso é trabalho para uma skill: você ensina os passos uma vez, e o Claude segue sozinho nas próximas vezes. Peça:

Crie uma skill de projeto em .claude/skills/nova-secao/SKILL.md com os
passos que seguimos nos depoimentos: criar uma linha paralela com o
nome da seção; planejar a seção, com o critério de ficar fácil de ler
no modo escuro e com o painel Browser estreito; fazer mudança por
mudança; me pedir um print para conferir; guardar uma versão; enviar a
linha para o GitHub e abrir um pedido para juntar para a main, com uma
descrição em português; e, quando eu disser que juntei, voltar para a
linha principal e trazer do GitHub as versões novas dela. Na descrição
da skill, diga para usar quando eu pedir uma seção nova na página.

Como a pasta .claude é protegida (Aula 05), ele pede licença para criar o arquivo. Leia os passos e aceite. Depois, guarde uma versão com a skill e envie a linha principal para o GitHub: a trava pergunta, e a página no ar continua igual, porque a skill não faz parte dela.

Para usar a skill, comece uma sessão nova, com + New, na mesma pasta: a sessão nova já enxerga a skill. Escolha Plan no seletor de modo e peça:

Quero uma seção de perguntas frequentes, com três perguntas e respostas de exemplo.

Ou chame a skill pelo nome, na caixa de mensagem: /nova-secao perguntas frequentes. Quando o plano estiver bom, troque o seletor para Manual e escreva "Plano aprovado, pode seguir.", como na Etapa 10. Repare que o Claude segue os passos dela sem você explicar de novo: a linha paralela, o plano, o print, o envio e o pedido para juntar. Na hora do envio, a trava continua perguntando. Revise e junte no GitHub, como na Etapa 10, e diga ao Claude que juntou.

Sem GitHub: o link público de artifact (Aula 25)

Não quer criar a conta no GitHub, ou quer só mostrar a página a alguém agora? Nos planos Pro e Max, o Claude publica a página como um artifact (Aula 25), e o botão Share (compartilhar) cria um link que qualquer pessoa abre, sem login. Peça: "publique a página como um artifact". Depois, abra o artifact no navegador, clique em Share, no topo, e escolha o link público.

Antes de mandar o link, saiba os limites:

• Precisa do app na versão 1.13576.0 ou mais nova, com o login com a assinatura, o mesmo da Aula 03: com chave de API, não publica. Se o Claude disser que não consegue publicar, atualize o app. No Team e no Enterprise, o link público só existe depois que um Owner liga o External sharing (compartilhamento externo).
• É uma página só, de até 16 MiB, sem servidor. Se a sua página tem um estilo.css, peça para o Claude juntar tudo no index.html. Imagens de outros sites não carregam: só as que vão dentro do arquivo.
• Teste o botão do WhatsApp pelo link, no celular, antes de mandar a alguém: a página roda com regras de segurança rígidas.
• O endereço é um link do claude.ai, e quem abre sem login vê o aviso Content is user-generated and unverified. (conteúdo criado por quem publicou, sem verificação) no lugar do seu nome.
• A página fica guardada na infraestrutura da Anthropic, e um link público abre para qualquer pessoa: a revisão da Etapa 4 vale aqui também.
• Para atualizar, peça a mudança na mesma sessão, ou dê o link numa sessão nova: o link continua o mesmo.

Para ir além (opcional)

🔧 Para ir além (para quem já programa; pode pular): esta parte mostra os comandos por trás dos pedidos e o que dá para somar ao projeto com as aulas dos Módulos 4 e 5. Se você nunca programou, pule direto para o Na prática: tudo o que ele pede já foi explicado acima.

Os comandos por trás dos pedidos. O Claude escolhe os comandos, e os seus podem ser um pouco diferentes:

• A trava também no pedido para juntar: "ask": ["Bash(git push *)", "Bash(gh pr create *)"] no .claude/settings.json. O app lê esse arquivo, e as regras valem na ordem deny, depois ask, depois allow.
• Revisar só o que a linha paralela muda: /code-review main...depoimentos, na caixa de mensagem, antes de abrir o pedido. Para as últimas 15 versões de uma vez, /code-review HEAD~15..HEAD.
• O @claude nos pedidos para juntar (Aula 16): no app, a configuração é manual, com os três passos da Aula 16: o Claude GitHub App no repositório, o segredo ANTHROPIC_API_KEY e o arquivo do workflow, juntado por um pedido. Depois, comente num pedido "@claude revise este pedido e aponte os riscos antes de juntar". Cada execução gasta minutos do GitHub Actions e tokens; num projeto de estudo, use com moderação.
• Duas seções ao mesmo tempo: numa sessão nova, ligue a opção Worktree antes da primeira mensagem. A sessão trabalha numa cópia separada da pasta, com a própria linha paralela (Aulas 10 e 20).
• Planejar com o Opus e fazer com o Sonnet: no menu de modelo, o Opus para o plano e o Sonnet antes de escrever "Plano aprovado, pode seguir" (Aula 08).
• Um Projeto, um mod ou um hook: peça duas melhorias numa mensagem só a um Projeto com o repositório (Aula 17), mude a cara do Claude Code com um mod (Aula 18) ou confira algo a cada edição com um hook (Aula 15).
• Um domínio próprio: o GitHub Pages aceita um endereço seu, como www.confeitaria.com.br, no lugar do github.io (About custom domains and GitHub Pages).
• O celular sem sair do computador: no seu navegador de sempre, as ferramentas de desenvolvedor têm um modo que imita a tela de vários celulares, mais fiel do que estreitar o painel.

Na prática: a lista de entrega

O seu projeto final está completo quando você consegue marcar:

• Um CLAUDE.md com as regras da casa, numa versão guardada
• A página completa (início, cardápio com filtro, encomendas pelo WhatsApp, horário e endereço), conferida por prints no painel Browser, normal e estreito
• A revisão da Etapa 4, com o .env fora de todas as versões
• Uma conta no GitHub, com o e-mail confirmado e a verificação em duas etapas ligada
• O gh instalado pelo terminal integrado, com login
• A regra ask do envio conferida
• O repositório público confeitaria, ou o da sua ideia, com as versões enviadas
• A página no ar, aberta no seu celular, em https://seu-usuario.github.io/confeitaria/
• Os depoimentos levados para o site por um pedido para juntar, revisado em Files changed e juntado, com a linha principal trazida de volta
• A skill nova-secao, usada uma vez
• (Opcional) A página também como artifact, com o link público

Resumo

• As regras da casa ficam no CLAUDE.md, que o Claude lê no começo de toda conversa.
• O plano da página inteira vem antes, no Plan, com as cinco partes do pedido e um ajuste seu na caixa de mensagem.
• Conferir é ver: prints do painel Browser, normal e estreito, e, depois de publicar, o celular de verdade. Guarde uma versão a cada passo que funcionar.
• Antes de publicar, revise: o que mudou, o /code-review com o card Code review, o .env fora das versões e os seus dados. Num repositório público, todo mundo vê todos os arquivos e todo o histórico.
• Para pôr no ar: a conta no GitHub com a verificação em duas etapas, o gh com login (a única etapa no terminal integrado), a trava do envio conferida, o repositório público e o GitHub Pages. Cada envio para a linha principal muda o site.
• Seção nova vai numa linha paralela, numa sessão nova, até o pedido para juntar, revisado em Files changed e juntado no GitHub. Depois, traga a linha principal de volta.
• O que se repete vira skill.
• Sem GitHub, o link público de artifact (Pro e Max) mostra a página, com os limites de uma página só.

Curso concluído

Parabéns! Você saiu do primeiro pedido para uma página no ar, com endereço próprio, feita do jeito certo: planejada, conferida, revisada e guardada em versões. A partir daqui, o melhor jeito de aprender é usar o Claude Code nas suas ideias de verdade: comece pequeno, planeje antes de fazer, confira pelo que se vê, revise antes de publicar e transforme em skill ou em regra tudo o que você se pegar repetindo.

Para continuar:

• A documentação oficial do app, em inglês: https://code.claude.com/docs/en/desktop (e a documentação completa: https://code.claude.com/docs)
• A cola rápida do curso, para ter os comandos sempre à mão
• O Módulo 7, Bônus, com as Aulas 20 a 25: várias tarefas ao mesmo tempo, plugins e marketplaces, o Claude vendo (e testando) o seu app, o Claude Code em qualquer lugar, o que fazer quando algo dá errado e artifacts

Agora é com você: abra o app e mãos à obra!