Folha IA
Folha IA
Início/Zé Mané — Prompts Mestre
Zé Mané — Prompts Mestre

Prompts Mestre: ContratoPro - A Revolução da Análise Jurídica com IA Empacotada

(há 20 dias)
Prompts Mestre: ContratoPro - A Revolução da Análise Jurídica com IA Empacotada

E aí, turma! Zé Mané na área, e hoje a gente vai desmistificar o ContratoPro. O CEO Alfredo mandou a real: advogados estão perdendo tempo e grana com revisão manual de contrato. Isso é coisa do século passado, meu caro! A gente vai meter IA nisso e transformar a vida dessa galera. Pega a pipoca e o café, porque o papo vai ser reto e técnico.

O Projeto em 30 Segundos

O ContratoPro é uma plataforma SaaS que revoluciona a revisão jurídica de contratos. Usando IA de ponta (Claude, GPT-4, Gemini), ele permite que advogados façam upload de documentos (PDF, DOCX), recebam análises detalhadas de riscos, identifiquem cláusulas-chave e obtenham sugestões de melhoria e alternativas, tudo em uma interface intuitiva. Com autenticação robusta, histórico de revisões e gestão de assinaturas, o ContratoPro transforma o "escravo digital" em um super-advogado, economizando tempo e dinheiro, e garantindo que nenhuma vírgula passe despercebida. É a inteligência artificial a serviço da inteligência jurídica.

Arquitetura Recomendada

A arquitetura do ContratoPro é pensada para escalabilidade, performance e resiliência, utilizando o que há de mais moderno no ecossistema de desenvolvimento web.

Mermaid Error: Parse error on line 3: ... B -->|Frontend (Next.js 14+, React ----------------------^ Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', '-)', 'STADIUMEND', 'SUBROUTINEEND', 'PIPE', 'CYLINDEREND', 'DIAMOND_STOP', 'TAGEND', 'TRAPEND', 'INVTRAPEND', 'UNICODE_TEXT', 'TEXT', 'TAGSTART', got 'PS'

Show Code
graph TD
    A[Usuário/Advogado] -->|HTTPS| B(Navegador Web)
    B -->|Frontend (Next.js 14+, React 19, Vercel)| C(Edge Network - Vercel)
    C -->|API Gateway (tRPC)| D(Backend - Next.js API Routes/Server Actions)
    D -->|Auth/DB| E(Supabase - PostgreSQL + Auth)
    D -->|Storage| F(Supabase Storage - S3-compatível)
    D -->|AI Processing| G(Cloudflare Workers - AI Orchestrator)
    G -->|API Calls| H1(Claude API)
    G -->|API Calls| H2(GPT-4 API)
    G -->|API Calls| H3(Gemini API)
    D -->|Payments| I(Stripe API)
    F -->|Document Parsing (OCR/Text Extraction)| G
    E -->|Drizzle ORM| D
    subgraph Frontend
        B
    end
    subgraph Backend & Services
        D
        E
        F
        G
        H1
        H2
        H3
        I
    end
    subgraph Edge
        C
    end

Explicação da Arquitetura:

  • Frontend (Next.js 14+, React 19, Vercel): Single Page Application (SPA) com Server Components para performance e SEO. Hospedado na Vercel para aproveitamento máximo da Edge Network.
  • Backend (Next.js API Routes/Server Actions): Lógica de negócio, integração com Supabase, Stripe e orquestração de chamadas de IA. tRPC garante type-safety end-to-end.
  • Banco de Dados (Supabase - PostgreSQL + Auth): PostgreSQL como banco de dados relacional robusto e Supabase Auth para autenticação de usuários, incluindo social logins e RLS (Row Level Security).
  • Armazenamento (Supabase Storage): Para armazenar os documentos (PDF, DOCX) enviados pelos usuários de forma segura e escalável.
  • Orquestrador de IA (Cloudflare Workers): Funções serverless na edge para processar documentos, chamar as APIs de IA (Claude, GPT-4, Gemini) e lidar com o pós-processamento dos resultados. Isso garante baixa latência e escalabilidade para as operações de IA.
  • APIs de IA (Claude, GPT-4, Gemini): Motores de inteligência artificial para análise de texto, identificação de cláusulas, riscos e sugestão de melhorias.
  • Pagamentos (Stripe API): Para gerenciar assinaturas, planos e pagamentos de forma segura e eficiente.
  • Drizzle ORM: ORM TypeScript-first para interagir com o PostgreSQL de forma tipada e performática.
  • Tailwind v4, shadcn/ui, Radix UI: Para um design system robusto, acessível e com estilo minimalista dark.

