Primeiro projeto

Este passo a passo cria uma landing de vendas com o template padrão, landing-page, e o modelo vendas. Os comandos rodam no terminal, e a saída de cada um é a de uma execução real da versão 1.1.0.

Antes, siga Requisitos e instalação. Os exemplos usam slash; sem o registro com bun link, troque por bun <caminho-do-checkout>/cli/bin.ts.

Criar o projeto

Na pasta onde quer o projeto, rode:

slash create minha-landing

O create recusa a pasta se ela já existir. Ela também não pode estar dentro de um workspace do bun, isto é, de uma pasta cujo package.json declare workspaces. Crie o projeto fora dessa árvore.

Com --template você escolhe outro template: landing-page (padrão), one-page, multi-page ou blog. Com --model escolhe o modelo do template. O landing-page aceita vendas (padrão), produto, evento, lancamento e captura. Cada modelo está em Modelos da landing.

O create clona o slash-ssg, copia para src/ui/ os componentes do slash-kit (com o arquivo VERSION que diz a tag e o commit de origem), instala as dependências e faz o commit inicial. Se algo falhar no meio, ele apaga a pasta que criou.

A saída do comando é esta:

Projeto criado em <projeto>.
Próximos passos, dentro da pasta:
  slash check                     confere conteúdo, contraste e SEO
  slash approve                   libera o conteúdo fictício aprovado
  bun run dev                     servidor local
  slash verify --update-baseline  grava as bases visuais e verifica tudo
[saída: 0]

Editar o conteúdo

Entre na pasta e edite os arquivos que o AGENCIA.md do projeto lista:

src/data/content.ts: textos e props de cada seção.
src/data/site.ts: nome, endereço, WhatsApp, checkout, GTM e SEO.
src/theme.ts: cores, fontes e raio. É o único arquivo de cores.
src/pages/home.ts: a ordem das seções e a variante de cada uma.
public/placeholder/: imagens de exemplo, para trocar pelas reais.

Não edite src/ui/. Ele é a cópia dos componentes do slash-kit. Para uma seção nova ou uma mudança nos componentes, peça uma versão nova ao fornecedor.

Cada valor do conteúdo traz uma origem:

agency(...): passa direto.
claude(...): texto escrito pelo Claude. Precisa de liberação com slash approve.
fictitious(...): dado de exemplo. Também precisa de liberação.
pending(...): lugar que ainda falta preencher. Bloqueia tudo até ser trocado.

Para ver a página enquanto edita, rode bun run dev dentro da pasta. Ele recarrega ao salvar.

Conferir: `slash check`

slash check confere o conteúdo, o contraste do tema e o SEO. Quando está tudo certo, ele responde check ok. Quando não está, lista o que bloqueia, por exemplo:

pendente em <campo>: um pending(...) ainda não foi trocado.
placeholder em <campo>: um valor de modelo ainda está lá.
fictício em <campo>: libere com slash approve: falta a liberação.

Com slash check --watch, o comando roda de novo a cada mudança em src/, até você apertar Ctrl+C.

Liberar o conteúdo: `slash approve`

Quando o check só reclama de conteúdo claude(...) ou fictitious(...), rode slash approve. Ele lista os itens e pede confirmação. Sem resposta afirmativa, nada é gravado.

A saída de um projeto de exemplo é esta. Na gravação, a resposta ao prompt foi s.

