Communitygithub.com

guibean/site-estatico

Crée et fait évoluer des landing pages, sites institutionnels, portfolios et blogs avec le template guibean/nextjs-template. À utiliser lorsque la demande n'exige ni connexion, ni base de données, ni back-end propre.

Qu'est-ce que site-estatico ?

Cette compétence est conçue pour générer rapidement des sites statiques modernes basés sur Next.js, idéale pour les landing pages, sites institutionnels, portfolios ou blogs. Elle repose sur le template `guibean/nextjs-template` et est destinée aux projets purement front-end, exportés en HTML/CSS/JS et déployés sur Cloudflare Pages. La compétence s'assure que l'utilisateur ne nécessite pas de fonctionnalités back-end comme l'authentification, les bases de données, les tableaux de bord ou les API personnalisées ; dans ces cas, elle redirige vers la compétence `sistema-fullstack`. Elle intègre des règles strictes pour maintenir la qualité du code (unicité du `h1`, utilisation de `next/image`, composants shadcn, blocs Aceternity) et fournit une checklist SEO, accessibilité et performance avant livraison. Le déploiement se fait via Cloudflare Pages avec un build command `pnpm build` et un répertoire de sortie `out`.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/guibean/nextjs-fullstack-template/tree/main/.opencode/skills/site-estatico
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Site Statique Next.js

Quand utiliser

Utilisez pour une landing page, un site institutionnel, une page de campagne, un portfolio ou un blog. Le résultat est uniquement front-end, exporté en HTML/CSS/JS et publié sur Cloudflare Pages.

N'utilisez pas lorsqu'il y a connexion, inscription, base de données, panneau d'administration, facturation, upload ou API propre. Dans ces cas, utilisez la compétence sistema-fullstack.

Créer un projet

  1. Confirmez le nom, le domaine final, l'objectif de la page et s'il existe un formulaire de contact.
  2. Utilisez le dépôt de site statique :
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. Créez .env.local à partir de .env.example et renseignez NEXT_PUBLIC_SITE_URL, le nom, l'auteur et l'e-mail.
  2. Lancez pnpm install, pnpm lint, pnpm typecheck et pnpm build.
  3. Alors seulement, modifiez le contenu.

Règles

  • N'ajoutez aucune dépendance back-end.
  • Installez les composants shadcn à la demande :
pnpm exec shadcn add dialog
pnpm exec shadcn add @aceternity/spotlight
  • Pour les blocs Aceternity, vérifiez la licence et installez motion seulement si le composant l'exige.
  • Maintenez un seul h1 par page et la hiérarchie des titres.
  • Chaque nouvelle page a besoin de createMetadata, d'une entrée dans le sitemap et d'un lien navigable.
  • Utilisez next/image avec sizes et des images traitées par pnpm images.
  • N'utilisez pas output: "server", Server Actions ou API Routes de Next dans ce profil.
  • Formulaire : conservez Turnstile + functions/api/contact.ts + Resend.

Checklist avant livraison

Lisez references/seo-checklist.md et confirmez :

  • metadata, canonical, Open Graph et robots
  • le sitemap inclut toutes les pages publiques
  • llms.txt mis à jour
  • images dans assets/images/ et public/images/ générées
  • un h1, contraste, focus visible et navigation au clavier
  • liens externes avec rel approprié
  • pnpm lint, pnpm typecheck, pnpm build passent
  • Lighthouse ≥ 95 dans les quatre catégories
  • confidentialité mise à jour s'il y a un formulaire/analytics

Déploiement Cloudflare Pages

  • Build command : pnpm build
  • Output directory : out
  • Node : 24
  • Variables publiques dans le build et secrets dans les Functions
  • Configurez le domaine dans NEXT_PUBLIC_SITE_URL, TURNSTILE_HOSTNAME et CONTACT_ALLOWED_ORIGIN

Individual skills in this repo

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

guibean/sistema-fullstack

Cria e evolui sistemas com login, banco de dados, painel ou API própria no template guibean/nextjs-fullstack-template. Usa Next.js 16 standalone, PostgreSQL, Drizzle, Better Auth, Zod, Base UI e deploy em VPS.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community