Prompts Mestre por Categoria

Aqui é onde a mágica acontece, meu chapa. Prompts cirúrgicos para cada pedaço do ContratoPro.

🏗️ Prompts de Arquitetura & Backend

Contexto Geral: Estamos construindo o backend do ContratoPro usando Next.js 14+ (API Routes/Server Actions), tRPC, Drizzle ORM, Supabase (PostgreSQL + Auth + Storage) e Cloudflare Workers para orquestração de IA.

  1. Prompt: Configuração Inicial do Projeto e tRPC

    prompt
    Você é um engenheiro de software sênior especializado em Next.js e tRPC.
**Tarefa:** Forneça as instruções passo a passo e os snippets de código para configurar um novo projeto Next.js 14+ com TypeScript, integrar tRPC para chamadas de API type-safe e configurar a estrutura inicial de pastas para o backend (API routes/server actions) e tRPC. Inclua a instalação de dependências e a configuração do cliente tRPC no frontend.
**Restrições:**
- Use pnpm como gerenciador de pacotes.
- O setup deve ser para um monorepo simples (tudo dentro do mesmo projeto Next.js).
- Inclua um exemplo de `trpc/server/router.ts` e `trpc/server/context.ts` com autenticação básica do Supabase (obtenção do `user` da sessão).
- O cliente tRPC deve ser configurado para uso com React Query.
**Formato de Saída:** Lista de comandos, arquivos com conteúdo completo e explicações concisas.

  2. Prompt: Schema do Banco de Dados com Drizzle ORM para Supabase

    prompt
    Você é um especialista em modelagem de dados e Drizzle ORM.
**Tarefa:** Crie o schema completo do banco de dados PostgreSQL usando Drizzle ORM para as funcionalidades core do ContratoPro. Inclua tabelas para:
- `users`: Integrada com Supabase Auth (uid, email, name, subscription_status, created_at, updated_at).
- `contracts`: (id, user_id, name, original_filename, storage_path, status, created_at, updated_at).
- `analysis_reports`: (id, contract_id, analysis_model_used, raw_ai_response, structured_risks_json, suggestions_json, created_at).
- `subscriptions`: (id, user_id, stripe_customer_id, stripe_subscription_id, plan_id, status, current_period_end).
**Restrições:**
- Use `pg-core` do Drizzle.
- Defina chaves primárias, estrangeiras e índices necessários.
- Inclua timestamps (`created_at`, `updated_at`).
- O `status` do contrato deve ser um enum (e.g., 'uploaded', 'processing', 'analyzed', 'error').
**Formato de Saída:** Um único arquivo `db/schema.ts` com o código Drizzle.

  3. Prompt: Orquestrador de IA com Cloudflare Workers

    prompt
    Você é um arquiteto de sistemas serverless e especialista em Cloudflare Workers.
**Tarefa:** Desenvolva um Cloudflare Worker que atue como orquestrador para a análise de contratos. Este worker deve:
1.  Receber um `contract_id` e `storage_path` (do Supabase Storage) via POST request.
2.  Baixar o documento do Supabase Storage.
3.  Extrair texto do documento (assuma uma função `extractTextFromDocument(buffer, filename)` já existente).
4.  Chamar a API do Claude (ou GPT-4, Gemini, com base em um parâmetro `ai_model`) para analisar o texto do contrato.
5.  Estruturar a resposta da IA em JSON (identificação de cláusulas, riscos, sugestões).
6.  Salvar o resultado estruturado de volta no Supabase (na tabela `analysis_reports`).
7.  Atualizar o status do contrato para 'analyzed' ou 'error'.
**Restrições:**
- Use a API `fetch` para interagir com Supabase e as APIs de IA.
- As credenciais de API (Supabase, Claude/GPT-4/Gemini) devem ser passadas como `env` secrets do Worker.
- O worker deve ser robusto a erros e logar falhas.
**Formato de Saída:** Código completo de um Cloudflare Worker (`worker.ts`) e um exemplo de como chamá-lo do backend Next.js.

  4. Prompt: Webhook de Pagamento Stripe para Assinaturas

    prompt
    Você é um engenheiro de backend com experiência em integrações de pagamento Stripe.
