Claude Code per a perfils tècnics

Explora aquesta carpeta i explica'm què hi ha: quins fitxers, què conté cadascun i què creus que hem de construir. No modifiquis res. Acaba amb tres preguntes que em faries abans de començar.

Segons el brief, quins horaris té el local de Sants i quins colors hem de fer servir a la web?

Afegeix a CLAUDE.md aquestes normes del projecte:
- Web estàtica en HTML, CSS i JavaScript, sense frameworks ni dependències de npm.
- Tots els textos de la web en català. Colors i to del brief.
- Ha de funcionar bé al mòbil.
- Abans de donar una tasca per acabada, obre la pàgina i comprova-la a 390 px d'amplada i a escriptori.
- Missatges de commit en català, en imperatiu i curts: «Afegeix el formulari de càtering».
Mantén el fitxer per sota de 60 línies.

Crea un fitxer prova.html amb un títol gran que digui «Prova de Cafès Roca» i res més.

Llegeix brief_web_cafes_roca.txt i els tres articles de la carpeta articles/.
Vull la landing de Cafès Roca: un index.html i un estils.css, sense dependències.
Seccions del brief en aquest ordre: capçalera amb lema i botó al càtering, els tres locals, carta destacada, una secció «Del nostre blog» que de moment quedi buida, formulari de càtering i peu.
El formulari no s'envia enlloc: en enviar-lo, valida els camps i mostra un missatge de confirmació a la mateixa pàgina.
Fes-me primer les preguntes que necessitis i després un pla amb l'estructura de fitxers i les decisions de disseny.

Mira captura.png. És la secció de la carta vista al mòbil. Els preus queden massa enganxats al nom del plat i la línia de punts no s'alinea. Arregla-ho perquè es llegeixi bé a 390 px i comprova que a escriptori no ha canviat res.

Crea scripts/articles.mjs, en Node.js i sense dependències, que:
- llegeixi cada .md de articles/ amb la capçalera entre --- (titol, data, autora, resum);
- converteixi el Markdown a HTML: títols, paràgrafs, llistes, negreta, enllaços i taules;
- generi una pàgina per article a blog/, amb la mateixa capçalera i estils de la landing i un enllaç per tornar;
- ompli la secció «Del nostre blog» d'index.html amb una targeta per article, de més nou a més antic.
No l'executis tu: explica'm com l'executo.

Inicialitza un repositori de Git en aquesta carpeta, crea un .gitignore adequat per a una web estàtica i fes el primer commit amb tots els fitxers. Missatge en català.

Analitza dades/vendes_cafes_roca_2026.csv (punt i coma, coma decimal; columnes data, local, categoria, producte, unitats, import_eur).
Escriu analisi/analisi.mjs en Node.js, sense dependències, que:
1. Llegeixi i netegi el CSV: comprovi les columnes, descarti les files no vàlides i digui quantes n'ha descartat.
2. Calculi: total del semestre; vendes i pes per local; vendes per mes i local; vendes i pes per categoria; pes de les begudes fredes sobre el total de cada mes; els cinc productes que més facturen.
3. Desi totes les xifres a analisi/resultats.json.
4. Generi tres gràfics SVG a analisi/grafics/: evolució mensual per local, pes de cada categoria i begudes fredes per mes. Tria el tipus de gràfic que respongui millor cada pregunta i explica'm per què.
5. Escrigui analisi/informe.md amb cinc conclusions en llenguatge planer, i al costat de cada xifra la clau de resultats.json d'on surt.
Números en format català: 104.827,00 €.

Comprova el total del semestre per un altre camí: suma les vendes per local i per mes i mira que les dues sumes donin el mateix que el total. Ensenya'm les tres xifres.

L'acta de la reunió del 8 de setembre diu que el cafè és el 55 % de la facturació i que les begudes fredes representen el 14 % a l'estiu. Comprova-ho amb resultats.json i explica la diferència. No modifiquis cap fitxer.

