antes-da-tela

PostHog integration for Next.js App Router applications

Use when a feature branch is complete and ready for PR — runs a full diff-based review of the current branch against main, reads every changed file, validates against project rules, and produces a concrete action plan. Do NOT use on main branch.

Identifies and executes the next pending POC task. Fast context pickup from docs/poc/context.json — no build/lint at start. Use for starting the next task, resuming in-progress work, or targeting a specific task by ID.

Use when the Antes da Tela POC needs a new task direction or clearer scope before handing work off to /create-poc-task in the documented AI workflow.

Analyzes current POC task state, creates a standardized new task file, and updates docs/poc/context.json and docs/poc/tasks/summary.md. Use when adding a new task to the Antes da Tela POC backlog.

Unified Figma implementation + refinement workflow that translates Figma designs into production-ready code, reconciles design tokens, and performs regression-safe metadata updates. Use live MCP data with canonical metadata under `docs/design-system/`.

Use when a POC task has been implemented and needs design alignment with Figma — tokens diverge, components are mismatched, or the design-system metadata is stale. Triggers: post-implementation review, design QA pass, or when `docs/design-system/design-system.meta.json` may be out of sync with the Figma source.

Adds a new npm package to the project using Yarn 4. Use when installing any new library. This skill ensures the correct package manager is used and updates relevant documentation.

Implement JWT/cookie authentication and authorization in tRPC using createContext for user extraction, t.middleware with opts.next({ ctx }) for context narrowing to non-null user, protectedProcedure base pattern, client-side Authorization headers via httpBatchLink headers(), WebSocket connectionParams, and SSE auth via cookies or EventSource polyfill custom headers.

**Cria e padroniza arquivos de "rules" e guidelines para agentes no repositório. Gera templates compatíveis com o VS Code Chat (Copilot Chat) e com o fluxo Claude/Code, adaptando o formato ao diretório alvo (`.agents/*` ou `.claude/*`).

Cria uma `SKILL.md` padronizada para uso em VS Code Chat (Copilot Chat) e gera a versão correspondente adaptada para outros agentes do repositório (ex.: Claude). Automatiza frontmatter, templates e validações básicas.

Use when the implementation of a feature or bugfix is complete and you need to generate a professional, conventional pull request description summarizing the changes against the main branch.

Throw typed errors with TRPCError and error codes (NOT_FOUND, UNAUTHORIZED, BAD_REQUEST, INTERNAL_SERVER_ERROR), configure errorFormatter for client-side Zod error display, handle errors globally with onError callback, map tRPC errors to HTTP status codes with getHTTPStatusCodeFromError().

Configure the tRPC client link chain: httpLink, httpBatchLink, httpBatchStreamLink, splitLink, loggerLink, wsLink, createWSClient, httpSubscriptionLink, unstable_localLink, retryLink. Choose the right terminating link. Route subscriptions via splitLink. Build custom links for SOA routing. Link options: url, headers, transformer, maxURLLength, maxItems, connectionParams, EventSource ponyfill.

Create and compose tRPC middleware with t.procedure.use(), extend context via opts.next({ ctx }), build reusable middleware with .concat() and .unstable_pipe(), define base procedures like publicProcedure and authedProcedure. Access raw input with getRawInput(). Logging, timing, OTEL tracing patterns.

Creates a new Drizzle ORM table schema and generates the migration. Use when adding a new data entity or database table.

Scaffolds a new Next.js App Router page with proper Server Component patterns, Supabase auth check, tRPC prefetch, and metadata. Use when adding a new route or page to the app.

Installs a shadcn/ui component and creates a typed wrapper. Use when adding new UI primitives from the shadcn registry.

Creates a new tRPC router for a feature and wires it into appRouter. Use when adding a new API domain, feature, or data entity that needs server procedures.

Handle FormData, file uploads, Blob, Uint8Array, and ReadableStream inputs in tRPC mutations. Use octetInputParser from @trpc/server/http for binary data. Route non-JSON requests with splitLink and isNonJsonSerializable() from @trpc/client. FormData and binary inputs only work with mutations (POST).

Set up @trpc/tanstack-react-query with createTRPCContext(), TRPCProvider, useTRPC() hook, queryOptions/mutationOptions factories, query invalidation via queryClient.invalidateQueries with queryFilter, and type inference with inferInput/inferOutput.

Call tRPC procedures directly from server code using t.createCallerFactory() and router.createCaller(context) for integration testing, internal server logic, and custom API endpoints. Catch TRPCError and extract HTTP status with getHTTPStatusCodeFromError(). Error handling via onError option.

Break a tRPC backend into multiple services with custom routing links that split on the first path segment (op.path.split('.')) to route to different backend service URLs. Define a faux gateway router that merges service routers for the AppRouter type without running them in the same process. Share procedure and router definitions via a server-lib package with a single initTRPC instance. Each service runs its own standalone/Express/Fastify server.

Configure SuperJSON transformer on both server initTRPC.create({ transformer: superjson }) and every client terminating link (httpBatchLink, httpLink, wsLink, httpSubscriptionLink) to support Date, Map, Set, BigInt over the wire. Transformer must match on both sides. In v11, transformer goes on individual links, not the client constructor.

Entry point for all tRPC skills. Decision tree routing by task: initTRPC.create(), t.router(), t.procedure, createTRPCClient, adapters, subscriptions, React Query, Next.js, links, middleware, validators, error handling, caching, FormData.

Configure input and output validation with .input() and .output() using Zod, Yup, Superstruct, ArkType, Valibot, Effect, or custom validator functions. Chain multiple .input() calls to merge object schemas. Standard Schema protocol support. Output validation returns INTERNAL_SERVER_ERROR on failure.

Plano executável para refatorações arquiteturais: modularização, remoção de duplicação e priorização por ganho de redução de código e consistência.