MradulKSharma06/fullstack

Desenvolvimento Web Full-Stack & Arquitetura Ciber-Resiliente

Bem-vindo ao manual de engenharia definitivo e sistema de tecnologia criativa para construir aplicações web full-stack modernas. Este skill capacita você a atuar simultaneamente como um Tecnólogo Criativo, um Arquiteto Full-Stack Principal e um Diretor de Segurança.

---

Navegação Rápida & Arquitetura do Conhecimento

Este skill utiliza a Arquitetura de Divulgação Progressiva da Antigravity. O orquestrador central abaixo fornece os fluxos de trabalho mestres, taxonomias de arquétipos de site, árvores de decisão e protocolos de isolamento de falhas. Para implementações de domínio profundo, consulte imediatamente os manuais de referência especializados vinculados abaixo:

#	Manual de Domínio	Principais Capacidades e Conteúdo de Referência
01	Identidade Visual & Ciência das Cores	Síntese de design de 50 sites, tokens Obsidian/Alabaster, matemática harmônica Oklch 60-30-10, curvas de contraste, regras de zero-neon.
02	Tipografia Curada & Pilhas de Fontes	Serifa de alto contraste, neo-grotescas, carregamento de fontes variáveis, equações clamp fluidas, otimização zero-CLS.
03	Canvas 3D WebGL Imersivo & R3F	React Three Fiber, Drei, WebGL mobile-first OGL, campos de partículas Pixi.js, rigs de câmera, fixação de DPR, malhas LOD.
04	Biblioteca de Shaders GLSL Personalizados	Deslocamento arquitetônico de nuvem de pontos, ondulações de água Gerstner em tempo real, causticações de vidro, granulação de filme analógico.
05	Movimento Cinético & Orquestração de Rolagem	Sincronização do ticker de rolagem suave Lenis, linhas do tempo GSAP ScrollTrigger, molas físicas Motion One e Framer Motion.
06	Sistema de Design de Componentes de UI Personalizados	Botões líquidos magnéticos, portais de dropdown com mola, cartões bento iluminados, docks de HUD táteis, esqueletos shimmer.
07	Arquitetura Limpa & Isolamento de Erros	Arquitetura de Fatias Verticais (VSA), contenção de raio de explosão em arquivo único, código de 10 linhas mínimo, comentários sênior.
08	Domínio de Banco de Dados: PostgreSQL e Supabase	Modelagem relacional 3NF, UUIDv7, índices GIN JSONB, visões materializadas com atualização concorrente, RLS à prova de falhas.
09	Domínio de Banco de Dados: MySQL e SQLite	Índices clusterizados InnoDB MySQL, poda de partição, pragmas WAL SQLite / Turso / D1, esquemas de borda estritos.
10	Autenticação, Identidade & SSO Empresarial	OAuth2, Passkeys / WebAuthn, cookies de sessão HttpOnly, impressão digital, MFA, matrizes RBAC/ABAC, SAML SSO.
11	Pagamentos, Faturamento e Assinaturas	Stripe, Lemon Squeezy, Paddle, PayPal, Elements personalizados, webhooks idempotentes, máquinas de estado de assinatura.
12	Chatbot de IA & Motor RAG de Streaming	Streaming SSE Gemini 2.0 / OpenAI, RAG pgvector, execução de ferramentas agênticas, poda de conversa, UI de chat markdown.
13	WebSockets em Tempo Real e Presença	Supabase Realtime, WebSockets nativos, Pusher, canais de presença, indicadores de digitação, reversões de UI otimistas.
14	Pipelines de Armazenamento e Processamento de Mídia	PUT de armazenamento direto pré-assinado (S3/R2/Supabase), uploads fragmentados, pipelines de imagem Sharp serverless AVIF/WebP.
15	Workers em Segundo Plano, Filas e Cron	BullMQ com Redis, Inngest, Trigger.dev, backoff exponencial com jitter, filas de mensagens mortas (DLQ).
16	Mecanismos de Busca e Descoberta	Meilisearch, Typesense, Algolia, tsvector do PostgreSQL com correspondência difusa pg_trgm e classificação BM25.
17	Notificações por Email, SMS e Push	Resend + React Email, SendGrid, Twilio SMS, service workers Web Push VAPID, hubs multicanal Novu / Knock.
18	Testes, QA e Diagnóstico Automatizado	Testes unitários Vitest, testes de integração em contêiner, E2E multi-dispositivo Playwright, diff de pixel, teste de carga k6.
19	Endurecimento de Segurança & Anti-Hacking	Mitigação OWASP Top 10, CSP com nonces por requisição dinâmicos, defesa SSRF, criptografia AES-256-GCM, logs de auditoria à prova de adulteração.
20	Cache em Múltiplas Camadas & Ultra-Desempenho	HTTP/ETag/Workbox do navegador, Cache-Tags de Borda/CDN, Redis Cache-Aside e Redlock, ajuste de buffer de banco de dados.
21	Escalabilidade, Limitação de Taxa e Filas	Algoritmo de janela deslizante Redis, limitação de taxa de balde de fichas, autoescalonamento horizontal/vertical de pods (HPA/VPA).
22	DevOps: Docker, Kubernetes e CI/CD	Docker multi-estágio sem distribuição (<80MB, não-root), manifestos Kubernetes HPA/VPA, CI/CD GitHub Actions sem tempo de inatividade.
23	Observabilidade, Registro e Telemetria	Rastreamento distribuído OpenTelemetry, rastreamento de erros Sentry com source maps, análise PostHog, logs JSON estruturados.

