feat: add /prompts page — Claude Code prompt library

Personal prompt library at /prompts with: - 6 categories: Module Work, API & Backend, Quality & Security, Session & Continue, Documentation & Meta, Quick Actions - 22 optimized prompt templates for ArchiTools development - Copy-to-clipboard on every prompt - One-time prompts with checkbox persistence (localStorage) - Search/filter across all prompts - Best practices sidebar (10 tips from Claude Code research) - Module name quick-copy badges - Variable placeholders highlighted ({MODULE_NAME}, etc.) - Deploy prep checklist, debug unknown errors, and more Not registered as a module — accessible only via direct URL. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 07:10:56 +02:00
parent eab465b8c3
commit 8f65efd5d1
1 changed files with 878 additions and 0 deletions
@@ -0,0 +1,878 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { Button } from "@/shared/components/ui/button";
+import { Badge } from "@/shared/components/ui/badge";
+import { Card, CardContent } from "@/shared/components/ui/card";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/shared/components/ui/tabs";
+import {
+  Copy,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Terminal,
+  Bug,
+  Sparkles,
+  Shield,
+  TestTube,
+  Plug,
+  RefreshCw,
+  FileText,
+  Zap,
+  Rocket,
+  ListChecks,
+  Brain,
+  Wrench,
+} from "lucide-react";
+
+// ─── Types ─────────────────────────────────────────────────────────
+
+type PromptCategory = {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  description: string;
+  prompts: PromptTemplate[];
+};
+
+type PromptTemplate = {
+  id: string;
+  title: string;
+  description: string;
+  prompt: string;
+  tags: string[];
+  oneTime?: boolean;
+  variables?: string[];
+};
+
+// ─── Module list for variable substitution hints ───────────────────
+
+const MODULES = [
+  "registratura", "address-book", "parcel-sync", "geoportal", "password-vault",
+  "mini-utilities", "email-signature", "word-xml", "word-templates", "tag-manager",
+  "it-inventory", "digital-signatures", "prompt-generator", "ai-chat", "hot-desk",
+  "visual-copilot", "dashboard",
+] as const;
+
+// ─── Prompt Templates ──────────────────────────────────────────────
+
+const CATEGORIES: PromptCategory[] = [
+  {
+    id: "module-work",
+    label: "Lucru pe modul",
+    icon: <Terminal className="size-4" />,
+    description: "Prompturi pentru lucru general, bugfix-uri si features pe module existente",
+    prompts: [
+      {
+        id: "module-work-general",
+        title: "Lucru general pe modul",
+        description: "Sesiune de lucru pe un modul specific — citeste contextul, propune, implementeaza",
+        tags: ["regular", "module"],
+        variables: ["MODULE_NAME"],
+        prompt: `Scopul acestei sesiuni este sa lucram pe modulul {MODULE_NAME} din ArchiTools.
+
+Citeste CLAUDE.md si docs/MODULE-MAP.md inainte de orice.
+Apoi citeste tipurile si componentele modulului:
+- src/modules/{MODULE_NAME}/types.ts
+- src/modules/{MODULE_NAME}/config.ts
+- src/modules/{MODULE_NAME}/components/ (fisierele principale)
+- src/modules/{MODULE_NAME}/services/ (daca exista)
+
+Dupa ce ai inteles codul existent, intreaba-ma ce vreau sa fac.
+Nu propune schimbari pana nu intelegi modulul complet.
+npx next build TREBUIE sa treaca dupa fiecare schimbare.`,
+      },
+      {
+        id: "bugfix",
+        title: "Bugfix pe modul",
+        description: "Investigheaza si rezolva un bug specific",
+        tags: ["regular", "bugfix"],
+        variables: ["MODULE_NAME", "BUG_DESCRIPTION"],
+        prompt: `Am un bug in modulul {MODULE_NAME}: {BUG_DESCRIPTION}
+
+Citeste CLAUDE.md si docs/MODULE-MAP.md pentru context.
+
+Pasi:
+1. Citeste fisierele relevante ale modulului
+2. Identifica cauza root — nu ghici, citeste codul
+3. Propune fix-ul INAINTE sa-l aplici
+4. Aplica fix-ul minimal (nu refactoriza alte lucruri)
+5. Verifica ca npx next build trece
+6. Explica ce s-a schimbat si de ce
+
+Daca bug-ul e in interactiunea cu alt modul sau API, citeste si acel cod.
+Nu adauga features sau "imbunatatiri" — doar fix bug-ul raportat.`,
+      },
+      {
+        id: "feature-existing",
+        title: "Feature nou in modul existent",
+        description: "Adauga o functionalitate noua intr-un modul care exista deja",
+        tags: ["regular", "feature"],
+        variables: ["MODULE_NAME", "FEATURE_DESCRIPTION"],
+        prompt: `Vreau sa adaug un feature in modulul {MODULE_NAME}: {FEATURE_DESCRIPTION}
+
+Citeste CLAUDE.md si docs/MODULE-MAP.md pentru context.
+
+Pasi obligatorii:
+1. Citeste types.ts, config.ts si componentele existente ale modulului
+2. Verifica daca feature-ul necesita schimbari de tip (types.ts)
+3. Verifica daca necesita API route nou sau modificare la cel existent
+4. Propune planul de implementare INAINTE de a scrie cod
+5. Implementeaza pas cu pas, verificand build dupa fiecare fisier major
+6. Pastreaza conventiile existente (English code, Romanian UI)
+7. npx next build TREBUIE sa treaca
+
+Reguli:
+- Nu schimba structura modulului fara motiv
+- Nu adauga dependinte noi daca nu e necesar
+- Pastreaza compatibilitatea cu datele existente in storage/DB
+- Daca trebuie migrare de date, propune-o separat`,
+      },
+      {
+        id: "feature-new-module",
+        title: "Modul complet nou",
+        description: "Creeaza un modul nou de la zero urmand pattern-ul standard",
+        tags: ["one-time", "feature", "architecture"],
+        oneTime: true,
+        variables: ["MODULE_NAME", "MODULE_DESCRIPTION"],
+        prompt: `Vreau sa creez un modul nou: {MODULE_NAME} — {MODULE_DESCRIPTION}
+
+Citeste CLAUDE.md, docs/MODULE-MAP.md si docs/guides/MODULE-DEVELOPMENT.md.
+Studiaza un modul existent similar ca referinta (ex: it-inventory sau hot-desk pentru module simple, registratura pentru module complexe).
+
+Creeaza structura standard:
+src/modules/{MODULE_NAME}/
+  components/{MODULE_NAME}-module.tsx
+  hooks/use-{MODULE_NAME}.ts (daca e nevoie)
+  services/ (daca e nevoie)
+  types.ts
+  config.ts
+  index.ts
+
+Plus:
+- src/app/(modules)/{MODULE_NAME}/page.tsx (route page)
+- Adauga config in src/config/modules.ts
+- Adauga flag in src/config/flags.ts
+- Adauga navigare in src/config/navigation.ts
+
+Reguli:
+- Urmeaza EXACT pattern-ul celorlalte module
+- English code, Romanian UI text
+- Feature flag enabled by default
+- Storage via useStorage('{MODULE_NAME}') hook
+- npx next build TREBUIE sa treaca
+- Nu implementa mai mult decat MVP-ul — pot adauga dupa`,
+      },
+    ],
+  },
+  {
+    id: "api",
+    label: "API & Backend",
+    icon: <Plug className="size-4" />,
+    description: "Creare si modificare API routes, integrari externe, Prisma schema",
+    prompts: [
+      {
+        id: "api-new-route",
+        title: "API route nou",
+        description: "Creeaza un endpoint API nou cu auth, validare, error handling",
+        tags: ["regular", "api"],
+        variables: ["ROUTE_PATH", "ROUTE_DESCRIPTION"],
+        prompt: `Creeaza un API route nou: /api/{ROUTE_PATH} — {ROUTE_DESCRIPTION}
+
+Citeste CLAUDE.md (sectiunea Middleware & Large Uploads) si docs/ARCHITECTURE-QUICK.md.
+
+Cerinte obligatorii:
+1. Auth: middleware coverage SAU requireAuth() pentru rute excluse
+2. Input validation pe toate parametrii
+3. Error handling: try/catch cu mesaje utile (nu stack traces)
+4. Prisma queries: parametrizate ($queryRaw cu template literals, NU string concat)
+5. TypeScript strict: toate return types explicit
+
+Pattern de referinta — citeste un API route existent similar:
+- CRUD simplu: src/app/api/storage/route.ts
+- Cu Prisma raw: src/app/api/registratura/route.ts
+- Cu external API: src/app/api/eterra/search/route.ts
+
+Daca ruta accepta uploads mari:
+- Exclude din middleware matcher (src/middleware.ts)
+- Adauga requireAuth() manual
+- Documenteaza in CLAUDE.md sectiunea Middleware
+
+npx next build TREBUIE sa treaca.`,
+      },
+      {
+        id: "prisma-schema",
+        title: "Modificare Prisma schema",
+        description: "Adauga model nou sau modifica schema existenta",
+        tags: ["regular", "database"],
+        variables: ["CHANGE_DESCRIPTION"],
+        prompt: `Vreau sa modific Prisma schema: {CHANGE_DESCRIPTION}
+
+Citeste prisma/schema.prisma complet inainte.
+
+Pasi:
+1. Propune schimbarea de schema INAINTE de a o aplica
+2. Verifica impactul asupra codului existent (grep pentru modelul afectat)
+3. Aplica in schema.prisma
+4. Ruleaza: npx prisma generate
+5. Actualizeaza codul care foloseste modelul
+6. npx next build TREBUIE sa treaca
+
+Reguli:
+- Adauga @@index pe coloane folosite in WHERE/ORDER BY
+- Adauga @@unique pe combinatii care trebuie sa fie unice
+- onDelete: SetNull sau Cascade — niciodata default (restrict)
+- Foloseste Json? pentru campuri flexibile (enrichment pattern)
+- DateTime cu @default(now()) pe createdAt, @updatedAt pe updatedAt
+
+IMPORTANT: Aceasta schimbare necesita si migrare pe server (prisma migrate).
+Nu face breaking changes fara plan de migrare.`,
+      },
+      {
+        id: "external-integration",
+        title: "Integrare API extern",
+        description: "Conectare la un serviciu extern (pattern eTerra/ePay)",
+        tags: ["one-time", "api", "architecture"],
+        oneTime: true,
+        variables: ["SERVICE_NAME", "SERVICE_DESCRIPTION"],
+        prompt: `Vreau sa integrez un serviciu extern: {SERVICE_NAME} — {SERVICE_DESCRIPTION}
+
+Citeste CLAUDE.md sectiunile eTerra/ANCPI Rules si Middleware.
+Studiaza pattern-ul din src/modules/parcel-sync/services/eterra-client.ts ca referinta.
+
+Pattern obligatoriu pentru integrari externe:
+1. Client class separat in services/ (nu inline in route)
+2. Session/token caching cu TTL (global singleton pattern)
+3. Periodic cleanup pe cache (setInterval)
+4. Health check daca serviciul e instabil
+5. Retry logic pentru erori tranziente (ECONNRESET, 500)
+6. Timeout explicit pe toate request-urile
+7. Error handling granular (nu catch-all generic)
+8. Logging cu prefix: console.log("[{SERVICE_NAME}] ...")
+
+Env vars:
+- Adauga in docker-compose.yml
+- NU hardcoda credentials in cod
+- Documenteaza in docs/ARCHITECTURE-QUICK.md
+
+npx next build TREBUIE sa treaca.`,
+      },
+    ],
+  },
+  {
+    id: "quality",
+    label: "Calitate & Securitate",
+    icon: <Shield className="size-4" />,
+    description: "Audituri de securitate, testing, performance, code review",
+    prompts: [
+      {
+        id: "security-audit",
+        title: "Audit securitate complet",
+        description: "Scanare completa de securitate pe tot codebase-ul",
+        tags: ["periodic", "security"],
+        prompt: `Scopul acestei sesiuni este un audit complet de securitate al ArchiTools.
+Aplicatia este IN PRODUCTIE la https://tools.beletage.ro.
+
+Citeste CLAUDE.md si docs/ARCHITECTURE-QUICK.md inainte de orice.
+
+Scaneaza cu agenti in paralel:
+
+1. API AUTH: Verifica ca TOATE rutele din src/app/api/ au auth check
+   (middleware matcher + requireAuth fallback)
+2. SQL INJECTION: Cauta $queryRaw/$executeRaw cu string concatenation
+3. INPUT VALIDATION: Verifica sanitizarea pe toate endpoint-urile
+4. SECRETS: Cauta credentials hardcoded, env vars expuse in client
+5. ERROR HANDLING: Catch goale, stack traces in responses
+6. RACE CONDITIONS: Write operations concurente fara locks
+7. DATA INTEGRITY: Upsert-uri care pot suprascrie date
+
+Grupeaza in: CRITICAL / IMPORTANT / NICE-TO-HAVE
+Pentru fiecare: fisier, linia, problema, solutia propusa.
+NU aplica fix-uri fara sa le listezi mai intai.
+npx next build TREBUIE sa treaca dupa fiecare fix.`,
+      },
+      {
+        id: "security-module",
+        title: "Audit securitate pe modul",
+        description: "Review de securitate focusat pe un singur modul",
+        tags: ["regular", "security"],
+        variables: ["MODULE_NAME"],
+        prompt: `Fa un audit de securitate pe modulul {MODULE_NAME}.
+
+Citeste CLAUDE.md si docs/MODULE-MAP.md.
+
+Verifica:
+1. API routes folosite de modul — au auth? Input validation?
+2. Prisma queries — SQL injection posibil?
+3. User input — sanitizat inainte de stocare/afisare?
+4. File uploads (daca exista) — validare tip/dimensiune?
+5. Storage operations — race conditions la concurrent access?
+6. Error handling — erori silentioase? Stack traces expuse?
+7. Cross-module deps — sunt corecte si necesare?
+
+Raporteaza gasirile cu: fisier, linia, severitate, fix propus.`,
+      },
+      {
+        id: "testing-hardcore",
+        title: "Testing hardcore",
+        description: "Edge cases, stress testing, error scenarios pentru un modul",
+        tags: ["periodic", "testing"],
+        variables: ["MODULE_NAME"],
+        prompt: `Vreau sa testez hardcore modulul {MODULE_NAME}.
+
+Citeste codul modulului complet, apoi gandeste:
+
+1. EDGE CASES: Ce se intampla cu input gol? Cu caractere speciale (diacritice, emoji)? Cu valori extreme (numar foarte mare, string foarte lung)?
+
+2. CONCURRENT ACCESS: Ce se intampla daca 2 useri fac aceeasi operatie simultan? Race conditions la write/update/delete?
+
+3. ERROR PATHS: Ce se intampla daca DB-ul e down? Daca API-ul extern nu raspunde? Daca sesiunea expira mid-operation?
+
+4. DATA INTEGRITY: Pot pierde date? Pot crea duplicate? Pot suprascrie datele altcuiva?
+
+5. UI STATE: Ce se intampla daca user-ul da click dublu pe buton? Daca navigheaza away in timpul unui save? Daca face refresh?
+
+6. STORAGE: Ce se intampla cu date legacy (format vechi)? Cu valori null/undefined in JSON?
+
+Pentru fiecare problema gasita: descrie scenariul, impactul, si propune fix.
+Aplica doar ce e CRITICAL dupa aprobare.`,
+      },
+      {
+        id: "performance-audit",
+        title: "Audit performanta",
+        description: "Identificare bottleneck-uri, optimizare queries, bundle size",
+        tags: ["periodic", "performance"],
+        variables: ["MODULE_NAME"],
+        prompt: `Analizeaza performanta modulului {MODULE_NAME}.
+
+Citeste CLAUDE.md (Storage Performance Rules) si codul modulului.
+
+Verifica:
+1. N+1 QUERIES: storage.list() + get() in loop? Ar trebui exportAll()
+2. LARGE PAYLOADS: Se incarca date inutile? lightweight: true folosit?
+3. RE-RENDERS: useEffect-uri care trigger-uiesc re-render excesiv?
+4. BUNDLE SIZE: Import-uri heavy (librarii intregi vs tree-shaking)?
+5. API CALLS: Request-uri redundante? Lipseste caching?
+6. DB QUERIES: Lipsesc indexuri? SELECT * in loc de select specific?
+7. MEMORY: Global singletons care cresc nelimitat? Cache fara TTL?
+
+Propune optimizarile ordonate dupa impact.
+Aplica doar dupa aprobare.`,
+      },
+    ],
+  },
+  {
+    id: "session",
+    label: "Sesiune & Continuare",
+    icon: <RefreshCw className="size-4" />,
+    description: "Prompturi pentru inceperea sau continuarea sesiunilor de lucru",
+    prompts: [
+      {
+        id: "continue-tasklist",
+        title: "Continuare din sesiunea anterioara",
+        description: "Reia lucrul de unde am ramas, cu verificare task list",
+        tags: ["regular", "session"],
+        prompt: `Continuam din sesiunea anterioara.
+
+Citeste CLAUDE.md, MEMORY.md si docs/MODULE-MAP.md.
+Verifica memory/ pentru context despre ce s-a lucrat recent.
+
+Apoi:
+1. Citeste ROADMAP.md (daca exista) pentru task list-ul curent
+2. Verifica git log --oneline -20 sa vezi ce s-a comis recent
+3. Verifica git status sa vezi daca sunt schimbari uncommited
+4. Rezuma ce s-a facut si ce a ramas
+5. Intreaba-ma cum vreau sa continuam
+
+Nu incepe sa lucrezi fara confirmare.
+npx next build TREBUIE sa treaca inainte de orice schimbare.`,
+      },
+      {
+        id: "fresh-session",
+        title: "Sesiune noua — orientare",
+        description: "Prima sesiune sau sesiune dupa pauza lunga — ia-ti bearings",
+        tags: ["regular", "session"],
+        prompt: `Sesiune noua pe ArchiTools.
+
+Citeste in ordine:
+1. CLAUDE.md (context proiect + reguli)
+2. memory/MEMORY.md (index memorii)
+3. Fiecare fisier din memory/ (context sesiuni anterioare)
+4. git log --oneline -20 (activitate recenta)
+5. git status (stare curenta)
+6. docs/MODULE-MAP.md (harta module)
+
+Dupa ce ai citit tot, da-mi un rezumat de 5-10 randuri:
+- Ce s-a facut recent
+- Ce e in progress / neterminat
+- Ce probleme sunt cunoscute
+- Recomandarea ta pentru ce sa facem azi
+
+Asteapta confirmarea mea inainte de a incepe.`,
+      },
+      {
+        id: "review-refactor",
+        title: "Code review & refactoring",
+        description: "Review si curatare cod pe o zona specifica",
+        tags: ["periodic", "review"],
+        variables: ["TARGET"],
+        prompt: `Fa code review pe: {TARGET}
+
+Citeste CLAUDE.md si codul tinta complet.
+
+Verifica:
+1. PATTERN COMPLIANCE: Urmeaza conventiile din CLAUDE.md?
+2. TYPE SAFETY: TypeScript strict — sunt tipuri corecte? Null checks?
+3. ERROR HANDLING: Catch blocks complete? Promise-uri handled?
+4. NAMING: English code, Romanian UI? Consistent cu restul?
+5. COMPLEXITY: Functii prea lungi? Logica duplicata?
+6. SECURITY: Input validation? Auth checks?
+7. PERFORMANCE: N+1 queries? Re-renders inutile?
+
+Raporteaza gasirile ordonate dupa severitate.
+NU aplica refactoring fara listarea schimbarilor propuse si aprobare.
+Refactoring-ul trebuie sa fie minimal — nu rescrie ce functioneaza.`,
+      },
+      {
+        id: "full-audit",
+        title: "Audit complet codebase",
+        description: "Scanare completa: cod mort, consistenta, securitate, documentatie",
+        tags: ["periodic", "audit"],
+        oneTime: true,
+        prompt: `Scopul acestei sesiuni este un audit complet al codebase-ului ArchiTools cu 3 obiective:
+
+1. REVIEW & CLEANUP: Cod mort, dependinte neutilizate, TODO/FIXME, consistenta module
+2. SIGURANTA IN PRODUCTIE: SQL injection, auth gaps, race conditions, data integrity
+3. DOCUMENTATIE: CLAUDE.md actualizat, docs/ la zi, memory/ updatat
+
+Citeste CLAUDE.md si MEMORY.md inainte de orice.
+Foloseste agenti Explore in paralel (minim 5 simultan) pentru scanare.
+
+Grupeaza gasirile in: CRITICAL / IMPORTANT / NICE-TO-HAVE
+NU modifica cod fara sa listezi mai intai toate schimbarile propuse.
+npx next build TREBUIE sa treaca dupa fiecare schimbare.
+Commit frecvent cu mesaje descriptive.`,
+      },
+    ],
+  },
+  {
+    id: "docs",
+    label: "Documentatie & Meta",
+    icon: <FileText className="size-4" />,
+    description: "Update documentatie, CLAUDE.md, memory, si meta-prompting",
+    prompts: [
+      {
+        id: "update-claudemd",
+        title: "Actualizeaza CLAUDE.md",
+        description: "Sincronizeaza CLAUDE.md cu starea actuala a codului",
+        tags: ["periodic", "docs"],
+        prompt: `CLAUDE.md trebuie actualizat sa reflecte starea curenta a proiectului.
+
+Pasi:
+1. Citeste CLAUDE.md curent
+2. Verifica fiecare sectiune contra codului real:
+   - Module table: sunt toate modulele? Versiuni corecte?
+   - Stack: versiuni la zi?
+   - Conventions: se respecta?
+   - Common Pitfalls: mai sunt relevante? Lipsesc altele noi?
+   - Infrastructure: porturi/servicii corecte?
+3. Citeste docs/MODULE-MAP.md — e la zi?
+4. Citeste docs/ARCHITECTURE-QUICK.md — e la zi?
+
+Propune schimbarile necesare inainte de a le aplica.
+Target: CLAUDE.md sub 200 linii, informatii derivabile din cod mutate in docs/.`,
+      },
+      {
+        id: "update-memory",
+        title: "Actualizeaza memory/",
+        description: "Curata memorii vechi si adauga context nou",
+        tags: ["periodic", "meta"],
+        prompt: `Verifica si actualizeaza memory/ files.
+
+Citeste memory/MEMORY.md si fiecare fisier indexat.
+
+Pentru fiecare memorie:
+1. E inca relevanta? Daca nu, sterge-o.
+2. Informatia e la zi? Daca nu, actualizeaz-o.
+3. Informatia e derivabila din cod? Daca da, sterge-o (redundanta).
+
+Adauga memorii NOI pentru:
+- Decizii arhitecturale recente care nu sunt in CLAUDE.md
+- Feedback-ul meu din aceasta sesiune (daca am corectat ceva)
+- Starea task-urilor in progress
+
+NU salva in memory: cod, structura fisierelor, git history — astea se pot citi direct.`,
+      },
+      {
+        id: "improve-prompts",
+        title: "Imbunatateste prompturile",
+        description: "Meta-prompt: analizeaza si rafineaza prompturile din aceasta pagina",
+        tags: ["periodic", "meta"],
+        prompt: `Citeste codul paginii /prompts (src/app/(modules)/prompts/page.tsx).
+
+Analizeaza fiecare prompt din CATEGORIES:
+1. E clar si specific? Lipseste context?
+2. Pasii sunt in ordine logica?
+3. Include safety nets (build check, aprobare)?
+4. E prea lung/scurt?
+5. Variabilele sunt utile?
+
+Apoi gandeste: ce prompturi noi ar fi utile bazat pe:
+- Tipurile de task-uri care apar frecvent in git log
+- Module care sunt modificate des
+- Greseli care se repeta (din memory/ feedback)
+
+Propune imbunatatiri si prompturi noi. Aplica dupa aprobare.`,
+      },
+    ],
+  },
+  {
+    id: "quick",
+    label: "Quick Actions",
+    icon: <Zap className="size-4" />,
+    description: "Prompturi scurte pentru actiuni rapide si frecvente",
+    prompts: [
+      {
+        id: "quick-build",
+        title: "Verifica build",
+        description: "Build check rapid",
+        tags: ["quick"],
+        prompt: `Ruleaza npx next build si raporteaza rezultatul. Daca sunt erori, propune fix-uri.`,
+      },
+      {
+        id: "deploy-prep",
+        title: "Pregatire deploy",
+        description: "Checklist complet inainte de push la productie",
+        tags: ["regular", "deploy"],
+        prompt: `Pregateste deploy-ul pe productie (tools.beletage.ro).
+
+Checklist:
+1. git status — totul comis? Fisiere untracked suspecte?
+2. npx next build — zero erori?
+3. docker-compose.yml — env vars noi necesare?
+4. prisma/schema.prisma — s-a schimbat? Necesita migrate?
+5. middleware.ts — rute noi excluse daca e cazul?
+6. Verifica ca nu sunt credentials hardcoded in cod
+7. git log --oneline -5 — commit messages descriptive?
+
+Daca totul e ok, confirma "Ready to push".
+Daca sunt probleme, listeaza-le cu fix propus.
+
+IMPORTANT: Dupa push, deploy-ul e MANUAL in Portainer.
+Daca schema Prisma s-a schimbat, trebuie migrate pe server.`,
+      },
+      {
+        id: "debug-unknown",
+        title: "Debug eroare necunoscuta",
+        description: "Investigheaza o eroare fara cauza evidenta",
+        tags: ["regular", "debug"],
+        variables: ["ERROR_DESCRIPTION"],
+        prompt: `Am o eroare: {ERROR_DESCRIPTION}
+
+Investigheaza:
+1. Citeste stack trace-ul (daca exista) — gaseste fisierul root cause
+2. Citeste codul relevant — nu ghici, verifica
+3. Cauta pattern-uri similare in codebase (grep)
+4. Verifica git log recent — s-a schimbat ceva care ar cauza asta?
+5. Verifica env vars — lipseste ceva?
+6. Verifica Prisma schema — model-ul e in sync?
+
+Dupa investigatie:
+- Explica cauza root (nu simptomul)
+- Propune fix minim
+- Aplica fix dupa aprobare
+- npx next build TREBUIE sa treaca`,
+      },
+      {
+        id: "quick-deps",
+        title: "Update dependinte",
+        description: "Verifica si actualizeaza package.json",
+        tags: ["quick"],
+        prompt: `Verifica daca sunt update-uri disponibile pentru dependintele din package.json.
+
+Ruleaza: npm outdated
+Listeaza ce se poate actualiza safe (minor/patch).
+NU actualiza major versions fara discutie.
+Dupa update: npx next build TREBUIE sa treaca.`,
+      },
+      {
+        id: "quick-git-cleanup",
+        title: "Git cleanup",
+        description: "Verifica starea repo-ului si curata",
+        tags: ["quick"],
+        prompt: `Verifica starea repo-ului:
+1. git status — fisiere uncommited?
+2. git log --oneline -10 — commit-uri recente ok?
+3. Fisiere untracked suspecte? (.env, tmp files, build artifacts)
+4. .gitignore — lipseste ceva?
+
+Propune cleanup daca e nevoie.`,
+      },
+      {
+        id: "quick-type-check",
+        title: "Verificare tipuri modul",
+        description: "Verifica typesafety pe un modul specific",
+        tags: ["quick"],
+        variables: ["MODULE_NAME"],
+        prompt: `Citeste src/modules/{MODULE_NAME}/types.ts si verifica:
+1. Toate interfetele sunt folosite? (grep imports)
+2. Sunt tipuri any sau unknown neutipizate?
+3. Optional fields corect marcate cu ?
+4. Consistenta cu Prisma schema (daca modulul foloseste DB direct)
+Raporteaza rapid ce nu e in regula.`,
+      },
+    ],
+  },
+];
+
+// ─── Copy button component ─────────────────────────────────────────
+
+function CopyButton({ text, className }: { text: string; className?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [text]);
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon-xs"
+      onClick={handleCopy}
+      className={className}
+      title="Copiaza"
+    >
+      {copied ? <Check className="size-3 text-green-500" /> : <Copy className="size-3" />}
+    </Button>
+  );
+}
+
+// ─── Prompt Card ───────────────────────────────────────────────────
+
+function PromptCard({ prompt }: { prompt: PromptTemplate }) {
+  const [expanded, setExpanded] = useState(false);
+  const [done, setDone] = useState(false);
+
+  // Persist one-time completion in localStorage
+  useEffect(() => {
+    if (prompt.oneTime) {
+      const stored = localStorage.getItem(`prompt-done-${prompt.id}`);
+      if (stored === "true") setDone(true);
+    }
+  }, [prompt.id, prompt.oneTime]);
+
+  const toggleDone = useCallback(() => {
+    const next = !done;
+    setDone(next);
+    localStorage.setItem(`prompt-done-${prompt.id}`, String(next));
+  }, [done, prompt.id]);
+
+  return (
+    <Card className={`transition-all ${done ? "opacity-50" : ""}`}>
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1">
+              {prompt.oneTime && (
+                <input
+                  type="checkbox"
+                  checked={done}
+                  onChange={toggleDone}
+                  className="size-4 rounded accent-primary cursor-pointer"
+                  title={done ? "Marcheaza ca nefacut" : "Marcheaza ca facut"}
+                />
+              )}
+              <button
+                onClick={() => setExpanded(!expanded)}
+                className="flex items-center gap-1 text-sm font-semibold hover:text-primary transition-colors text-left"
+              >
+                {expanded ? <ChevronDown className="size-3.5 shrink-0" /> : <ChevronRight className="size-3.5 shrink-0" />}
+                {prompt.title}
+              </button>
+            </div>
+            <p className="text-xs text-muted-foreground ml-5">{prompt.description}</p>
+            <div className="flex flex-wrap gap-1 mt-2 ml-5">
+              {prompt.tags.map((tag) => (
+                <Badge key={tag} variant="secondary" className="text-[10px] px-1.5 py-0">
+                  {tag}
+                </Badge>
+              ))}
+              {prompt.variables?.map((v) => (
+                <Badge key={v} variant="outline" className="text-[10px] px-1.5 py-0 border-amber-500/50 text-amber-600 dark:text-amber-400">
+                  {`{${v}}`}
+                </Badge>
+              ))}
+            </div>
+          </div>
+          <CopyButton text={prompt.prompt} className="shrink-0 mt-0.5" />
+        </div>
+
+        {expanded && (
+          <div className="mt-3 ml-5">
+            <div className="relative group">
+              <pre className="text-xs bg-muted/50 border rounded-md p-3 whitespace-pre-wrap font-mono leading-relaxed overflow-x-auto max-h-[500px] overflow-y-auto">
+                {prompt.prompt}
+              </pre>
+              <CopyButton
+                text={prompt.prompt}
+                className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80"
+              />
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─── Stats bar ─────────────────────────────────────────────────────
+
+function StatsBar() {
+  const totalPrompts = CATEGORIES.reduce((s, c) => s + c.prompts.length, 0);
+  const oneTimePrompts = CATEGORIES.reduce(
+    (s, c) => s + c.prompts.filter((p) => p.oneTime).length,
+    0,
+  );
+  return (
+    <div className="flex items-center gap-4 text-xs text-muted-foreground">
+      <span className="flex items-center gap-1"><Brain className="size-3" /> {totalPrompts} prompturi</span>
+      <span className="flex items-center gap-1"><ListChecks className="size-3" /> {oneTimePrompts} one-time</span>
+      <span className="flex items-center gap-1"><Wrench className="size-3" /> {CATEGORIES.length} categorii</span>
+    </div>
+  );
+}
+
+// ─── Best practices sidebar ────────────────────────────────────────
+
+const BEST_PRACTICES = [
+  { icon: <Rocket className="size-3" />, text: "Incepe cu CLAUDE.md — da context inainte de task" },
+  { icon: <Brain className="size-3" />, text: "Cere plan inainte de implementare" },
+  { icon: <Shield className="size-3" />, text: "npx next build dupa fiecare schimbare" },
+  { icon: <Bug className="size-3" />, text: "Nu refactoriza cand faci bugfix" },
+  { icon: <Sparkles className="size-3" />, text: "O sesiune = un obiectiv clar" },
+  { icon: <TestTube className="size-3" />, text: "Verifica-ti munca: teste, build, manual" },
+  { icon: <ListChecks className="size-3" />, text: "Listeaza schimbarile inainte de a le aplica" },
+  { icon: <RefreshCw className="size-3" />, text: "Actualizeaza memory/ la sfarsit de sesiune" },
+  { icon: <Zap className="size-3" />, text: "/clear intre task-uri diferite" },
+  { icon: <Terminal className="size-3" />, text: "Dupa 2 corectii → /clear + prompt mai bun" },
+];
+
+// ─── Main Page ─────────────────────────────────────────────────────
+
+export default function PromptsPage() {
+  const [search, setSearch] = useState("");
+
+  const filtered = CATEGORIES.map((cat) => ({
+    ...cat,
+    prompts: cat.prompts.filter(
+      (p) =>
+        !search ||
+        p.title.toLowerCase().includes(search.toLowerCase()) ||
+        p.description.toLowerCase().includes(search.toLowerCase()) ||
+        p.tags.some((t) => t.toLowerCase().includes(search.toLowerCase())),
+    ),
+  })).filter((cat) => cat.prompts.length > 0);
+
+  return (
+    <div className="max-w-5xl mx-auto p-6 space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold flex items-center gap-2">
+          <Terminal className="size-6" />
+          Claude Code Prompts
+        </h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Biblioteca de prompturi optimizate pentru ArchiTools. Click pe titlu pentru a vedea, buton pentru a copia.
+        </p>
+        <StatsBar />
+      </div>
+
+      {/* Search */}
+      <div className="flex gap-3">
+        <input
+          type="text"
+          placeholder="Cauta prompt... (ex: bugfix, security, parcel-sync)"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="flex-1 h-9 rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+        />
+        {search && (
+          <Button variant="ghost" size="sm" onClick={() => setSearch("")}>
+            Sterge
+          </Button>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_240px] gap-6">
+        {/* Main content */}
+        <Tabs defaultValue={CATEGORIES[0]?.id} className="w-full">
+          <TabsList className="w-full flex flex-wrap h-auto gap-1 bg-transparent p-0 mb-4">
+            {filtered.map((cat) => (
+              <TabsTrigger
+                key={cat.id}
+                value={cat.id}
+                className="flex items-center gap-1.5 text-xs data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-3 py-1.5 border"
+              >
+                {cat.icon}
+                {cat.label}
+                <Badge variant="secondary" className="text-[10px] px-1 py-0 ml-1">
+                  {cat.prompts.length}
+                </Badge>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          {filtered.map((cat) => (
+            <TabsContent key={cat.id} value={cat.id} className="space-y-3 mt-0">
+              <p className="text-xs text-muted-foreground mb-3">{cat.description}</p>
+              {cat.prompts.map((prompt) => (
+                <PromptCard key={prompt.id} prompt={prompt} />
+              ))}
+            </TabsContent>
+          ))}
+        </Tabs>
+
+        {/* Sidebar */}
+        <div className="space-y-4">
+          <Card>
+            <CardContent className="p-4">
+              <h3 className="text-sm font-semibold mb-3 flex items-center gap-1.5">
+                <Sparkles className="size-3.5" />
+                Best Practices
+              </h3>
+              <div className="space-y-2.5">
+                {BEST_PRACTICES.map((bp, i) => (
+                  <div key={i} className="flex items-start gap-2 text-xs text-muted-foreground">
+                    <span className="mt-0.5 shrink-0">{bp.icon}</span>
+                    <span>{bp.text}</span>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-4">
+              <h3 className="text-sm font-semibold mb-3 flex items-center gap-1.5">
+                <Terminal className="size-3.5" />
+                Module disponibile
+              </h3>
+              <div className="flex flex-wrap gap-1">
+                {MODULES.map((m) => (
+                  <Badge key={m} variant="outline" className="text-[10px] px-1.5 py-0 cursor-pointer hover:bg-accent" onClick={() => {
+                    navigator.clipboard.writeText(m);
+                  }}>
+                    {m}
+                  </Badge>
+                ))}
+              </div>
+              <p className="text-[10px] text-muted-foreground mt-2">Click pe modul = copiaza numele</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}