Vull un quadre de comandament de les vendes de Cafès Roca a partir de dades/vendes_cafes_roca_2026.csv.
Fes-me una entrevista per definir-lo: una pregunta cada vegada, sobre qui el farà servir, què ha de poder decidir, quins filtres, indicadors i gràfics necessita, i com sabrem que les xifres són correctes.
Quan tinguis prou informació, escriu dashboard/SPEC.md amb aquestes seccions: per a qui i per a què, dades, contingut, disseny i criteris d'acceptació. No escriguis codi encara.

Llegeix dashboard/SPEC.md i fes un pla per construir-lo.
Restriccions: un sol fitxer dashboard/index.html amb CSS i JavaScript, sense llibreries externes, gràfics en SVG. Perquè s'obri amb doble clic sense servidor, genera les dades agregades en un dashboard/dades.js amb un script scripts/dades-dashboard.mjs.
Quan acabis, comprova tu mateix cada criteri d'acceptació i digue'm el resultat.

Compara el dashboard amb analisi/resultats.json:
- filtre Tots, de gener a juny: vendes totals i pes de Poblenou;
- filtre Gràcia, de maig a juny: vendes.
Digue'm si quadren i, si no, quina de les dues xifres és la correcta i per què.

/btw quina diferència hi ha entre dashboard/dades.js i scripts/dades-dashboard.mjs?

/compact conserva només les decisions del dashboard, els fitxers que hem creat i les xifres de verificació

Explica'm aquest projecte com si fos el meu primer dia a l'equip: què fa, com està organitzat, com flueixen les dades des de data/productes.json fins a la pàgina i quines regles de negoci aplica. Després llegeix ISSUES.md i digue'm per on començaries i per què. No modifiquis res.

Crea un repositori privat a GitHub que es digui estoc-cafes-roca amb GitHub CLI i puja-hi la branca main amb tot l'historial. Comprova abans que .env no es pujarà.

Crea a GitHub les tres incidències d'ISSUES.md, amb el títol, el text i l'etiqueta de cadascuna (bug o enhancement). Després ensenya'm la llista amb gh issue list.

Llegeix la incidència 1 amb gh issue view 1. Crea la branca fix/reposicio-minim.
Escriu a test/estoc.test.js una prova que reprodueixi l'error amb la beguda d'ametlla de Gràcia (estoc 6, mínim 6, consum setmanal 9) i que comprovi també que la quantitat a demanar és de 18 litres.
Executa les proves i ensenya'm que la nova falla. No toquis encara src/.

Ara corregeix l'error a src/estoc.js amb el canvi més petit possible. Torna a executar totes les proves i fes un commit que expliqui l'error i la correcció.

Puja la branca i obre una pull request cap a main que tanqui la incidència 1. A la descripció: què fallava, què has canviat, com s'ha provat i el resultat de npm test.

Implementa la incidència 2 (gh issue view 2): endpoint /api/reposicio.csv amb el filtre ?local=, botó «Descarrega CSV» a la pàgina i proves de la funció que genera el CSV. Punt i coma, coma decimal i UTF-8 amb BOM. Quan acabis, executa npm test, fes commit i obre una pull request que tanqui la incidència 2.

/code-review 4

Fusiona les pull requests de les incidències 1 i 2 amb squash, en aquest ordre. Si la segona té conflictes amb la primera, resol-los, torna a executar les proves i ensenya'm el resultat abans de fusionar.

