Communitygithub.com

guibean/site-estatico

Cria e evolui landing pages, sites institucionais, portfólios e blogs com o template guibean/nextjs-template. Use quando o pedido não exigir login, banco de dados ou back-end próprio.

O que é site-estatico?

Esta skill é projetada para desenvolvedores que precisam criar rapidamente landing pages, sites institucionais, portfólios ou blogs estáticos, utilizando um template Next.js especializado. Ela automatiza a configuração inicial do projeto, clonando o template 'guibean/nextjs-template', configurando o repositório remoto e as variáveis de ambiente essenciais. O foco é exclusivamente em front-end, com exportação para HTML/CSS/JS e publicação no Cloudflare Pages. A skill impõe regras rígidas para evitar dependências de back-end, promovendo o uso de componentes shadcn e blocos Aceternity quando necessário, e inclui um checklist de qualidade (SEO, performance, acessibilidade) antes da entrega. Funciona em plataformas como Claude Code, Cursor ou Codex, e é indicada para projetos que não requerem autenticação, banco de dados ou API própria.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/guibean/nextjs-fullstack-template/tree/main/.opencode/skills/site-estatico

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Site Estático Next.js

Quando usar

Use para landing page, site institucional, página de campanha, portfólio ou blog. O resultado é somente front-end, exportado como HTML/CSS/JS e publicado no Cloudflare Pages.

Não use quando houver login, cadastro, banco de dados, painel administrativo, cobrança, upload ou API própria. Nesses casos use a skill sistema-fullstack.

Criar um projeto

  1. Confirme nome, domínio final, objetivo da página e se existe formulário de contato.
  2. Use o repositório de site estático:
git clone https://github.com/guibean/nextjs-template.git <slug>
cd <slug>
git remote remove origin
git remote add origin https://github.com/guibean/<slug>.git
  1. Crie .env.local a partir de .env.example e preencha NEXT_PUBLIC_SITE_URL, nome, autor e e-mail.
  2. Rode pnpm install, pnpm lint, pnpm typecheck e pnpm build.
  3. Só então altere o conteúdo.

Regras

  • Não adicione dependências de back-end.
  • Instale componentes shadcn sob demanda:
pnpm exec shadcn add dialog
pnpm exec shadcn add @aceternity/spotlight
  • Para blocos Aceternity, verifique a licença e instale motion apenas se o componente exigir.
  • Mantenha um único h1 por página e a hierarquia de headings.
  • Toda página nova precisa de createMetadata, entrada no sitemap e link navegável.
  • Use next/image com sizes e imagens processadas por pnpm images.
  • Não use output: "server", Server Actions ou API Routes do Next neste perfil.
  • Formulário: preserve Turnstile + functions/api/contact.ts + Resend.

Checklist antes de entregar

Leia references/seo-checklist.md e confirme:

  • metadata, canonical, Open Graph e robots
  • sitemap inclui todas as páginas públicas
  • llms.txt atualizado
  • imagens em assets/images/ e public/images/ geradas
  • um h1, contraste, foco visível e navegação por teclado
  • links externos com rel apropriado
  • pnpm lint, pnpm typecheck, pnpm build passando
  • Lighthouse ≥ 95 nas quatro categorias
  • privacidade atualizada se houver formulário/analytics

Deploy Cloudflare Pages

  • Build command: pnpm build
  • Output directory: out
  • Node: 24
  • Variáveis públicas no build e secrets nas Functions
  • Configure o domínio em NEXT_PUBLIC_SITE_URL, TURNSTILE_HOSTNAME e CONTACT_ALLOWED_ORIGIN

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Habilidades Relacionadas