about.numbers[0] (fictitious): {"value":"12 anos","label":"de confeitaria"}
about.numbers[1] (fictitious): {"value":"3.400","label":"alunas formadas"}
about.numbers[2] (fictitious): {"value":"4,9","label":"nota média das avaliações"}
about.numbers[3] (fictitious): {"value":"27","label":"estados com alunas ativas"}
about.paragraphs[0] (fictitious): Sou a Marina, confeiteira há 12 anos. Comecei vendendo bolos…
about.paragraphs[1] (fictitious): Criei este curso para encurtar o caminho que levei anos para…
about.title (claude): Quem ensina
consent.text (claude): Usamos cookies para medir o uso da página e melhorar a ofert…
cta.cta.href (fictitious): https://pay.example.com/checkout/curso
cta.cta.label (claude): Quero garantir minha vaga
cta.text (claude): Garantia de 7 dias: se não gostar, devolvemos o valor.
cta.title (claude): Pronta para vender seus primeiros doces?
faq.items[0].answer (claude): Não. O curso começa do zero e avança passo a passo.
faq.items[0].question (claude): Preciso de experiência?
faq.items[1].answer (claude): Para sempre, com todas as atualizações futuras.
faq.items[1].question (claude): Por quanto tempo tenho acesso?
faq.items[2].answer (claude): Sim, em até 12 vezes, além de Pix e boleto.
faq.items[2].question (claude): Posso pagar no cartão?
faq.items[3].answer (claude): Você tem 7 dias para pedir o reembolso, sem burocracia.
faq.items[3].question (claude): E se eu não gostar?
faq.title (claude): Perguntas frequentes
features.intro (claude): Quatro pilares que tiram você do improviso e colocam pedidos…
features.items[0].text (claude): Mais de 40 receitas com rendimento e custo calculados.
features.items[0].title (claude): Receitas testadas
features.items[1].text (claude): Planilha pronta para saber quanto cobrar em cada doce.
features.items[1].title (claude): Preço sem achismo
features.items[2].text (claude): Modelos de mensagem e cardápio para fechar encomendas.
features.items[2].title (claude): Vendas pelo WhatsApp
features.items[3].text (claude): Tire dúvidas com a professora em dias úteis.
features.items[3].title (claude): Suporte de verdade
features.title (claude): Tudo para começar a vender já na primeira semana
featureSplit.eyebrow (claude): Como funciona
featureSplit.points[0] (claude): Aulas curtas, de até 12 minutos
featureSplit.points[1] (claude): Passo a passo com fotos e vídeos
featureSplit.points[2] (claude): Certificado ao concluir
featureSplit.text (claude): Cada módulo termina com uma tarefa prática, para você aplica…
featureSplit.title (claude): Do primeiro bolo à primeira encomenda
hero.cta.label (claude): Quero ver a aula de apresentação
hero.eyebrow (claude): Curso online de confeitaria
hero.rating (fictitious): {"value":4.9,"count":1280}
hero.subtitle (claude): Aprenda receitas, preço e vendas em 30 dias, no seu ritmo, d…
hero.title (claude): Transforme sua cozinha em um negócio que vende todo dia
pricing.guarantee.text (claude): Se não gostar, devolvemos o valor integral.
pricing.guarantee.title (claude): Garantia de 7 dias
pricing.intro (claude): Pague uma vez e tenha acesso para sempre.
pricing.plans[0].cta.href (fictitious): https://pay.example.com/checkout/curso
pricing.plans[0].cta.label (claude): Quero garantir minha vaga
pricing.plans[0].features[0] (claude): Acesso vitalício às aulas
pricing.plans[0].features[1] (claude): Planilhas e modelos prontos
pricing.plans[0].features[2] (claude): Comunidade de alunas
pricing.plans[0].features[3] (claude): Certificado de conclusão
pricing.plans[0].name (claude): Curso completo
pricing.plans[0].note (fictitious): ou 12x de R$ 51,40 no cartão
pricing.plans[0].price (fictitious): {"amount":497,"currency":"BRL","period":"once"}
pricing.title (claude): Um preço simples, sem surpresas
site.business (fictitious): {"name":"Doces Lucrativos","legalId":"12.345.678/0001-90"}
site.checkoutUrl (fictitious): https://pay.example.com/checkout/curso
site.gtmId (fictitious): GTM-TEST000
site.whatsapp (fictitious): {"number":"11999999999","message":"Olá! Quero saber mais sob…
testimonials.items[0] (fictitious): {"quote":"Na terceira semana já fechei minha primeira encome…
testimonials.items[1] (fictitious): {"quote":"A planilha de preços mudou minha margem. Eu vendia…
testimonials.items[2] (fictitious): {"quote":"Aulas curtas, que cabem na rotina de quem tem filh…
testimonials.title (claude): Quem fez o curso conta como foi
Liberar 63 item(ns) de conteúdo fictício/Claude? [s/N] 
[saída: 0]

Se você confirmar, o comando grava content-release.json na pasta do projeto. Nele fica o nome que o git tem configurado, que é quem liberou. Por isso o git precisa ter user.name.

O approve não libera pending(...) nem placeholder. Antes, troque esses valores pelo texto real. Se não houver nada a liberar, ele responde Nada a liberar.

Verificar: `slash verify`

O playwright do verify precisa do Chromium. Se ainda não o instalou, rode bunx playwright install chromium dentro da pasta, como descrito em Requisitos e instalação.

No primeiro uso, rode slash verify --update-baseline. Ele grava as bases visuais que um projeto novo ainda não tem, e depois verifica tudo. Nos usos seguintes, rode slash verify.

slash verify roda a verificação completa, na ordem abaixo. Ele para no primeiro passo que falhar.

bases visuais: confere se as imagens de referência existem (só sem --update-baseline);
lint (só se o projeto declarar o script lint);
typecheck e testes;
check;
build;
html;
orçamento de peso;
playwright: testes E2E, acessibilidade e regressão visual;
lighthouse.

A saída de uma execução bem-sucedida, com --update-baseline, mostra uma linha por etapa:

✓ typecheck + testes (<n> s)
✓ check (<n> s)
✓ build (<n> s)
✓ html (<n> s)
✓ orçamento (<n> s)
✓ playwright (<n> s)
✓ lighthouse (<n> s)
[saída: 0]

Sem as bases visuais, o slash verify falha na etapa de bases. Por isso o primeiro uso leva --update-baseline. Depois, faça commit das imagens de tests/**/*-snapshots/. A renderização muda entre sistemas operacionais. Se o verify acusar diferença só porque trocou de máquina, grave as bases de novo nessa máquina.

O verify roda numa cópia do projeto, então pode rodar com o bun run dev aberto. Para não prender o terminal, use slash verify --background. Ele grava o andamento em .slash/verify.log e o veredito em .slash/verify.json. Só um verify roda por vez; se já houver um em andamento, o comando diz qual é o processo.

Publicar: commit e push

O create já fez o commit inicial. Depois de editar, grave as mudanças com git add -A e git commit.

Para publicar no GitHub, há duas formas:

Com --github owner/repo, o create cria o repositório privado com o gh e envia a branch main. Use essa opção já na criação: slash create minha-landing --github owner/repo.
Sem --github, adicione o remoto e envie: git remote add origin <url-do-repositório> e depois git push -u origin main.

Com --github, o primeiro push usa --no-verify: o projeto recém-criado ainda não tem um verify verde para conferir. Sem --github, o primeiro git push já passa pelo hook. Depois do primeiro, o hook .githooks/pre-push roda antes de cada envio. Com o slash no PATH, ele roda slash verify --if-changed, que sai sem rodar se a árvore já passou no verify e está toda commitada. Sem o slash, roda bun run test:all.

Próximo passo: Fluxo e prazos.