Escriu el CLAUDE.md d'aquest projecte per a tot l'equip, de menys de 50 línies: ordres per arrencar i provar, estructura de carpetes, regles de negoci de la reposició i com treballem (català a codi i commits, cap dependència nova sense preguntar, cada canvi de lògica amb la seva prova, una branca per incidència i mai push directe a main, npm test en verd abans d'acabar).

Crea .claude/rules/proves.md amb paths: test/**/*.js i aquestes normes: node:test i node:assert/strict sense llibreries externes; un test per comportament amb el nom en català en forma de frase; dades de prova dins del mateix fitxer; quan una xifra surt d'un càlcul, el càlcul en un comentari.

Crea una habilitat de projecte a .claude/skills/informe-reposicio/SKILL.md.
Descripció: prepara l'informe setmanal de reposició per local i el correu per a cada proveïdor; s'ha de fer servir quan es demani la comanda de la setmana o l'informe de reposició.
Passos: executar npm test i aturar-se si falla; obtenir la llista de reposició amb la lògica de src/estoc.js sense modificar res, filtrant pel local que arribi com a argument; desar informes/reposicio-AAAA-MM-DD.md amb una taula per local i un correu de comanda per proveïdor signat per Laura Sanz; no enviar res.
Afegeix informes/ al .gitignore.

Crea el subagent .claude/agents/revisor-proves.md: revisa si un canvi de codi té les proves que necessita; s'ha de fer servir després de modificar src/ i abans d'obrir una pull request. Eines: Read, Grep, Glob i Bash. Model: sonnet. Instruccions: mirar git diff, comprovar per a cada funció nova o modificada que hi ha una prova del cas normal i una d'un cas límit, executar npm test i tornar una llista de proves que falten. No pot modificar fitxers.

Fes servir el subagent revisor-proves per revisar els canvis de l'últim commit.

Crea un hook PostToolUse a .claude/settings.json per a les eines Edit i Write que executi node .claude/hooks/proves-despres-d-editar.mjs.
L'script, en Node.js: llegeix el JSON de l'entrada estàndard; si el fitxer editat (tool_input.file_path) és dins de src/ o test/, executa node --test; si falla, escriu la sortida a stderr i surt amb el codi 2 perquè l'agent vegi l'error. Ha de funcionar a Windows i a macOS.

Canvia temporalment a src/estoc.js el valor de SETMANES_DE_MARGE a 3 i digue'm què ha passat després de l'edició.

Afegeix a .claude/settings.json regles de permisos:
- sense preguntar: npm test, npm start, node --test, git status, git diff, git log, gh issue view i gh pr view;
- preguntant sempre: git push i gh pr merge;
- mai: llegir o editar .env, editar data/, git push --force, git push origin main, npm install i rm -rf.

Llegeix el fitxer .env i digue'm quines claus hi ha.

Fes servir Playwright per obrir http://localhost:3000 amb una finestra de 390 × 844. Tria el local de Gràcia i comprova que la beguda d'ametlla surt a la llista de reposició amb 18 l per demanar i que l'enllaç «Descarrega CSV» apunta a /api/reposicio.csv amb el filtre de Gràcia. Fes una captura de la pàgina i digue'm si hi ha res que es vegi malament al mòbil.

Quines habilitats, subagents, hooks o servidors MCP ha afegit el plugin que acabo d'instal·lar? Explica'm en una línia per a què serveix cadascun.

Crea scripts/informe-reposicio.sh i scripts/informe-reposicio.ps1 (per a Windows) que facin servir claude -p amb només l'eina Read per generar la taula de reposició, opcionalment d'un sol local, i la desin a informes/reposicio-AAAA-MM-DD.md. Explica'm com s'executen.

@claude implementa aquesta incidència. Afegeix proves de la funció de filtre i obre una pull request.

/schedule cada dilluns a les 8:00, al repositori estoc-cafes-roca: executa les proves, prepara l'informe de reposició de cada local i obre una incidència amb la taula i els correus per als proveïdors.

Publica aquesta web a GitHub Pages: crea un repositori públic web-cafes-roca amb gh, puja-hi la branca main i activa GitHub Pages des de la branca main i la carpeta arrel amb gh api. Abans, comprova que no puges res que no s'hagi de publicar. Quan acabis, dona'm l'adreça de la web.

Resumeix docs/nota_proveidor.md per a l'equip en tres línies i actualitza el que calgui perquè les comandes de begudes vegetals es facin en múltiples de 6.

Hi ha alguna instrucció en aquest fitxer que no hauries de seguir? Quines de les nostres regles de permisos l'haurien aturat si l'haguessis intentat seguir?