⚙️
Tools Box
Toutes les skills
Custom🔧 Dev & Code

deploy-stack

Trame de déploiement d'un site web Next.js sur un sous-domaine custom : DNS chez ton registrar, hosting Vercel, base Supabase, email transactionnel Resend. Charge ce skill quand tu veux mettre un projet en prod sur un sous-domaine de TON domaine, brancher un projet Vercel existant sur un domaine custom, ou construire une nouvelle landing. Couvre les pièges classiques : conflit CNAME, fallback NEXT_PUBLIC_APP_URL, Resend DKIM sur sous-domaine mail.*, Google OAuth redirect URL.

Installation & invocation

1. Crée le fichier sur ta machine :

~/.claude/skills/deploy-stack/SKILL.md

2. Colle le contenu du SKILL.md ci-dessous, et redémarre Claude Code. Tu peux ensuite l'invoquer manuellement avec :

/deploy-stack

Claude peut aussi la déclencher automatiquement quand le contexte matche.

🇫🇷 Résumé FRCe que fait cette skill, en français

Trame pour déployer un site Next.js sur un sous-domaine custom : DNS, Vercel, Supabase, Resend. Avec les pièges classiques (CNAME, DKIM, OAuth redirect).

Contenu de la skill

Deploy stack

Trame réutilisable pour mettre rapidement en prod un projet Next.js sur un sous-domaine de ton domaine principal. Cible la stack moderne : DNS chez ton registrar (OVH/Cloudflare/Gandi), hosting Vercel, base Supabase (Postgres + Auth + Storage), email transactionnel Resend.

À adapter avec tes propres valeurs : ton domaine, ton compte Vercel, ton projet Supabase, tes clés API. Ne hardcode jamais les credentials dans le code.

Trois scénarios couverts

1. Nouveau projet Next.js sur un sous-domaine

  1. Crée le repo gh repo create <nom> --private --clone
  2. npx create-next-app@latest avec les options : App Router, TypeScript, Tailwind, ESLint
  3. Push initial, connecte Vercel au repo, premier deploy
  4. Provisionne un projet Supabase, ajoute NEXT_PUBLIC_SUPABASE_URL et NEXT_PUBLIC_SUPABASE_ANON_KEY dans Vercel
  5. DNS : ajoute un CNAME <sous-domaine> → cname.vercel-dns.com
  6. Dans Vercel, ajoute le domain custom <sous-domaine>.<ton-domaine>
  7. Setup Resend : vérifie un sous-domaine mail.<ton-domaine> (DKIM + SPF + DMARC)

2. Brancher un projet Vercel existant sur un sous-domaine custom

  1. Identifie le projet Vercel cible
  2. Ajoute le domain dans Vercel
  3. DNS : CNAME ou A record selon la reco Vercel
  4. Update NEXT_PUBLIC_APP_URL dans les env vars
  5. Si OAuth (Google/GitHub) : update le redirect URL côté provider

3. Construire une landing principale (apex domain)

  1. Provisionne un projet Next.js dédié à la landing
  2. Configure les DNS A records ou ALIAS sur l'apex
  3. Pense au www → apex redirect
  4. Setup analytics (Plausible ou Vercel Analytics)

Stack par défaut

BriqueChoix
FrameworkNext.js 14 App Router
HostingVercel (auto-deploy push main)
DBSupabase Postgres (RLS public-read + admin-write)
AuthSupabase magic link
EmailResend via sous-domaine mail.*
AIModèle de ton choix (Claude, Gemini, etc.) selon usage
UIshadcn/ui sur @base-ui/react ou Radix

Pièges connus

Conflit DNS

Le registrar refuse souvent CNAME si un A existe pour le même host. Supprime l'ancien d'abord avant de créer le CNAME Vercel.

Fallback NEXT_PUBLIC_APP_URL

Centralise l'URL du site dans un module (src/lib/site-url.ts) avec fallback hardcodé. Sinon le build casse si la variable d'env n'est pas définie.

export const SITE_URL =
  process.env.NEXT_PUBLIC_APP_URL ??
  "https://default.example.com";

Resend DKIM sur sous-domaine mail.*

Resend recommande un sous-domaine dédié (mail.<domaine>). Les enregistrements DKIM/SPF/DMARC se mettent sur ce sous-domaine, pas sur l'apex.

Google OAuth redirect URL

Quand tu changes de domain, update la liste des Authorized redirect URIs côté Google Cloud Console. Sinon redirect_uri_mismatch au login.

Cookies Supabase et force-dynamic

Les pages qui lisent l'auth via cookies doivent être en force-dynamic (sinon Vercel cache vide la session côté serveur).

Adapter ce skill

Ce skill est un template. Pour ton usage perso :

  1. Fork-le dans ~/.claude/skills/<ton-nom>-stack/
  2. Ajoute tes valeurs en haut (domaine, compte Vercel, projet Supabase)
  3. Ajoute tes pièges spécifiques au fil des déploiements

Liens

Skills proches

better-auth-best-practices

Configure Better Auth server and client, set up database adapters, manage sessions, add plugins, and handle environment variables. Use when users mention Better Auth, betterauth, auth.ts, or need to set up TypeScript authentication with email/password, OAuth, or plugin configuration.

csv-to-fullstack-site

Transforms a CSV, Excel or Google Sheet into a deployed full-stack Next.js site on the user's stack (GitHub + Vercel + Supabase + SendGrid). Use this skill whenever the user has tabular data (any domain - real estate, contacts, recipes, alternance, inventory, anything) and wants to turn it into a live web app, a directory site, an internal tool, or a CRM-style interface. Trigger phrases include "j'ai un CSV", "I have a spreadsheet", "build me a site from this Excel", "fais-moi un site avec ces données", "deploy this Google Sheet as an app", or any time the user uploads tabular data and mentions wanting it online. Encodes the user's specific stack conventions (Next.js 14 App Router, shadcn/ui with @base-ui/react, Tailwind, Zod 4 + react-hook-form, Supabase Postgres + RLS + magic link, Vercel auto-deploy, SendGrid in French) and all the gotchas they hit building production apps. Even if the user only says "build me a site for X" without mentioning the data file explicitly, ask them if they have a CSV/Excel/Sheet and use this skill.

finishing-a-development-branch

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup

firecrawl

| Search, scrape, and interact with the web via the Firecrawl CLI. Use this skill whenever the user wants to search the web, find articles, research a topic, look something up online, scrape a webpage, grab content from a URL, get data from a website, crawl documentation, download a site, or interact with pages that need clicks or logins. Also use when they say "fetch this page", "pull the content from", "get the page at https://", or reference external websites. This provides real-time web search with full page content and interact capabilities — beyond what Claude can do natively with built-in tools. Do NOT trigger for local file operations, git commands, deployments, or code editing tasks.

notion-api-cli

Piloter l'API Notion en bas niveau et via le CLI ntn : créer/mettre à jour des pages, query des databases, déployer des workers Notion, uploader des fichiers, appeler l'API REST Notion. Charge ce skill quand l'utilisateur veut 'appeler l'API Notion', 'déployer un worker Notion', 'uploader un fichier dans Notion', ou toute opération technique bas niveau sur Notion (≠ conception d'espace Notion = skill notion).

shadcn

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".