Onboarding — Claude Code @ Pianeta

Apri il Terminale del Mac (cmd+spazio → "Terminale"). Verifica che hai tutto, spuntando man mano.

Mac con macOS recente (Sonoma o più nuovo)

→ Mela in alto a sinistra → "Informazioni su questo Mac"

Node.js 20 o superiore installato

Verifica nel Terminale:

node --version

Se < v20 o errore, installa: nodejs.org (versione LTS)

Account GitHub PianetaDev

Le credenziali sono nel doc privato CREDENZIALI.md. Chiedi a Max se non l'hai.

Claude Code è un'app da terminale che ti permette di chattare con Claude e fargli scrivere/modificare codice direttamente sui tuoi file. Una sola installazione, vale per tutti i progetti.

2.1 — Installa il CLI

npm install -g @anthropic-ai/claude-code

Se ti dà "permission denied" o "EACCES", aggiungi sudo davanti.

2.2 — Login con account Anthropic Pianeta

claude

Si apre il browser per il login. Usa l'email Pianeta (vedi CREDENZIALI.md). Al primo lancio ti chiede di scegliere il modello: Claude Sonnet 4.5.

💡 Come funziona

Claude Code lavora sempre nella cartella del Terminale. Per iniziare un progetto, prima vai nella sua cartella con cd /percorso/cartella, poi lanci claude. Esci dalla chat con /exit o Ctrl+C.

Sono i tre servizi che usiamo per ogni progetto. GitHub conserva il codice, Vercel lo pubblica online, Supabase è il database. Le credenziali sono in CREDENZIALI.md (chiedi a Max).

3.1 — Configura Git con identità Pianeta

Tutti i commit del team usano lo stesso autore. Lancia una sola volta:

git config --global user.email "info@pianeta.studio"
git config --global user.name "Pianeta Studio"

⚠️ Senza questo, Vercel rifiuta i deploy.

3.2 — Vercel CLI

npm install -g vercel
vercel login

3.3 — Supabase (opzionale per landing semplici)

Serve solo se la tua landing usa il database (es. form, login, contenuti dinamici). Per landing statiche puoi saltare. Se serve, le credenziali sono in CREDENZIALI.md.

pianeta-xp è il repo dove vivono tutte le landing experience (xp.pianeta.studio). Aggiungiamo le nuove pagine qui.

4.1 — Clona

cd ~/Documents
git clone https://github.com/PianetaDev/pianeta-xp.git
cd pianeta-xp

4.2 — Installa le dipendenze

npm install

Ci mette ~2-3 minuti la prima volta.

4.3 — Scarica le variabili ambiente

vercel link --yes --project pianeta-xp
vercel env pull .env.local --yes

Crea il file .env.local con tutte le chiavi. Non commitarlo mai (è già in .gitignore).

Adesso fai parlare Claude. Apri il Terminale, vai nella cartella del progetto, lancia claude, e segui il flow.

5.1 — Apri Claude e fagli un brief

Lancia:

claude

Quando vedi il prompt, scrivi (o copia):

Crea una nuova landing page in app/pages/test-[TUONOME].vue.

Stile: dark, accent verde lime #d6ff5c, serif EB Garamond per il titolo,
sans per il body. Layout simile a app/pages/choosetoseethem.vue ma con questi
contenuti:

- Hero: titolo "Ciao, sono [NOME]" + sottotitolo libero
- Sezione "Cosa faccio": 3 card affiancate
- Footer minimal

Usa definePageMeta layout:false così è autonoma. Quando hai finito,
mostrami l'URL locale per testarla.

5.2 — Vedi la pagina in locale

Apri un secondo Terminale (lascia Claude aperto nel primo). Nella stessa cartella:

npm run dev

Apri http://localhost:3000/test-[TUONOME]. Modifiche live: ogni volta che chiedi a Claude di cambiare qualcosa, vedi il refresh automatico.

5.3 — Pubblica online

Quando sei contenta, chiedi a Claude:

Committa con un messaggio chiaro, push su main e deploy in produzione.

Dopo ~1 minuto la pagina sarà su https://xp.pianeta.studio/test-[TUONOME].

📐 Sii specifica

"Fai una landing carina" → male. "Landing dark, hero serif, 3 card, accent #d6ff5c, palette come app/pages/choosetoseethem.vue" → bene. Più riferimenti dai (file, URL, screenshot), meno Claude inventa.

🧠 Usa le skill

Per lavori creativi (nuova landing, nuova feature) inizia con:

Usa la skill brainstorming prima di partire

Per produrre UI di qualità:

Usa la skill frontend-design

Le skill fanno fare a Claude pause, domande, scelte migliori — invece di buttarsi su codice subito.

🪄 Iterazione

Non chiedere mai tutto in un colpo solo. Fai prima la struttura, vedi, poi rifinisci. Tipico flow:

"Crea la struttura della pagina con sezioni vuote"
"Riempi la hero con questo testo"
"Cambia il colore di X in Y"
"Sposta la sezione X sopra a Y"
"Mobile: la card è troppo piccola, allargala"

📸 Mandagli immagini

Trascina screenshot direttamente nel terminale Claude (incollali). "Replica questo layout" + screenshot funziona benissimo. Stessa cosa con URL pubblici.

🚦 Quando si rompe qualcosa

Errore in pagina? Mandagli lo screenshot della console (Cmd+Opt+I → Console). Errore al deploy? Copia/incolla il messaggio di errore. Claude debugga molto bene se ha il messaggio esatto.

Ho letto questa sezione

📁 Struttura del repo pianeta-xp

app/pages/ → ogni file .vue qui dentro è una pagina
app/components/ → componenti riusabili
app/layouts/ → wrapper per più pagine
server/api/ → endpoint backend (solo se serve)

🎨 Palette XP

Background dark: #0a0a0a
Accent lime: #d6ff5c
Serif: EB Garamond (titoli)
Sans: General Sans (body)
Mono caps tracking 0.3em uppercase per chip e label

🚫 Non commitare mai

File .env* (chiavi)
Cartelle node_modules/, .nuxt/, .vercel/
Credenziali, token, password — se Claude te le chiede, dirottalo verso CREDENZIALI.md

✅ Prima di considerarla finita

Apri la pagina in incognito (no cache)
Test mobile (DevTools toggle device)
Click su tutti i link/CTA
Ortografia in italiano e inglese (chiedi a Claude di rileggere)

Ho letto le convenzioni

Cheatsheet · tienila sempre vicina

Comandi che userai ogni giorno

cd ~/Documents/pianeta-xp: Vai nella cartella del progetto
git pull: Scarica le modifiche degli altri
claude: Avvia Claude nella cartella corrente
npm run dev: Avvia il server locale (localhost:3000)
/exit: Chiude Claude (dentro la chat)
Ctrl+C: Ferma npm run dev

Quando ti blocchi

Chiedi aiuto

1. Prima a Claude stessa: spiega il problema dentro la chat. Spesso si risolve.
2. #ops-design su Slack: @Francesca, @Sara, @Ludovica si aiutano tra loro.
3. Max: per accessi, decisioni, blocchi tecnici grossi.

Pianeta · onboarding interno · v1

Installa Claude Code e fai la tua prima landing in un pomeriggio.

Prerequisiti — verifica setup Mac

Installa Claude Code

Collega GitHub, Vercel, Supabase

Clona il repo Pianeta-XP e installa

La tua prima landing — guidata

Come parlare a Claude (e ottenere quello che vuoi)