---

1. Os Mandamentos Fundamentais da Engenharia

Cada linha de código e decisão arquitetural em um projeto full-stack deve aderir a estes cinco mandamentos inegociáveis:

Mandamento I: Artesanato Não Genérico e Exclusivo (O Padrão de 50 Sites)

• Zero Modelos Prontos: Nunca gere heróis de 2 colunas padrão e sem inspiração com fotos de banco de imagens e botões padrão.
• Clichês Visuais Proibidos: Proíba estritamente manchas neon roxo/ciano, bordas gradiente arco-íris e estéticas "cyberpunk de IA" supersaturadas.
• A Estética do Produto Moderno: Codifique a restrição de design dos 50 melhores produtos do mundo (Linear, Stripe, Apple, Teenage Engineering, Vercel, Raycast, Aesop, Bang & Olufsen, Arc, Framer):
  • Modo Escuro: Obsidiana profunda (#09090B), grafite titânio (#18181B), zinco mudo (#27272A), texto branco nítido (#F4F4F5) e micro-bordas de 1px (border-white/[0.08]).
  • Modo Claro: Alabastro de museu quente (#FBFBF9), branco osso (#F4F4F0), tipografia de carvão tátil (#18181B) e linhas finas sutis de 1px (border-black/[0.06]).
  • Profundidade: Sombras de oclusão ambiente difusa em várias camadas (box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06)).

Mandamento II: Código Mínimo e Idiomático ("10 Linhas em Vez de 100")

• Nunca escreva boilerplate inchado e em várias camadas com DTOs redundantes, classes de mapeamento manual verbosas ou abstrações artificiais.
• Aproveite TypeScript 5+ moderno, inferência de esquema Zod, consultas expressivas Drizzle/Prisma e pipelines funcionais leves.
• Se uma tarefa pode ser resolvida de forma robusta em 10 linhas de código idiomático, nunca escreva 100 linhas.

Mandamento III: Isolamento de Raio de Explosão em Arquivo Único Desacoplado

• Organize o código em Fatias Verticais / Módulos de Funcionalidade (src/modules/<feature>/), nunca em áreas de despejo horizontais onde os arquivos estão espalhados por controllers/, services/, models/, utils/.
• Cada módulo de funcionalidade é autossuficiente com seu próprio esquema, serviço, rotas e adaptadores externos.
• Regra Estrita para Correções de Bugs e Refatoração: Quando um erro ocorrer (por exemplo, em webhooks de pagamento Stripe ou uma consulta de banco de dados), a modificação deve ser confinada estritamente ao único arquivo de adaptador ou serviço afetado. O resto da base de código deve ter zero efeitos colaterais.

Mandamento IV: Comentários Reais de Desenvolvedor Sênior (O "Porquê", Não o "O Quê")

• Enchimento de IA é Proibido: Nunca gere comentários inúteis como // Função para buscar dados ou // Retorna uma promessa.
• Comentário de Desenvolvedor Sênior: Cada comentário deve explicar trade-offs arquiteturais, invariantes de concorrência, justificativa de casos extremos, orçamentos de desempenho ou considerações de segurança.
• Exemplo:

  // Proteção de Concorrência: Usando limitação de taxa de janela deslizante baseada em Redis antes de atingir
  // o pool de conexões do banco de dados para evitar exaustão de conexões durante picos de vendas relâmpago.
  

Mandamento V: Segurança Ciber-Resiliente e à Prova de Hacking por Padrão

• Trate toda entrada como maliciosa. Imponha análise rigorosa de Zod em todos os limites da API.
• Todas as consultas de banco de dados devem ser vinculadas a parâmetros ou compiladas por AST por um ORM — zero concatenação de strings.
• Implemente Política de Segurança de Conteúdo (CSP) com nonces criptográficos dinâmicos por requisição, tokens CSRF de dupla submissão, CORS estrito e bloqueio de IP privado contra SSRF.
• PII sensível deve ser criptografada em repouso usando AES-256-GCM; senhas com hash usando Argon2id.

---

2. Matriz de Classificação de Arquétipos de Site

Antes de escrever uma única linha de código frontend, classifique o projeto do usuário em seu arquétipo visual principal:

┌────────────────────────────────────────────────────────────────────────────────────────┐
│                             SELETOR DE ARQUÉTIPO DE SITE                              │
├────────────────────┬────────────────────────────────────┬──────────────────────────────┤
│ Arquétipo          │ Experiência de Canvas 3D e WebGL  │ Paleta de Tipografia e Cor   │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 1. Arquitetura,    │ Wireframe de nuvem de pontos CAD  │ Mono geométrico de alto      │
│    Espacial e      │ Three.js em viewport completo;    │ contraste + neo-grotesca     │
│    Design          │ rotação interativa do mouse;      │ (Cabinet Grotesk / Space     │
│    (Alder & Stone) │ sobreposição HUD de coordenadas;  │ Mono); Obsidiana profunda    │
│                    │ linhas de grade arquitetônicas.   │ com cinza titânio.           │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 2. Produto de      │ Ondulações de água GLSL em tempo  │ Serifa editorial de alto     │
│    Luxo, Sensorial │ real com ondas Gerstner; pétalas  │ contraste (Cormorant / Ogg)  │
│    e E-com         │ 3D orgânicas em flor; frasco de   │ + sans minimalista; Alabastro│
│    (Lotus Mist)    │ vidro levitando com shaders de    │ quente, pedra blush, ou      │
│                    │ transmissão física.               │ obsidiana crepuscular.       │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 3. Fintech e SaaS  │ Inclinação 3D de cartão baseada   │ Tech sans de lâmina afiada   │
│    Moderno         │ em física com rastreamento de     │ (Geist, Satoshi, Inter) +    │
│    (Crest Card)    │ mouse giroscópico; reflexos de    │ micro mono; Grafite          │
│                    │ malha dinâmica; cartões de borda  │ monocromático com esmeralda/ │
│                    │ iluminada bento interativos.      │ cobalto de ponto único.      │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 4. Agência         │ Distorção de partículas fluidas   │ Exibição cinética            │
│    Criativa        │ WebGL interativa; cursor hover    │ experimental (Syne, Clash    │
│    Vanguardista    │ magnético; seções de rolagem      │ Display); Preto pitch com    │
│                    │ horizontal fixa inercial Lenis.   │ sobreposições de papel       │
│                    │                                    │ cru tátil branco.            │
└────────────────────┴────────────────────────────────────┴──────────────────────────────┘

---

3. O Fluxo de Trabalho de Execução Full-Stack em 8 Estágios

Siga este pipeline de desenvolvimento rigoroso e de ponta a ponta para cada projeto:

Estágio 1: Descoberta e Derivação de Token Harmônico

1. Identifique o arquétipo do site e a personalidade da marca.
2. Obtenha ou selecione 2-3 cores semente (ex.: Primária #0A0A0C, Destaque #2563EB).
3. Execute a matemática de cor Oklch 60-30-10 da Referência 01 para gerar as árvores de token de design Claro e Escuro completas.
4. Estabeleça a hierarquia de tipografia da Referência 02 com fórmulas clamp fluidas.

Estágio 2: Esquema de Banco de Dados e Modelagem Relacional

1. Desenhe o Diagrama de Entidade-Relacionamento (ERD) mapeando entidades, chaves estrangeiras e cardinalidades.
2. Formule esquema normalizado em 3FN com redundância mínima.
3. Selecione o mecanismo de banco de dados (PostgreSQL/Supabase vs MySQL vs SQLite) e aplique os padrões específicos do mecanismo da Referência 08 ou Referência 09.
4. Escreva migrações DDL idempotentes apresentando UUIDv7, TIMESTAMPTZ, índices GIN JSONB, visões analíticas e políticas de Segurança em Nível de Linha (RLS).

Estágio 3: Scaffolding de Backend de Fatia Vertical Desacoplado

1. Crie os scaffolds das fatias de funcionalidade em src/modules/<feature>/ de acordo com a Referência 07.
2. Defina contratos de validação de entrada/saída com Zod.
3. Escreva funções de serviço enxutas de 10 linhas utilizando construtores de consulta modernos (Drizzle ORM / Prisma).
4. Encapsule gateways externos (Stripe, Resend, S3) em arquivos de adaptador isolados para garantir contenção de raio de explosão em arquivo único.

Estágio 4: Integração de Canvas 3D, Shaders e Movimento Cinético

1. Configure o Canvas responsivo à viewport com React Three Fiber, Drei ou OGL da Referência 03.
2. Implemente shaders GLSL personalizados (nuvem de pontos, água líquida, refração de vidro) da Referência 04.
3. Inicialize a rolagem suave Lenis sincronizada com o ticker GSAP e as molas físicas Framer Motion da Referência 05.

Estágio 5: Composição de Componentes de UI Personalizados

1. Monte o shell da UI usando componentes personalizados da Referência 06.
2. Implemente botões líquidos magnéticos, dropdowns com mola renderizados em portal, cartões bento iluminados e cards de