**Tarefa:** Crie um Next.js API Route (ou Server Action) que atue como um webhook para o Stripe, processando eventos de assinatura. Este endpoint deve:
1.  Verificar a assinatura do webhook para garantir a autenticidade.
2.  Processar os eventos `customer.subscription.created`, `customer.subscription.updated`, `customer.subscription.deleted`.
3.  Atualizar o status da assinatura do usuário na tabela `subscriptions` do Supabase (usando Drizzle ORM).
4.  Lidar com diferentes planos (e.g., 'basic', 'pro', 'enterprise').
**Restrições:**
- Use a biblioteca `stripe` oficial.
- A chave secreta do webhook deve ser uma variável de ambiente.
- O endpoint deve retornar um status 200 para o Stripe após o processamento.
**Formato de Saída:** Código completo do Next.js API Route (`pages/api/stripe-webhook.ts` ou Server Action) e um snippet de como configurar o Stripe para enviar eventos para este endpoint.

🎨 Prompts de Frontend & Design

Contexto Geral: Frontend em Next.js 14+ (Server Components, Client Components), React 19, Tailwind v4, shadcn/ui, Radix UI. Design minimalista dark.

  1. Prompt: Componente de Upload de Documentos com Drag-and-Drop

    prompt
    Você é um engenheiro de frontend com foco em UX e acessibilidade.
**Tarefa:** Crie um componente React (`DocumentUpload.tsx`) que permita o upload de documentos (PDF, DOCX) com funcionalidade de drag-and-drop e um botão de seleção de arquivo. O componente deve:
1.  Exibir uma área de drop visualmente distinta.
2.  Mostrar o nome do arquivo selecionado e um indicador de carregamento (se houver upload em progresso).
3.  Aceitar apenas `.pdf` e `.docx`.
4.  Integrar-se com shadcn/ui para botões e inputs.
5.  Ser acessível (ARIA attributes, feedback visual para leitores de tela).
6.  O upload real será feito para uma API route (e.g., `/api/upload-contract`).
**Restrições:**
- Use React Hooks.
- Estilização com Tailwind CSS v4.
- Feedback de erro para tipos de arquivo inválidos.
**Formato de Saída:** Código completo do componente React.

  2. Prompt: Layout Principal com Navegação Lateral e Dark Mode

    prompt
    Você é um designer de UI/UX e desenvolvedor frontend com experiência em design systems.
**Tarefa:** Crie o layout principal da aplicação (`app/layout.tsx` e `components/Sidebar.tsx`) que inclua:
1.  Uma navegação lateral fixa (sidebar) com links para "Dashboard", "Meus Contratos", "Assinatura", "Configurações".
2.  Um header simples com o logo do ContratoPro e um menu de usuário (avatar, nome, logout).
3.  Suporte a Dark Mode (usando `next-themes` ou uma solução similar com Tailwind).
4.  O conteúdo principal deve ser renderizado no centro.
5.  Use componentes shadcn/ui (Button, DropdownMenu, Avatar).
**Restrições:**
- Design minimalista e dark-first.
- Responsivo para mobile (sidebar deve colapsar ou ser um drawer).
- O tema dark deve ser persistente via localStorage.
**Formato de Saída:** Código dos componentes `app/layout.tsx`, `components/Sidebar.tsx` e `components/Header.tsx`.

  3. Prompt: Visualizador de Relatório de Análise de Contrato Interativo

    prompt
    Você é um desenvolvedor frontend com expertise em visualização de dados e interatividade.
