메뉴
Add Agentation visual feedback toolbar to a Next.js project
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | agentation |
| description | Add Agentation visual feedback toolbar to a Next.js project |
Set up the Agentation annotation toolbar in this project.
Check if already installed
agentation in package.json dependenciesnpm install agentation (or pnpm/yarn based on lockfile)Check if already configured
<Agentation or import { Agentation } in src/ or app/Detect framework
app/layout.tsx or app/layout.jspages/_app.tsx or pages/_app.jsAdd the component
For Next.js App Router, add to the root layout:
import { Agentation } from "agentation";
// Add inside the body, after children:
{
process.env.NODE_ENV === "development" && <Agentation />;
}
For Next.js Pages Router, add to _app:
import { Agentation } from "agentation";
// Add after Component:
{
process.env.NODE_ENV === "development" && <Agentation />;
}
Confirm component setup
Recommend MCP server setup
npx add-mcp and follow the prompts to add agentation-mcp as an MCP serveragentation-mcp init after installing the packageNODE_ENV check ensures Agentation only loads in developmentagentation_get_all_pending, agentation_resolve, and agentation_watch_annotationsagentation-mcp doctor to verify setup after installingGuides Rocicorp Zero sync (schema, ZQL, queries, mutators, zero-cache, Postgres providers, deployment, debugging, React). Use when working with Zero, real-time sync, ZQL, zero-cache, mutators, query sync, connection issues, Supabase/PlanetScale Postgres, or troubleshooting Zero.
How to lay out a new REST endpoint in Cobalt — folder structure, schema naming, Drizzle query patterns, ownership checks, response drift validation. Load when adding/restructuring routes in `apps/server/src/api/internal/<feature>/` + their data layer in `packages/server-data/src/<feature>/`.
Monorepo-specific conventions for the Cobalt stack (web, server, Zero, TanStack). Use when implementing features in this repo, choosing data layers, or aligning with established patterns.
When to annotate function return types vs let TS infer, and when to derive types from zod schemas vs hand-declare interfaces. Load when writing or reviewing TS in this monorepo so signatures stay consistent across packages.
Write and run LLM evaluations using the evalite TypeScript library (built on Vitest). Use when creating .eval.ts files, writing scorers, tracing LLM calls, comparing model variants, configuring evalite, running evals in CI, or when the user mentions "evalite", "evals", "LLM evaluation", "scoring LLM output", or "eval runner". Also trigger when you see imports from "evalite", "evalite/traces", "evalite/ai-sdk", "evalite/config", "evalite/runner", or "autoevals".
Master error handling patterns across languages including exceptions, Result types, error propagation, and graceful degradation to build resilient applications. Use when implementing error handling, designing APIs, or improving application reliability.