[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KS669AEJ3YAHT3Q090HK71":3,"skill-same:01M6KS669AEJ3YAHT3Q090HK71":70},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":69},"01M6KS669AEJ3YAHT3Q090HK71","sentry-nextjs-sdk",null,"Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.","JackSmack1971\u002Ffullstack-council","JackSmack1971","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F128181597?v=4","01M6KS1FH32N6WNWZ68JC9FFDJ","01M6KS1FNAEAKMQ2K1084NTEKF",1,"MIT","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Ffullstack-council\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fsentry-for-ai\u002Fsentry-nextjs-sdk\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"sdk","sentry nextjs sdk","nextjs","sentry","list","github","for","error","add","next","npx","error tracking","files","read","Next.js","performance","monitoring","alerting","file","https","2026-11-10 10:12:30",false,"---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\nsource:     https:\u002F\u002Fskills.sh\u002Fgetsentry\u002Fsentry-for-ai\u002Fsentry-nextjs-sdk\ngithub:     https:\u002F\u002Fgithub.com\u002Fgetsentry\u002Fsentry-for-ai\ninstall:    npx skills add getsentry\u002Fsentry-for-ai --skill sentry-nextjs-sdk\ninstalls:   \nscraped_at: 2026-04-04T15:09:25Z\nallowed-tools: [read_file, list_files]\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## SKILL.md\n\n> All Skills > SDK Setup > Next.js SDK\n\n# Sentry Next.js SDK\n\nOpinionated wizard that scans your Next.js project and guides you through complete Sentry setup across all three runtimes: browser, Node.js server, and Edge.\n\n## Invoke This Skill When\n\n- User asks to \"add Sentry to Next.js\" or \"set up Sentry\" in a Next.js app\n- User wants to install or configure `@sentry\u002Fnextjs`\n- User wants error monitoring, tracing, session replay, logging, or profiling for Next.js\n- User asks about `instrumentation.ts`, `withSentryConfig()`, or `global-error.tsx`\n- User wants to capture server actions, server component errors, or edge runtime errors\n\n> **Note:** SDK versions and APIs below reflect current Sentry docs at time of writing (`@sentry\u002Fnextjs` ≥8.28.0).\n> Always verify against docs.sentry.io\u002Fplatforms\u002Fjavascript\u002Fguides\u002Fnextjs\u002F before implementing.\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Phase 1: Detect\n\nRun these commands to understand the project before making any recommendations:\n\n```\n# Detect Next.js version and existing Sentry\ncat package.json | grep -E '\"next\"|\"@sentry\u002F'\n\n# Detect router type (App Router vs Pages Router)\nls src\u002Fapp app src\u002Fpages pages 2>\u002Fdev\u002Fnull\n\n# Check for existing Sentry config files\nls instrumentation.ts instrumentation-client.ts sentry.server.config.ts sentry.edge.config.ts 2>\u002Fdev\u002Fnull\nls src\u002Finstrumentation.ts src\u002Finstrumentation-client.ts 2>\u002Fdev\u002Fnull\n\n# Check next.config\nls next.config.ts next.config.js next.config.mjs 2>\u002Fdev\u002Fnull\n\n# Check for existing error boundaries\nfind . -name \"global-error.tsx\" -o -name \"_error.tsx\" 2>\u002Fdev\u002Fnull | grep -v node_modules\n\n# Check build tool\ncat package.json | grep -E '\"turbopack\"|\"webpack\"'\n\n# Check for logging libraries\ncat package.json | grep -E '\"pino\"|\"winston\"|\"bunyan\"'\n\n# Check for companion backend\nls ..\u002Fbackend ..\u002Fserver ..\u002Fapi 2>\u002Fdev\u002Fnull\ncat ..\u002Fgo.mod ..\u002Frequirements.txt ..\u002FGemfile 2>\u002Fdev\u002Fnull | head -3\n```\n\n**What to determine:**\n\n| Question | Impact |\n| --- | --- |\n| Next.js version? | 13+ required; 15+ needed for Turbopack support |\n| App Router or Pages Router? | Determines error boundary files needed (`global-error.tsx` vs `_error.tsx`) |\n| `@sentry\u002Fnextjs` already present? | Skip install, go to feature config |\n| Existing `instrumentation.ts`? | Merge Sentry into it rather than replace |\n| Turbopack in use? | Tree-shaking in `withSentryConfig` is webpack-only |\n| Logging library detected? | Recommend Sentry Logs integration |\n| Backend directory found? | Trigger Phase 4 cross-link suggestion |\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Phase 2: Recommend\n\nPresent a concrete recommendation based on what you found. Don't ask open-ended questions — lead with a proposal:\n\n**Recommended (core coverage):**\n\n- ✅ **Error Monitoring** — always; captures server errors, client errors, server actions, and unhandled promise rejections\n- ✅ **Tracing** — server-side request tracing + client-side navigation spans across all runtimes\n- ✅ **Session Replay** — recommended for user-facing apps; records sessions around errors\n\n**Optional (enhanced observability):**\n\n- ⚡ **Logging** — structured logs via `Sentry.logger.*`; recommend when `pino`\u002F`winston` or log search is needed\n- ⚡ **Profiling** — continuous profiling; requires `Document-Policy: js-profiling` header\n- ⚡ **AI Monitoring** — OpenAI, Vercel AI SDK, Anthropic; recommend when AI\u002FLLM calls detected\n- ⚡ **Crons** — detect missed\u002Ffailed scheduled jobs; recommend when cron patterns detected\n- ⚡ **Metrics** — custom metrics via `Sentry.metrics.*`; recommend when custom KPIs or business metrics needed\n\n**Recommendation logic:**\n\n| Feature | Recommend when... |\n| --- | --- |\n| Error Monitoring | **Always** — non-negotiable baseline |\n| Tracing | **Always for Next.js** — server route tracing + client navigation are high-value |\n| Session Replay | User-facing app, login flows, or checkout pages |\n| Logging | App uses structured logging or needs log-to-trace correlation |\n| Profiling | Performance-critical app; client sets `Document-Policy: js-profiling` |\n| AI Monitoring | App makes OpenAI, Vercel AI SDK, or Anthropic calls |\n| Crons | App has Vercel Cron jobs, scheduled API routes, or `node-cron` usage |\n| Metrics | App needs custom counters, gauges, or histograms via `Sentry.metrics.*` |\n\nPropose: *\"I recommend setting up Error Monitoring + Tracing + Session Replay. Want me to also add Logging or Profiling?\"*\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Phase 3: Guide\n\n### Option 1: Wizard (Recommended)\n\n> **You need to run this yourself** — the wizard opens a browser for login and requires interactive input that the agent can't handle. Copy-paste into your terminal:\n>\n> ```\n> npx @sentry\u002Fwizard@latest -i nextjs\n> ```\n>\n> It handles login, org\u002Fproject selection, SDK installation, config files (`instrumentation-client.ts`, `sentry.server.config.ts`, `sentry.edge.config.ts`, `instrumentation.ts`), `next.config.ts` wrapping, source map upload, and adds a `\u002Fsentry-example-page`.\n>\n> **Once it finishes, come back and skip to Verification.**\n\nIf the user skips the wizard, proceed with Option 2 (Manual Setup) below.\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n### Option 2: Manual Setup\n\n#### Install\n\n```\nnpm install @sentry\u002Fnextjs --save\n```\n\n#### Create `instrumentation-client.ts` — Browser \u002F Client Runtime\n\n> Older docs used `sentry.client.config.ts` — the current pattern is `instrumentation-client.ts`.\n\n```\nimport * as Sentry from \"@sentry\u002Fnextjs\";\n\nSentry.init({\n  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN ?? \"___PUBLIC_DSN___\",\n\n  sendDefaultPii: true,\n\n  \u002F\u002F 100% in dev, 10% in production\n  tracesSampleRate: process.env.NODE_ENV === \"development\" ? 1.0 : 0.1,\n\n  \u002F\u002F Session Replay: 10% of all sessions, 100% of sessions with errors\n  replaysSessionSampleRate: 0.1,\n  replaysOnErrorSampleRate: 1.0,\n\n  enableLogs: true,\n\n  integrations: [\n    Sentry.replayIntegration(),\n    \u002F\u002F Optional: user feedback widget\n    \u002F\u002F Sentry.feedbackIntegration({ colorScheme: \"system\" }),\n  ],\n});\n\n\u002F\u002F Hook into App Router navigation transitions (App Router only)\nexport const onRouterTransitionStart = Sentry.captureRouterTransitionStart;\n```\n\n#### Create `sentry.server.config.ts` — Node.js Server Runtime\n\n```\nimport * as Sentry from \"@sentry\u002Fnextjs\";\n\nSentry.init({\n  dsn: process.env.SENTRY_DSN ?? \"___DSN___\",\n\n  sendDefaultPii: true,\n  tracesSampleRate: process.env.NODE_ENV === \"development\" ? 1.0 : 0.1,\n\n  \u002F\u002F Attach local variable values to stack frames\n  includeLocalVariables: true,\n\n  enableLogs: true,\n});\n```\n\n#### Create `sentry.edge.config.ts` — Edge Runtime\n\n```\nimport * as Sentry from \"@sentry\u002Fnextjs\";\n\nSentry.init({\n  dsn: process.env.SENTRY_DSN ?? \"___DSN___\",\n\n  sendDefaultPii: true,\n  tracesSampleRate: process.env.NODE_ENV === \"development\" ? 1.0 : 0.1,\n\n  enableLogs: true,\n});\n```\n\n#### Create `instrumentation.ts` — Server-Side Registration Hook\n\n> Requires `experimental.instrumentationHook: true` in `next.config` for Next.js \u003C 14.0.4. It's stable in 14.0.4+.\n\n```\nimport * as Sentry from \"@sentry\u002Fnextjs\";\n\nexport async function register() {\n  if (process.env.NEXT_RUNTIME === \"nodejs\") {\n    await import(\".\u002Fsentry.server.config\");\n  }\n\n  if (process.env.NEXT_RUNTIME === \"edge\") {\n    await import(\".\u002Fsentry.edge.config\");\n  }\n}\n\n\u002F\u002F Automatically captures all unhandled server-side request errors\n\u002F\u002F Requires @sentry\u002Fnextjs >= 8.28.0\nexport const onRequestError = Sentry.captureRequestError;\n```\n\n**Runtime dispatch:**\n\n| `NEXT_RUNTIME` | Config file loaded |\n| --- | --- |\n| `\"nodejs\"` | `sentry.server.config.ts` |\n| `\"edge\"` | `sentry.edge.config.ts` |\n| *(client bundle)* | `instrumentation-client.ts` (Next.js handles this directly) |\n\n#### App Router: Create `app\u002Fglobal-error.tsx`\n\nThis catches errors in the root layout and React render errors:\n\n```\n\"use client\";\n\nimport * as Sentry from \"@sentry\u002Fnextjs\";\nimport NextError from \"next\u002Ferror\";\nimport { useEffect } from \"react\";\n\nexport default function GlobalError({\n  error,\n}: {\n  error: Error & { digest?: string };\n}) {\n  useEffect(() => {\n    Sentry.captureException(error);\n  }, [error]);\n\n  return (\n    \u003Chtml>\n      \u003Cbody>\n        \u003CNextError statusCode={0} \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n```\n\n#### Pages Router: Update `pages\u002F_error.tsx`\n\n```\nimport * as Sentry from \"@sentry\u002Fnextjs\";\nimport type { NextPageContext } from \"next\";\nimport NextErrorComponent from \"next\u002Ferror\";\n\ntype ErrorProps = { statusCode: number };\n\nexport default function CustomError({ statusCode }: ErrorProps) {\n  return \u003CNextErrorComponent statusCode={statusCode} \u002F>;\n}\n\nCustomError.getInitialProps = async (ctx: NextPageContext) => {\n  await Sentry.captureUnderscoreErrorException(ctx);\n  return NextErrorComponent.getInitialProps(ctx);\n};\n```\n\n#### Wrap `next.config.ts` with `withSentryConfig()`\n\n```\nimport type { NextConfig } from \"next\";\nimport { withSentryConfig } from \"@sentry\u002Fnextjs\";\n\nconst nextConfig: NextConfig = {\n  \u002F\u002F your existing Next.js config\n};\n\nexport default withSentryConfig(nextConfig, {\n  org: \"___ORG_SLUG___\",\n  project: \"___PROJECT_SLUG___\",\n\n  \u002F\u002F Source map upload auth token (see Source Maps section below)\n  authToken: process.env.SENTRY_AUTH_TOKEN,\n\n  \u002F\u002F Upload wider set of client source files for better stack trace resolution\n  widenClientFileUpload: true,\n\n  \u002F\u002F Create a proxy API route to bypass ad-blockers\n  tunnelRoute: \"\u002Fmonitoring\",\n\n  \u002F\u002F Suppress non-CI output\n  silent: !process.env.CI,\n});\n```\n\n#### Exclude Tunnel Route from Middleware\n\nIf you have `middleware.ts`, exclude the tunnel path from auth or redirect logic:\n\n```\n\u002F\u002F middleware.ts\nexport const config = {\n  matcher: [\n    \u002F\u002F Exclude monitoring route, Next.js internals, and static files\n    \"\u002F((?!monitoring|_next\u002Fstatic|_next\u002Fimage|favicon.ico).*)\",\n  ],\n};\n```\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n### Source Maps Setup\n\nSource maps make production stack traces readable — without them, you see minified code. This is non-negotiable for production apps.\n\n**Step 1: Generate a Sentry auth token**\n\nGo to sentry.io\u002Fsettings\u002Fauth-tokens\u002F and create a token with `project:releases` and `org:read` scopes.\n\n**Step 2: Set environment variables**\n\n```\n# .env.sentry-build-plugin  (gitignore this file)\nSENTRY_AUTH_TOKEN=sntrys_eyJ...\n```\n\nOr set in CI secrets:\n\n```\nSENTRY_AUTH_TOKEN=sntrys_eyJ...\nSENTRY_ORG=my-org        # optional if set in next.config\nSENTRY_PROJECT=my-project # optional if set in next.config\n```\n\n**Step 3: Add to `.gitignore`**\n\n```\n.env.sentry-build-plugin\n```\n\n**Step 4: Verify `authToken` is wired in `next.config.ts`**\n\n```\nwithSentryConfig(nextConfig, {\n  org: \"my-org\",\n  project: \"my-project\",\n  authToken: process.env.SENTRY_AUTH_TOKEN, \u002F\u002F reads from .env.sentry-build-plugin or CI env\n  widenClientFileUpload: true,\n});\n```\n\nSource maps are uploaded automatically on every `next build`.\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n### For Each Agreed Feature\n\nLoad the corresponding reference file and follow its steps:\n\n| Feature | Reference file | Load when... |\n| --- | --- | --- |\n| Error Monitoring | `references\u002Ferror-monitoring.md` | Always (baseline) — App Router error boundaries, Pages Router `_error.tsx`, server action wrapping |\n| Tracing | `references\u002Ftracing.md` | Server-side request tracing, client navigation, distributed tracing, `tracePropagationTargets` |\n| Session Replay | `references\u002Fsession-replay.md` | User-facing app; privacy masking, canvas recording, network capture |\n| Logging | `references\u002Flogging.md` | Structured logs, `Sentry.logger.*`, log-to-trace correlation |\n| Profiling | `references\u002Fprofiling.md` | Continuous profiling, `Document-Policy` header, `nodeProfilingIntegration` |\n| AI Monitoring | `references\u002Fai-monitoring.md` | App uses OpenAI, Vercel AI SDK, or Anthropic |\n| Crons | `references\u002Fcrons.md` | Vercel Cron, scheduled API routes, `node-cron` |\n| Metrics | `references\u002Fmetrics.md` | Custom counters, gauges, distributions via `Sentry.metrics.*` |\n\nFor each feature: read the reference file, follow its steps exactly, and verify before moving on.\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Verification\n\nAfter wizard or manual setup, verify Sentry is working:\n\n```\n\u002F\u002F Add temporarily to a server action or API route, then remove\nimport * as Sentry from \"@sentry\u002Fnextjs\";\n\nthrow new Error(\"Sentry test error — delete me\");\n\u002F\u002F or\nSentry.captureException(new Error(\"Sentry test error — delete me\"));\n```\n\nThen check your Sentry Issues dashboard — the error should appear within ~30 seconds.\n\n**Verification checklist:**\n\n| Check | How |\n| --- | --- |\n| Client errors captured | Throw in a client component, verify in Sentry |\n| Server errors captured | Throw in a server action or API route |\n| Edge errors captured | Throw in middleware or edge route handler |\n| Source maps working | Check stack trace shows readable file names |\n| Session Replay working | Check Replays tab in Sentry dashboard |\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Config Reference\n\n### `Sentry.init()` Options\n\n| Option | Type | Default | Notes |\n| --- | --- | --- | --- |\n| `dsn` | `string` | — | Required. Use `NEXT_PUBLIC_SENTRY_DSN` for client, `SENTRY_DSN` for server |\n| `tracesSampleRate` | `number` | — | 0–1; 1.0 in dev, 0.1 in prod recommended |\n| `replaysSessionSampleRate` | `number` | `0.1` | Fraction of all sessions recorded |\n| `replaysOnErrorSampleRate` | `number` | `1.0` | Fraction of error sessions recorded |\n| `sendDefaultPii` | `boolean` | `false` | Include IP, request headers in events |\n| `includeLocalVariables` | `boolean` | `false` | Attach local variable values to stack frames (server only) |\n| `enableLogs` | `boolean` | `false` | Enable Sentry Logs product |\n| `environment` | `string` | auto | `\"production\"`, `\"staging\"`, etc. |\n| `release` | `string` | auto | Set to commit SHA or version tag |\n| `debug` | `boolean` | `false` | Log SDK activity to console |\n\n### `withSentryConfig()` Options\n\n| Option | Type | Notes |\n| --- | --- | --- |\n| `org` | `string` | Sentry organization slug |\n| `project` | `string` | Sentry project slug |\n| `authToken` | `string` | Source map upload token (`SENTRY_AUTH_TOKEN`) |\n| `widenClientFileUpload` | `boolean` | Upload more client files for better stack traces |\n| `tunnelRoute` | `string` | API route path for ad-blocker bypass (e.g. `\"\u002Fmonitoring\"`) |\n| `silent` | `boolean` | Suppress build output (`!process.env.CI` recommended) |\n| `webpack.treeshake.*` | `object` | Tree-shake SDK features (webpack only, not Turbopack) |\n\n### Environment Variables\n\n| Variable | Runtime | Purpose |\n| --- | --- | --- |\n| `NEXT_PUBLIC_SENTRY_DSN` | Client | DSN for browser Sentry init (public) |\n| `SENTRY_DSN` | Server \u002F Edge | DSN for server\u002Fedge Sentry init |\n| `SENTRY_AUTH_TOKEN` | Build | Source map upload auth token (secret) |\n| `SENTRY_ORG` | Build | Org slug (alternative to `org` in config) |\n| `SENTRY_PROJECT` | Build | Project slug (alternative to `project` in config) |\n| `SENTRY_RELEASE` | Server | Release version string (auto-detected from git) |\n| `NEXT_RUNTIME` | Server \u002F Edge | `\"nodejs\"` or `\"edge\"` (set by Next.js internally) |\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Phase 4: Cross-Link\n\nAfter completing Next.js setup, check for companion services:\n\n```\n# Check for backend services in adjacent directories\nls ..\u002Fbackend ..\u002Fserver ..\u002Fapi ..\u002Fservices 2>\u002Fdev\u002Fnull\n\n# Check for backend language indicators\ncat ..\u002Fgo.mod 2>\u002Fdev\u002Fnull | head -3\ncat ..\u002Frequirements.txt ..\u002Fpyproject.toml 2>\u002Fdev\u002Fnull | head -3\ncat ..\u002FGemfile 2>\u002Fdev\u002Fnull | head -3\ncat ..\u002Fpom.xml ..\u002Fbuild.gradle 2>\u002Fdev\u002Fnull | head -3\n```\n\nIf a backend is found, suggest the matching SDK skill:\n\n| Backend detected | Suggest skill |\n| --- | --- |\n| Go (`go.mod`) | `sentry-go-sdk` |\n| Python (`requirements.txt`, `pyproject.toml`) | `sentry-python-sdk` |\n| Ruby (`Gemfile`) | `sentry-ruby-sdk` |\n| Java\u002FKotlin (`pom.xml`, `build.gradle`) | See docs.sentry.io\u002Fplatforms\u002Fjava\u002F |\n| Node.js (Express, Fastify, Hapi) | `@sentry\u002Fnode` — see docs.sentry.io\u002Fplatforms\u002Fjavascript\u002Fguides\u002Fexpress\u002F |\n\nConnecting frontend and backend with the same DSN or linked projects enables **distributed tracing** — stack traces that span your browser, Next.js server, and backend API in a single trace view.\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Troubleshooting\n\n| Issue | Cause | Solution |\n| --- | --- | --- |\n| Events not appearing | DSN misconfigured or `debug: false` hiding errors | Set `debug: true` temporarily; check browser network tab for requests to `sentry.io` |\n| Stack traces show minified code | Source maps not uploading | Check `SENTRY_AUTH_TOKEN` is set; run `next build` and look for \"Source Maps\" in build output |\n| `onRequestError` not firing | SDK version \u003C 8.28.0 | Upgrade: `npm install @sentry\u002Fnextjs@latest` |\n| Edge runtime errors missing | `sentry.edge.config.ts` not loaded | Verify `instrumentation.ts` imports it when `NEXT_RUNTIME === \"edge\"` |\n| Tunnel route returns 404 | `tunnelRoute` set but Next.js route missing | The plugin creates it automatically; check you ran `next build` after adding `tunnelRoute` |\n| `withSentryConfig` tree-shaking breaks build | Turbopack in use | Tree-shaking options only work with webpack; remove `webpack.treeshake` options when using Turbopack |\n| `global-error.tsx` not catching errors | Missing `\"use client\"` directive | Add `\"use client\"` as the very first line of `global-error.tsx` |\n| Session Replay not recording | `replayIntegration()` missing from client init | Add `Sentry.replayIntegration()` to `integrations` in `instrumentation-client.ts` |\n\n","description: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## SKILL.md\n\n> All Skills > SDK Setup > Next.js SDK\n\n# Sentry Next.js SDK\n\nOpinionated wizard that scans your Next.js project and guides you through complete Sentry setup across all three runtimes: browser, Node.js server, and Edge.\n\n## Invoke This Skill When\n\n- User asks to \"add Sentry to Next.js\" or \"set up Sentry\" in a Next.js app\n- User wants to install or configure `@sentry\u002Fnextjs`\n- User wants error monitoring, tracing, session replay, logging, or profiling for Next.js\n- User asks about `instrumentation.ts`, `withSentryConfig()`, or `global-error.tsx`\n- User wants to capture server actions, server component errors, or edge runtime errors\n\n> **Note:** SDK versions and APIs below reflect current Sentry docs at time of writing (`@sentry\u002Fnextjs` ≥8.28.0).\n> Always verify against docs.sentry.io\u002Fplatforms\u002Fjavascript\u002Fguides\u002Fnextjs\u002F before implementing.\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Phase 1: Detect\n\nRun these commands to understand the project before making any recommendations:\n\n```\n# Detect Next.js version and existing Sentry\ncat package.json | grep -E '\"next\"|\"@sentry\u002F'\n\n# Detect router type (App Router vs Pages Router)\nls src\u002Fapp app src\u002Fpages pages 2>\u002Fdev\u002Fnull\n\n# Check for existing Sentry config files\nls instrumentation.ts instrumentation-client.ts sentry.server.config.ts sentry.edge.config.ts 2>\u002Fdev\u002Fnull\nls src\u002Finstrumentation.ts src\u002Finstrumentation-client.ts 2>\u002Fdev\u002Fnull\n\n# Check next.config\nls next.config.ts next.config.js next.config.mjs 2>\u002Fdev\u002Fnull\n\n# Check for existing error boundaries\nfind . -name \"global-error.tsx\" -o -name \"_error.tsx\" 2>\u002Fdev\u002Fnull | grep -v node_modules\n\n# Check build tool\ncat package.json | grep -E '\"turbopack\"|\"webpack\"'\n\n# Check for logging libraries\ncat package.json | grep -E '\"pino\"|\"winston\"|\"bunyan\"'\n\n# Check for companion backend\nls ..\u002Fbackend ..\u002Fserver ..\u002Fapi 2>\u002Fdev\u002Fnull\ncat ..\u002Fgo.mod ..\u002Frequirements.txt ..\u002FGemfile 2>\u002Fdev\u002Fnull | head -3\n```\n\n**What to determine:**\n\n| Question | Impact |\n| --- | --- |\n| Next.js version? | 13+ required; 15+ needed for Turbopack support |\n| App Router or Pages Router? | Determines error boundary files needed (`global-error.tsx` vs `_error.tsx`) |\n| `@sentry\u002Fnextjs` already present? | Skip install, go to feature config |\n| Existing `instrumentation.ts`? | Merge Sentry into it rather than replace |\n| Turbopack in use? | Tree-shaking in `withSentryConfig` is webpack-only |\n| Logging library detected? | Recommend Sentry Logs integration |\n| Backend directory found? | Trigger Phase 4 cross-link suggestion |\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Phase 2: Recommend\n\nPresent a concrete recommendation based on what you found. Don't ask open-ended questions — lead with a proposal:\n\n**Recommended (core coverage):**\n\n- ✅ **Error Monitoring** — always; captures server errors, client errors, server actions, and unhandled promise rejections\n- ✅ **Tracing** — server-side request tracing + client-side navigation spans across all runtimes\n- ✅ **Session Replay** — recommended for user-facing apps; records sessions around errors\n\n**Optional (enhanced observability):**\n\n- ⚡ **Logging** — structured logs via `Sentry.logger.*`; recommend when `pino`\u002F`winston` or log search is needed\n- ⚡ **Profiling** — continuous profiling; requires `Document-Policy: js-profiling` header\n- ⚡ **AI Monitoring** — OpenAI, Vercel AI SDK, Anthropic; recommend when AI\u002FLLM calls detected\n- ⚡ **Crons** — detect missed\u002Ffailed scheduled jobs; recommend when cron patterns detected\n- ⚡ **Metrics** — custom metrics via `Sentry.metrics.*`; recommend when custom KPIs or business metrics needed\n\n**Recommendation logic:**\n\n| Feature | Recommend when... |\n| --- | --- |\n| Error Monitoring | **Always** — non-negotiable baseline |\n| Tracing | **Always for Next.js** — server route tracing + client navigation are high-value |\n| Session Replay | User-facing app, login flows, or checkout pages |\n| Logging | App uses structured logging or needs log-to-trace correlation |\n| Profiling | Performance-critical app; client sets `Document-Policy: js-profiling` |\n| AI Monitoring | App makes OpenAI, Vercel AI SDK, or Anthropic calls |\n| Crons | App has Vercel Cron jobs, scheduled API routes, or `node-cron` usage |\n| Metrics | App needs custom counters, gauges, or histograms via `Sentry.metrics.*` |\n\nPropose: *\"I recommend setting up Error Monitoring + Tracing + Session Replay. Want me to also add Logging or Profiling?\"*\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Phase 3: Guide\n\n### Option 1: Wizard (Recommended)\n\n> **You need to run this yourself** — the wizard opens a browser for login and requires interactive input that the agent can't handle. Copy-paste into your terminal:\n>\n> ```\n> npx @sentry\u002Fwizard@latest -i nextjs\n> ```\n>\n> It handles login, org\u002Fproject selection, SDK installation, config files (`instrumentation-client.ts`, `sentry.server.config.ts`, `sentry.edge.config.ts`, `instrumentation.ts`), `next.config.ts` wrapping, source map upload, and adds a `\u002Fsentry-example-page`.\n>\n> **Once it finishes, come back and skip to Verification.**\n\nIf the user skips the wizard, proceed with Option 2 (Manual Setup) below.\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n### Option 2: Manual Setup\n\n#### Install\n\n```\nnpm install @sentry\u002Fnextjs --save\n```\n\n#### Create `instrumentation-client.ts` — Browser \u002F Client Runtime\n\n> Older docs used `sentry.client.config.ts` — the current pattern is `instrumentation-client.ts`.\n\n```\nimport * as Sentry from \"@sentry\u002Fnextjs\";\n\nSentry.init({\n  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN ?? \"___PUBLIC_DSN___\",\n\n  sendDefaultPii: true,\n\n  \u002F\u002F 100% in dev, 10% in production\n  tracesSampleRate: process.env.NODE_ENV === \"development\" ? 1.0 : 0.1,\n\n  \u002F\u002F Session Replay: 10% of all sessions, 100% of sessions with errors\n  replaysSessionSampleRate: 0.1,\n  replaysOnErrorSampleRate: 1.0,\n\n  enableLogs: true,\n\n  integrations: [\n    Sentry.replayIntegration(),\n    \u002F\u002F Optional: user feedback widget\n    \u002F\u002F Sentry.feedbackIntegration({ colorScheme: \"system\" }),\n  ],\n});\n\n\u002F\u002F Hook into App Router navigation transitions (App Router only)\nexport const onRouterTransitionStart = Sentry.captureRouterTransitionStart;\n```\n\n#### Create `sentry.server.config.ts` — Node.js Server Runtime\n\n```\nimport * as Sentry from \"@sentry\u002Fnextjs\";\n\nSentry.init({\n  dsn: process.env.SENTRY_DSN ?? \"___DSN___\",\n\n  sendDefaultPii: true,\n  tracesSampleRate: process.env.NODE_ENV === \"development\" ? 1.0 : 0.1,\n\n  \u002F\u002F Attach local variable values to stack frames\n  includeLocalVariables: true,\n\n  enableLogs: true,\n});\n```\n\n#### Create `sentry.edge.config.ts` — Edge Runtime\n\n```\nimport * as Sentry from \"@sentry\u002Fnextjs\";\n\nSentry.init({\n  dsn: process.env.SENTRY_DSN ?? \"___DSN___\",\n\n  sendDefaultPii: true,\n  tracesSampleRate: process.env.NODE_ENV === \"development\" ? 1.0 : 0.1,\n\n  enableLogs: true,\n});\n```\n\n#### Create `instrumentation.ts` — Server-Side Registration Hook\n\n> Requires `experimental.instrumentationHook: true` in `next.config` for Next.js \u003C 14.0.4. It's stable in 14.0.4+.\n\n```\nimport * as Sentry from \"@sentry\u002Fnextjs\";\n\nexport async function register() {\n  if (process.env.NEXT_RUNTIME === \"nodejs\") {\n    await import(\".\u002Fsentry.server.config\");\n  }\n\n  if (process.env.NEXT_RUNTIME === \"edge\") {\n    await import(\".\u002Fsentry.edge.config\");\n  }\n}\n\n\u002F\u002F Automatically captures all unhandled server-side request errors\n\u002F\u002F Requires @sentry\u002Fnextjs >= 8.28.0\nexport const onRequestError = Sentry.captureRequestError;\n```\n\n**Runtime dispatch:**\n\n| `NEXT_RUNTIME` | Config file loaded |\n| --- | --- |\n| `\"nodejs\"` | `sentry.server.config.ts` |\n| `\"edge\"` | `sentry.edge.config.ts` |\n| *(client bundle)* | `instrumentation-client.ts` (Next.js handles this directly) |\n\n#### App Router: Create `app\u002Fglobal-error.tsx`\n\nThis catches errors in the root layout and React render errors:\n\n```\n\"use client\";\n\nimport * as Sentry from \"@sentry\u002Fnextjs\";\nimport NextError from \"next\u002Ferror\";\nimport { useEffect } from \"react\";\n\nexport default function GlobalError({\n  error,\n}: {\n  error: Error & { digest?: string };\n}) {\n  useEffect(() => {\n    Sentry.captureException(error);\n  }, [error]);\n\n  return (\n    \u003Chtml>\n      \u003Cbody>\n        \u003CNextError statusCode={0} \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n```\n\n#### Pages Router: Update `pages\u002F_error.tsx`\n\n```\nimport * as Sentry from \"@sentry\u002Fnextjs\";\nimport type { NextPageContext } from \"next\";\nimport NextErrorComponent from \"next\u002Ferror\";\n\ntype ErrorProps = { statusCode: number };\n\nexport default function CustomError({ statusCode }: ErrorProps) {\n  return \u003CNextErrorComponent statusCode={statusCode} \u002F>;\n}\n\nCustomError.getInitialProps = async (ctx: NextPageContext) => {\n  await Sentry.captureUnderscoreErrorException(ctx);\n  return NextErrorComponent.getInitialProps(ctx);\n};\n```\n\n#### Wrap `next.config.ts` with `withSentryConfig()`\n\n```\nimport type { NextConfig } from \"next\";\nimport { withSentryConfig } from \"@sentry\u002Fnextjs\";\n\nconst nextConfig: NextConfig = {\n  \u002F\u002F your existing Next.js config\n};\n\nexport default withSentryConfig(nextConfig, {\n  org: \"___ORG_SLUG___\",\n  project: \"___PROJECT_SLUG___\",\n\n  \u002F\u002F Source map upload auth token (see Source Maps section below)\n  authToken: process.env.SENTRY_AUTH_TOKEN,\n\n  \u002F\u002F Upload wider set of client source files for better stack trace resolution\n  widenClientFileUpload: true,\n\n  \u002F\u002F Create a proxy API route to bypass ad-blockers\n  tunnelRoute: \"\u002Fmonitoring\",\n\n  \u002F\u002F Suppress non-CI output\n  silent: !process.env.CI,\n});\n```\n\n#### Exclude Tunnel Route from Middleware\n\nIf you have `middleware.ts`, exclude the tunnel path from auth or redirect logic:\n\n```\n\u002F\u002F middleware.ts\nexport const config = {\n  matcher: [\n    \u002F\u002F Exclude monitoring route, Next.js internals, and static files\n    \"\u002F((?!monitoring|_next\u002Fstatic|_next\u002Fimage|favicon.ico).*)\",\n  ],\n};\n```\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n### Source Maps Setup\n\nSource maps make production stack traces readable — without them, you see minified code. This is non-negotiable for production apps.\n\n**Step 1: Generate a Sentry auth token**\n\nGo to sentry.io\u002Fsettings\u002Fauth-tokens\u002F and create a token with `project:releases` and `org:read` scopes.\n\n**Step 2: Set environment variables**\n\n```\n# .env.sentry-build-plugin  (gitignore this file)\nSENTRY_AUTH_TOKEN=sntrys_eyJ...\n```\n\nOr set in CI secrets:\n\n```\nSENTRY_AUTH_TOKEN=sntrys_eyJ...\nSENTRY_ORG=my-org        # optional if set in next.config\nSENTRY_PROJECT=my-project # optional if set in next.config\n```\n\n**Step 3: Add to `.gitignore`**\n\n```\n.env.sentry-build-plugin\n```\n\n**Step 4: Verify `authToken` is wired in `next.config.ts`**\n\n```\nwithSentryConfig(nextConfig, {\n  org: \"my-org\",\n  project: \"my-project\",\n  authToken: process.env.SENTRY_AUTH_TOKEN, \u002F\u002F reads from .env.sentry-build-plugin or CI env\n  widenClientFileUpload: true,\n});\n```\n\nSource maps are uploaded automatically on every `next build`.\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n### For Each Agreed Feature\n\nLoad the corresponding reference file and follow its steps:\n\n| Feature | Reference file | Load when... |\n| --- | --- | --- |\n| Error Monitoring | `references\u002Ferror-monitoring.md` | Always (baseline) — App Router error boundaries, Pages Router `_error.tsx`, server action wrapping |\n| Tracing | `references\u002Ftracing.md` | Server-side request tracing, client navigation, distributed tracing, `tracePropagationTargets` |\n| Session Replay | `references\u002Fsession-replay.md` | User-facing app; privacy masking, canvas recording, network capture |\n| Logging | `references\u002Flogging.md` | Structured logs, `Sentry.logger.*`, log-to-trace correlation |\n| Profiling | `references\u002Fprofiling.md` | Continuous profiling, `Document-Policy` header, `nodeProfilingIntegration` |\n| AI Monitoring | `references\u002Fai-monitoring.md` | App uses OpenAI, Vercel AI SDK, or Anthropic |\n| Crons | `references\u002Fcrons.md` | Vercel Cron, scheduled API routes, `node-cron` |\n| Metrics | `references\u002Fmetrics.md` | Custom counters, gauges, distributions via `Sentry.metrics.*` |\n\nFor each feature: read the reference file, follow its steps exactly, and verify before moving on.\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Verification\n\nAfter wizard or manual setup, verify Sentry is working:\n\n```\n\u002F\u002F Add temporarily to a server action or API route, then remove\nimport * as Sentry from \"@sentry\u002Fnextjs\";\n\nthrow new Error(\"Sentry test error — delete me\");\n\u002F\u002F or\nSentry.captureException(new Error(\"Sentry test error — delete me\"));\n```\n\nThen check your Sentry Issues dashboard — the error should appear within ~30 seconds.\n\n**Verification checklist:**\n\n| Check | How |\n| --- | --- |\n| Client errors captured | Throw in a client component, verify in Sentry |\n| Server errors captured | Throw in a server action or API route |\n| Edge errors captured | Throw in middleware or edge route handler |\n| Source maps working | Check stack trace shows readable file names |\n| Session Replay working | Check Replays tab in Sentry dashboard |\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Config Reference\n\n### `Sentry.init()` Options\n\n| Option | Type | Default | Notes |\n| --- | --- | --- | --- |\n| `dsn` | `string` | — | Required. Use `NEXT_PUBLIC_SENTRY_DSN` for client, `SENTRY_DSN` for server |\n| `tracesSampleRate` | `number` | — | 0–1; 1.0 in dev, 0.1 in prod recommended |\n| `replaysSessionSampleRate` | `number` | `0.1` | Fraction of all sessions recorded |\n| `replaysOnErrorSampleRate` | `number` | `1.0` | Fraction of error sessions recorded |\n| `sendDefaultPii` | `boolean` | `false` | Include IP, request headers in events |\n| `includeLocalVariables` | `boolean` | `false` | Attach local variable values to stack frames (server only) |\n| `enableLogs` | `boolean` | `false` | Enable Sentry Logs product |\n| `environment` | `string` | auto | `\"production\"`, `\"staging\"`, etc. |\n| `release` | `string` | auto | Set to commit SHA or version tag |\n| `debug` | `boolean` | `false` | Log SDK activity to console |\n\n### `withSentryConfig()` Options\n\n| Option | Type | Notes |\n| --- | --- | --- |\n| `org` | `string` | Sentry organization slug |\n| `project` | `string` | Sentry project slug |\n| `authToken` | `string` | Source map upload token (`SENTRY_AUTH_TOKEN`) |\n| `widenClientFileUpload` | `boolean` | Upload more client files for better stack traces |\n| `tunnelRoute` | `string` | API route path for ad-blocker bypass (e.g. `\"\u002Fmonitoring\"`) |\n| `silent` | `boolean` | Suppress build output (`!process.env.CI` recommended) |\n| `webpack.treeshake.*` | `object` | Tree-shake SDK features (webpack only, not Turbopack) |\n\n### Environment Variables\n\n| Variable | Runtime | Purpose |\n| --- | --- | --- |\n| `NEXT_PUBLIC_SENTRY_DSN` | Client | DSN for browser Sentry init (public) |\n| `SENTRY_DSN` | Server \u002F Edge | DSN for server\u002Fedge Sentry init |\n| `SENTRY_AUTH_TOKEN` | Build | Source map upload auth token (secret) |\n| `SENTRY_ORG` | Build | Org slug (alternative to `org` in config) |\n| `SENTRY_PROJECT` | Build | Project slug (alternative to `project` in config) |\n| `SENTRY_RELEASE` | Server | Release version string (auto-detected from git) |\n| `NEXT_RUNTIME` | Server \u002F Edge | `\"nodejs\"` or `\"edge\"` (set by Next.js internally) |\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Phase 4: Cross-Link\n\nAfter completing Next.js setup, check for companion services:\n\n```\n# Check for backend services in adjacent directories\nls ..\u002Fbackend ..\u002Fserver ..\u002Fapi ..\u002Fservices 2>\u002Fdev\u002Fnull\n\n# Check for backend language indicators\ncat ..\u002Fgo.mod 2>\u002Fdev\u002Fnull | head -3\ncat ..\u002Frequirements.txt ..\u002Fpyproject.toml 2>\u002Fdev\u002Fnull | head -3\ncat ..\u002FGemfile 2>\u002Fdev\u002Fnull | head -3\ncat ..\u002Fpom.xml ..\u002Fbuild.gradle 2>\u002Fdev\u002Fnull | head -3\n```\n\nIf a backend is found, suggest the matching SDK skill:\n\n| Backend detected | Suggest skill |\n| --- | --- |\n| Go (`go.mod`) | `sentry-go-sdk` |\n| Python (`requirements.txt`, `pyproject.toml`) | `sentry-python-sdk` |\n| Ruby (`Gemfile`) | `sentry-ruby-sdk` |\n| Java\u002FKotlin (`pom.xml`, `build.gradle`) | See docs.sentry.io\u002Fplatforms\u002Fjava\u002F |\n| Node.js (Express, Fastify, Hapi) | `@sentry\u002Fnode` — see docs.sentry.io\u002Fplatforms\u002Fjavascript\u002Fguides\u002Fexpress\u002F |\n\nConnecting frontend and backend with the same DSN or linked projects enables **distributed tracing** — stack traces that span your browser, Next.js server, and backend API in a single trace view.\n\n---\ndescription: Integrates Sentry for error tracking, performance monitoring, and alerting in Next.js.\n\n## Troubleshooting\n\n| Issue | Cause | Solution |\n| --- | --- | --- |\n| Events not appearing | DSN misconfigured or `debug: false` hiding errors | Set `debug: true` temporarily; check browser network tab for requests to `sentry.io` |\n| Stack traces show minified code | Source maps not uploading | Check `SENTRY_AUTH_TOKEN` is set; run `next build` and look for \"Source Maps\" in build output |\n| `onRequestError` not firing | SDK version \u003C 8.28.0 | Upgrade: `npm install @sentry\u002Fnextjs@latest` |\n| Edge runtime errors missing | `sentry.edge.config.ts` not loaded | Verify `instrumentation.ts` imports it when `NEXT_RUNTIME === \"edge\"` |\n| Tunnel route returns 404 | `tunnelRoute` set but Next.js route missing | The plugin creates it automatically; check you ran `next build` after adding `tunnelRoute` |\n| `withSentryConfig` tree-shaking breaks build | Turbopack in use | Tree-shaking options only work with webpack; remove `webpack.treeshake` options when using Turbopack |\n| `global-error.tsx` not catching errors | Missing `\"use client\"` directive | Add `\"use client\"` as the very first line of `global-error.tsx` |\n| Session Replay not recording | `replayIntegration()` missing from client init | Add `Sentry.replayIntegration()` to `integrations` in `instrumentation-client.ts` |\n\n",{"github":43,"source":44,"install":45,"installs":6,"scraped_at":46,"description":7,"allowed-tools":47},"https:\u002F\u002Fgithub.com\u002Fgetsentry\u002Fsentry-for-ai","https:\u002F\u002Fskills.sh\u002Fgetsentry\u002Fsentry-for-ai\u002Fsentry-nextjs-sdk","npx skills add getsentry\u002Fsentry-for-ai --skill sentry-nextjs-sdk",1775315365000,[48,49],"read_file","list_files","main","a6e00c7fdd57f28e26658814f41ae0da22979aac",".agents\u002Fskills\u002Fsentry-for-ai\u002Fsentry-nextjs-sdk",0,"https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Ffullstack-council","https:\u002F\u002Fgithub.com\u002FJackSmack1971","2026-04-05 23:04:47",{"source":8,"skillName":5,"commands":58,"prompt":67,"zipAvailable":68},[59,61,64],{"tool":28,"command":60},"npx skills add JackSmack1971\u002Ffullstack-council --skill sentry-nextjs-sdk",{"tool":62,"command":63},"bunx","bunx skills add JackSmack1971\u002Ffullstack-council --skill sentry-nextjs-sdk",{"tool":65,"command":66},"pnpm","pnpm dlx skills add JackSmack1971\u002Ffullstack-council --skill sentry-nextjs-sdk","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Ffullstack-council\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fsentry-for-ai\u002Fsentry-nextjs-sdk\u002FSKILL.md",true,[],[71,100,117,132,154,173],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":82,"publishedAt":38},"01M6KS7VQCYXBYGK8YGJWP4WV3","wes-bos-fullstack-educator","Activates a Wes Bos-style hands-on full-stack JavaScript educator persona that ships production-ready code with live-workshop energy. Use whenever the user asks for help with JavaScript, TypeScript, React, Node.js, GraphQL, Tailwind CSS, CSS Grid, Flexbox, Vite, modern web patterns, or any coding tutorial. Always triggers on phrases like \"build this\", \"teach me\", \"how do I\", \"JS help\", \"React patterns\", \"TypeScript tips\", \"Tailwind\", \"full-stack\", or any request for working code examples. Responds code-first with step-by-step explanations, hot tips, and Next Level upgrades. Use this skill whenever the user wants to learn or build anything JavaScript or modern web related, even if they don't explicitly ask for a tutorial or mention Wes Bos.","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Ffullstack-council\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwes-bos-fullstack-educator\u002FSKILL.md",[77],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[83,84,85,86,87,88,89,90,91,92,93,94,31,95,30,96,27,97,98,99],"fullstack","wes bos fullstack educator","css","react","learn","code","Tailwind","how","persona","stack","node","ask","ready","me","production-ready","request","energy",{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"publishedAt":38},"01M6KS7PM7W2S1739EZS18T0HA","ai-sdk","Builds AI-powered applications using the Vercel AI SDK with streaming and tool use.","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Ffullstack-council\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fvercel\u002Fai-sdk\u002FSKILL.md",[],[18,107,23,108,109,110,37,36,111,112,31,22,113,114,30,115,28,26,116],"ai sdk","add vercel","streaming","tool use","applications","tool","use","vercel","vercel ai sdk","with",{"skillNo":118,"name":119,"nameZh":6,"description":120,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":121,"categories":122,"keywords":123,"publishedAt":38},"01M6KS7FYMD04AWFNNS149944S","next-best-practices","Enforces Next.js App Router best practices, performance, and deployment patterns.","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Ffullstack-council\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fvercel-labs\u002Fnext-best-practices\u002FSKILL.md",[],[124,125,27,23,33,108,126,36,32,31,22,114,127,30,128,28,129,130,131,26],"best practices","next best practices","deployment","router","best-practices","patterns","deployment patterns","app",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":138,"publishedAt":38},"01M6KS6Y6XXD42YM2T1GVHP3B0","troy-hunt-security","Activates the Troy Hunt persona for information security, threat modeling, and application hardening. Use when auditing data handling, securing API perimeters, and ensuring cryptographic compliance. Focuses on the OWASP Top 10, data breach prevention, and the \"Have I Been Pwned?\" principles.","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Ffullstack-council\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftroy-hunt-security\u002FSKILL.md",[],[139,140,141,23,142,21,143,144,91,113,145,146,147,148,149,150,151,152,24,153],"security","hunt","troy hunt security","owasp top 10","supabase","api","schema","only","get","principles","information","read-only","errors","top","breach",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":160,"publishedAt":38},"01M6KS6S94M1R78A6NBMYP3PE1","theo-browne-fullstack-advisor","Activates the Theo Browne persona — T3 Stack creator, ex-Twitch engineer, CEO of T3 Chat \u002F Ping.gg (YC W22), TypeScript absolutist, and opinionated full-stack advisor. Use this skill whenever the user asks about Next.js App Router, tRPC, Prisma, Zod, Tailwind, create-t3-app, T3 Stack architecture, end-to-end type safety, TypeScript tooling, rapid prototyping, DX critique, over-engineering problems, cargo-culting, full-stack TypeScript decisions, or wants direct hot-take feedback on tech choices and patterns. Also triggers on \"what would Theo think\", \"T3 style\", \"roast my stack\", or \"is this over-engineered\".","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Ffullstack-council\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftheo-browne-fullstack-advisor\u002FSKILL.md",[],[161,83,162,163,164,89,165,91,92,166,167,127,168,30,27,169,170,131,171,172],"advisor","theo browne fullstack advisor","architecture","create","critique","zod","command","engineer","prisma","end","prototyping","trpc",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":179,"publishedAt":38},"01M6KS6Q5B0G0RYC3XJG1F98KC","stripe-best-practices","TBD - Please provide a keyword-dense capability description.","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Ffullstack-council\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fstripe\u002Fstripe-best-practices\u002FSKILL.md",[],[124,180,181,36,31,22,30,182],"stripe best practices","stripe","please"]