**Tarefa:** Desenvolva um componente React (`ContractReportViewer.tsx`) que exiba o relatório de análise de um contrato. O relatório virá como um JSON estruturado (ex: `structured_risks_json`, `suggestions_json`). O componente deve:
1.  Apresentar os riscos identificados em uma lista, com cada risco clicável para expandir detalhes (cláusula afetada, severidade, descrição).
2.  Exibir sugestões de melhoria ou cláusulas alternativas em outra seção.
3.  Permitir que o usuário "aceite" ou "rejeite" sugestões (apenas visualmente no frontend, sem persistência neste prompt).
4.  Usar componentes shadcn/ui (Accordion, Card, Badge, Button).
**Restrições:**
- Design clean e fácil de ler.
- O JSON de entrada será similar a: `{ risks: [{ id, clause, severity, description }], suggestions: [{ id, original_clause, suggested_text, rationale }] }`.
- Foco na apresentação dos dados, não na edição do contrato original.
**Formato de Saída:** Código completo do componente React.

🔍 Prompts de SEO & Schema.org

Contexto Geral: ContratoPro é um SaaS, então SEO é crucial para aquisição de usuários. Foco em performance, dados estruturados e autoridade.

  1. Prompt: Meta Tags Dinâmicas e Open Graph para Páginas de Marketing

    prompt
    Você é um especialista em SEO técnico e Next.js.
**Tarefa:** Crie uma função utilitária ou um componente Server Component (`SeoHead.tsx`) que gere meta tags dinâmicas para SEO e Open Graph para as páginas de marketing do ContratoPro (Homepage, Landing Pages de Features). A função deve aceitar `title`, `description`, `keywords`, `ogImage`, `ogUrl` como props.
**Restrições:**
- Use o componente `<head>` do Next.js ou o novo `metadata` API do Next.js 14.
- Inclua tags essenciais como `title`, `description`, `canonical`.
- Inclua tags Open Graph (`og:title`, `og:description`, `og:image`, `og:url`, `og:type`).
- Inclua tags Twitter Card (`twitter:card`, `twitter:site`, `twitter:creator`, `twitter:title`, `twitter:description`, `twitter:image`).
**Formato de Saída:** Código do componente `SeoHead.tsx` e um exemplo de uso em uma página Next.js.

  2. Prompt: Dados Estruturados Schema.org para "SoftwareApplication" e "Product"

    prompt
    Você é um mestre em Schema.org e dados estruturados.
**Tarefa:** Gere o JSON-LD para a homepage do ContratoPro, descrevendo-o como um `SoftwareApplication` e um `Product`. Inclua as seguintes propriedades:
- `SoftwareApplication`: `name`, `applicationCategory` (LegalTech), `operatingSystem`, `softwareRequirements`, `offers` (referenciando o `Product`).
- `Product`: `name`, `description`, `brand`, `aggregateRating` (se disponível), `offers` (com `PriceSpecification` para planos).
**Restrições:**
- Deve ser um único bloco JSON-LD.
- Use as propriedades mais relevantes para um SaaS.
- Assuma que o ContratoPro tem uma avaliação média de 4.8/5 de 150 reviews.
**Formato de Saída:** Bloco de código JSON-LD completo.

  3. Prompt: Sitemap XML Dinâmico e robots.txt Otimizado

    prompt
    Você é um ninja de SEO e otimização de rastreamento.
**Tarefa:** Crie um `sitemap.xml` dinâmico (gerado via Next.js API Route ou Server Component) que inclua as URLs estáticas (home, features, pricing, contact, privacy, terms) e as URLs de blog/artigos (se houver, assuma `/blog/[slug]`). Crie também um `robots.txt` otimizado para o ContratoPro.
**Restrições:**
- O sitemap deve ser gerado programaticamente e ter um `lastmod` dinâmico.
- O `robots.txt` deve permitir o rastreamento de tudo, exceto `/admin` e `/dashboard/*` (áreas restritas).
- Inclua o link para o sitemap no `robots.txt`.
**Formato de Saída:** Código do Next.js API Route para o sitemap (`pages/api/sitemap.xml.ts` ou Server Component) e o conteúdo do arquivo `public/robots.txt`.

⚡ Prompts de Performance & Core Web Vitals

Contexto Geral: Next.js 14+, Vercel, Cloudflare Workers, Tailwind v4. Foco em LCP, INP e CLS.

  1. Prompt: Otimização de Imagens e Fontes Personalizadas

    prompt
    Você é um especialista em performance web e otimização de assets.
**Tarefa:** Forneça as melhores práticas e snippets de código para otimizar imagens e fontes personalizadas no ContratoPro.
Para imagens:
- Uso do componente `next/image` com `priority` e `fill` quando apropriado.
- Configuração do `next.config.js` para otimização de imagens externas (se houver).
Para fontes:
- Carregamento de fontes personalizadas (ex: Inter) com `next/font/google`.
- Estratégia de `font-display: swap` ou `optional`.
- Pré-carregamento de fontes críticas.
**Restrições:**
- Foco em LCP e CLS.
- Use `next/image` e `next/font`.
- As fontes devem ser carregadas de forma a evitar FOUT (Flash of Unstyled Text) ou FOIT (Flash of Invisible Text).
**Formato de Saída:** Snippets de código para `next.config.js`, `_app.tsx` (ou `layout.tsx`) e exemplos de uso de `next/image`.

  2. Prompt: Estratégias de Lazy Loading e Code Splitting

    prompt
    Você é um guru de performance e otimização de carregamento.
**Tarefa:** Explique e demonstre como implementar lazy loading para componentes não críticos e code splitting para rotas no Next.js 14+.
**Restrições:**
- Use `React.lazy` e `Suspense` para componentes.
- Explique como o Next.js já faz code splitting por rota automaticamente e como otimizar isso.
- Mencione a importância de `dynamic` imports.
**Formato de Saída:** Explicação conceitual, exemplos de código para lazy loading de um componente pesado (ex: um editor de texto complexo que não é carregado na primeira renderização) e como verificar o bundle splitting.

  3. Prompt: Edge Caching com Vercel e Cloudflare Workers

    prompt
    Você é um arquiteto de infraestrutura e performance.
**Tarefa:** Descreva como configurar o edge caching para o ContratoPro, aproveitando a Vercel e o Cloudflare Workers.
**Restrições:**
- Explique a diferença entre o cache da Vercel (CDN) e o cache que pode ser implementado no Worker.
- Forneça um snippet de Cloudflare Worker que implemente caching para respostas de API de IA (para resultados repetidos de análise de contratos idênticos, por exemplo).
- Mencione headers HTTP como `Cache-Control` e `ETag`.
**Formato de Saída:** Explicação detalhada e um snippet de código para um Cloudflare Worker que implementa caching.

🚀 Prompts de Deploy & DevOps

Contexto Geral: Vercel para Next.js, Cloudflare Workers para IA, Supabase para DB/Auth/Storage. CI/CD automatizado.

  1. Prompt: Configuração de CI/CD para Vercel com GitHub Actions

    prompt
    Você é um engenheiro DevOps com expertise em Vercel e GitHub Actions.
**Tarefa:** Crie um workflow de GitHub Actions que automatize o deploy do ContratoPro para Vercel. O workflow deve:
1.  Ser acionado em pushes para `main` e pull requests.
2.  Instalar dependências.
3.  Rodar testes (assuma `pnpm test`).
4.  Rodar linter (assuma `pnpm lint`).
5.  Fazer o build do projeto Next.js.
6.  Realizar o deploy para Vercel (ambiente de preview para PRs, produção para `main`).
**Restrições:**
- Use as actions oficiais do GitHub e Vercel.
- As variáveis de ambiente da Vercel (token, org ID, project ID) devem ser secrets do GitHub.
- Inclua um passo para migrações de banco de dados (assuma `drizzle-kit push:pg` para Supabase).
**Formato de Saída:** Arquivo `.github/workflows/deploy.yml` completo.

  2. Prompt: Monitoramento de Performance e Erros com Vercel Analytics e Sentry

    prompt
    Você é um especialista em observabilidade e monitoramento de aplicações.
**Tarefa:** Descreva como configurar o monitoramento de performance (Core Web Vitals) e erros (frontend e backend) para o ContratoPro usando Vercel Analytics e Sentry.
**Restrições:**
- Explique a integração do Vercel Analytics.
- Forneça snippets de código para inicializar o Sentry no frontend (Client Components) e no backend (Server Actions/API Routes).
- Mencione como configurar o Sentry para capturar erros em Cloudflare Workers.
**Formato de Saída:** Explicação detalhada e snippets de código para Sentry.

  3. Prompt: Gerenciamento de Variáveis de Ambiente Seguras

    prompt
    Você é um engenheiro de segurança e infraestrutura.
**Tarefa:** Explique a melhor forma de gerenciar variáveis de ambiente sensíveis (chaves de API, credenciais de DB) para o ContratoPro em produção e desenvolvimento, considerando Vercel, Supabase e Cloudflare Workers.
**Restrições:**
- Use o sistema de Environment Variables da Vercel.
- Use secrets do Cloudflare Workers.
- Use `.env.local` para desenvolvimento local.
- Enfatize a importância de nunca commitar arquivos `.env` sensíveis.
**Formato de Saída:** Explicação passo a passo e exemplos de como definir variáveis em cada plataforma.

Prompt Único Completo

Este é o mega-prompt, a bala de prata do Zé Mané. Com ele, você pode gerar a espinha dorsal do ContratoPro de uma vez só.

prompt
Você é o Zé Mané, um engenheiro de software sênior e autodidata, mestre em desenvolvimento web moderno e IA.
**Contexto do Projeto:** Estamos construindo o ContratoPro, um SaaS para advogados que automatiza a revisão de contratos usando IA.
**Stack:** Next.js 14+ (Server Components), React 19, Vercel, Supabase (PostgreSQL, Auth, Storage), Drizzle ORM, tRPC, Tailwind v4, shadcn/ui, Radix UI, Cloudflare Workers, Stripe, Claude API, GPT-4 API, Gemini API.
**Objetivo:** Gerar o setup inicial completo do projeto, incluindo a estrutura de pastas, configuração de ferramentas, componentes essenciais e lógica de backend, para um MVP funcional do ContratoPro.

**Tarefa:** Crie um guia passo a passo detalhado para configurar o ambiente de desenvolvimento e gerar os arquivos-chave para o ContratoPro. O guia deve incluir:

1.  **Configuração Inicial do Projeto:**
    *   Comandos para criar um novo projeto Next.js com TypeScript e pnpm.
    *   Instalação e configuração inicial de Tailwind CSS v4, shadcn/ui e Radix UI.
    *   Configuração inicial do tRPC (server e client), incluindo `trpc/server/router.ts` e `trpc/server/context.ts` com integração básica do Supabase Auth.
    *   Configuração do Drizzle ORM para Supabase PostgreSQL (arquivo `drizzle.config.ts` e `db/schema.ts` com as tabelas `users`, `contracts`, `analysis_reports`, `subscriptions`).

2.  **Componentes Frontend Essenciais:**
    *   `app/layout.tsx`: Layout principal com Dark Mode, `next-themes` e integração de `Sidebar` e `Header`.
    *   `components/Sidebar.tsx`: Navegação lateral com links para "Dashboard", "Meus Contratos", "Assinatura", "Configurações".
    *   `components/Header.tsx`: Header com logo, nome do usuário e `DropdownMenu` para logout.
    *   `components/DocumentUpload.tsx`: Componente de upload de arquivos (PDF, DOCX) com drag-and-drop, indicador de carregamento e validação de tipo de arquivo.
    *   `components/ContractReportViewer.tsx`: Componente para exibir o JSON de análise de contrato de forma interativa (riscos, sugestões).

3.  **Lógica Backend Essencial (Next.js API Routes/Server Actions):**
    *   `api/trpc/[trpc].ts`: Endpoint principal do tRPC.
    *   `api/upload-contract`: API Route para receber arquivos do `DocumentUpload.tsx`, fazer upload para Supabase Storage e iniciar o processo de análise (chamando o Cloudflare Worker).
    *   `api/stripe-webhook`: Webhook para Stripe, processando eventos de assinatura e atualizando o DB.

4.  **Cloudflare Worker para Orquestração de IA:**
    *   Código base para um `worker.ts` que recebe `contract_id` e `storage_path`, baixa o documento, extrai texto (função placeholder), chama uma API de IA (Claude/GPT-4/Gemini via parâmetro), estrutura a resposta e salva no Supabase.

5.  **Otimizações de SEO e Performance:**
    *   `app/seo-config.ts` (ou similar): Função para gerar meta tags dinâmicas e JSON-LD para `SoftwareApplication` e `Product`.
    *   Configuração de `next/font/google` para fontes personalizadas.
    *   Exemplo de uso de `next/image` para otimização de imagens.

**Restrições:**
-   Todos os códigos devem ser em TypeScript.
-   Use as bibliotecas e frameworks especificados na stack.
-   As credenciais de API e variáveis de ambiente devem ser placeholders (ex: `process.env.SUPABASE_URL`).
-   O código deve ser funcional e seguir as melhores práticas para cada tecnologia.
-   Priorize a clareza e a modularidade.
-   O estilo de design deve ser minimalista dark-first, usando Tailwind e shadcn/ui.
-   Inclua comentários explicativos onde necessário.
-   A saída deve ser um conjunto de arquivos e instruções prontas para copiar e colar.

**Formato de Saída:**
Um documento Markdown com seções para cada item, contendo:
-   Comandos de instalação.
-   Estrutura de pastas.
-   Conteúdo completo dos arquivos especificados.
-   Explicações concisas sobre cada parte.

Stack Mínima Viável (MVP em 48h)

Para tirar o ContratoPro do papel em tempo recorde, a gente vai focar no essencial. Nada de firula, só o que entrega valor para o advogado.

  • Frontend:
  • Backend:
    • Next.js API Routes/Server Actions: Lógica de negócio e endpoints.
    • Supabase (PostgreSQL, Auth, Storage): Banco de dados, autenticação de usuários e armazenamento de documentos.
    • Drizzle ORM: ORM para interagir com o PostgreSQL.
  • IA:
  • Deploy:

Checklist de Lançamento

Antes de apertar o botão de "Go Live", Zé Mané tem um checklist de 10 itens técnicos que são inegociáveis.

  1. Testes de Integração e E2E: Garanta que os fluxos críticos (upload, análise, visualização, assinatura) funcionam de ponta a ponta. Use Playwright ou Cypress.
  2. Monitoramento de Erros (Sentry/LogRocket): Sentry configurado no frontend, backend e Cloudflare Workers para capturar e alertar sobre erros em produção.
  3. Monitoramento de Performance (Vercel Analytics/Lighthouse CI): Core Web Vitals verdes em todas as páginas críticas. LCP < 2.5s, INP < 200ms, CLS < 0.1.
  4. Segurança da Autenticação (Supabase Auth): Regras de RLS (Row Level Security) configuradas no Supabase para garantir que usuários só acessem seus próprios dados.
  5. Segurança do Armazenamento (Supabase Storage): Políticas de acesso configuradas para que apenas o usuário proprietário e o backend possam acessar os documentos.
  6. Configuração de Webhooks Stripe: Teste o webhook em ambiente de produção (usando stripe listen) para garantir que os eventos de assinatura estão sendo processados corretamente.
  7. Sitemap XML e robots.txt: Verifique se o sitemap está atualizado, acessível e listado no robots.txt. Teste no Google Search Console.
  8. Dados Estruturados (Schema.org): Valide o JSON-LD com a ferramenta de teste de Rich Snippets do Google.
  9. Variáveis de Ambiente de Produção: Todas as chaves de API e segredos configurados corretamente na Vercel e Cloudflare Workers, sem vazamento no código.
  10. Testes de Acessibilidade (WCAG 2.2): Verifique a navegação por teclado, contraste de cores e compatibilidade com leitores de tela nos fluxos principais. Use Lighthouse e ferramentas como Axe DevTools.

Com essa receita do Zé Mané, o ContratoPro vai ser um sucesso estrondoso! Agora, bota a mão na massa e vamo codar!

Compartilhar