Communitygithub.com

BIGboss248/nextjs-wordpress

在 Next.js App Router 应用中配置、测试和验证 OpenTelemetry (OTel) 可观测性。由 "/nextjs-otel"、"setup otel"、"configure opentelemetry"、"test otel" 或 "verify opentelemetry" 触发。

nextjs-wordpress 是什么?

该技能为 Next.js App Router 应用提供了一套模块化、生产就绪的 OpenTelemetry 跟踪配置工作流。它标准化了单个终止开关的使用,防止了由于 `@vercel/otel` 库将字符串 "false" 布尔化为 true 而导致的初始化错误,并自动执行跟踪验证。支持平台包括 Next.js(App Router)、pnpm/bun/npm 以及 OpenTelemetry。工作流程通过逐步操作手册进行:检查项目结构、安装核心遥测包、部署 `instrumentation.ts`(包含真值保护)、配置环境变量,以及使用模拟收集器进行验证。它还处理边缘情况,如 `@vercel/otel` 的字符串真值 bug,并强调遵守单一开关纪律和运行时边界。输出采用结构化 Markdown 报告,记录验证结果。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/BIGboss248/nextjs-wordpress/tree/HEAD/.agents/skills/nextjs-otel

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Next.js OpenTelemetry 可观测性技能 (nextjs-otel)

一个模块化、生产就绪的工作流,用于在 Next.js App Router 应用中配置、测试和验证 OpenTelemetry 跟踪,标准化单一终止开关,防止 @vercel/otel 初始化错误,并自动执行跟踪验证。


工作流概览

flowchart TD
    A["1. 项目评估<br/>(App Router & package.json)"] --> B["2. 安装依赖<br/>(@vercel/otel & @opentelemetry/api)"]
    B --> C["3. 部署 instrumentation.ts<br/>(registerOTel + onRequestError)"]
    C --> D["4. 配置环境<br/>(.env.example & .env.local)"]
    D --> E["5. 验证与测试<br/>(模拟收集器与终止开关)"]

逐步执行操作手册

按以下顺序依次执行,以配置和验证 OpenTelemetry 可观测性:

1. 项目发现与依赖检查

  • 检查项目结构:确认 package.json 中的 Next.js App Router 版本和包管理器 (pnpm、bun、npm)。
  • 定位检测根目录:检查项目是否使用根目录 instrumentation.ts 或 src/instrumentation.ts。
  • 审查架构标准:查阅 architectural-standards.md,了解单一终止开关纪律和运行时边界。

2. 安装依赖

  • 安装核心遥测包:
    pnpm add @vercel/otel @opentelemetry/api
    

3. 部署 instrumentation.ts

  • 创建检测文件:将 instrumentation.ts.template 部署到根目录或 src/ 目录。
  • 应用真值保护:确保 register() 在 process.env.OTEL_SDK_DISABLED 严格不等于 "true" 时删除该环境变量,以避免 @vercel/otel 的布尔值评估错误。
  • 接入错误跟踪:确保 onRequestError() 将 next.error.digest、路由路径和 HTTP 元数据捕获到活动跨度中。

4. 配置环境变量

  • 更新环境模板:使用 env.otel.template 将 OpenTelemetry 配置注入到 .env.example 和 .env.local。
  • 设置服务名称与协议:配置 OTEL_SERVICE_NAME、OTEL_EXPORTER_OTLP_ENDPOINT 和 OTEL_EXPORTER_OTLP_PROTOCOL=http/json。

5. 验证与测试

  • 启动模拟 OTLP 收集器:按照 verification-and-testing.md 在端口 4318 上启动测试收集器:
    node .agents/skills/nextjs-otel/scripts/mock_collector.js
    
  • 验证活动跟踪 (OTEL_SDK_DISABLED=false):触发测试请求 (curl http://localhost:3000/) 并验证 POST /v1/traces 批次返回 HTTP 200 OK。
  • 验证终止开关 (OTEL_SDK_DISABLED=true):确认 Next.js 服务器日志显示 [OTel] Instrumentation hook skipped 并导出 0 条跟踪。
  • 输出验证报告:生成 Markdown 格式摘要报告。

边界情况与已知 AI 陷阱

[!WARNING]

  • @vercel/otel 字符串真值错误:@vercel/otel 使用 !!process.env.OTEL_SDK_DISABLED 进行评估。在 JavaScript 中,Boolean("false") 结果为 true。如果没有在 process.env.OTEL_SDK_DISABLED 不为 'true' 时删除该变量,设置 OTEL_SDK_DISABLED=false 将静默禁用跟踪。
  • 辅助自定义标志:切勿引入 OTEL_ENABLED 与 OTEL_SDK_DISABLED 并存。严格统一使用 OTEL_SDK_DISABLED。
  • 运行时边界违规:切勿将 instrumentation.ts 或服务端 OpenTelemetry SDK 导入到客户端组件 ("use client") 中。
  • 链式命令:不要使用链式命令(&&、||、;)。所有设置和测试命令需单独执行。

输出摘要模式

完成 OpenTelemetry 设置或验证后,输出结构化报告:

# OpenTelemetry 验证报告

## 状态摘要

- **OTel 状态**:启用 / 禁用
- **服务名称**:<已配置的服务名称>
- **目标端点**:<已配置的端点>
- **导出协议**:http/json | http/protobuf

## 验证结果

| 检查项                     | 预期结果                     | 实际结果           | 状态 |
| :------------------------- | :------------------------- | :----------------- | :--- |
| 初始化钩子                 | 已注册                     | 已注册             | 通过 |
| 跟踪分派(启用)           | POST /v1/traces (200 OK)   | 接收 X 批次        | 通过 |
| 终止开关(禁用)           | 跳过,0 条跟踪             | 跳过,0 条跟踪     | 通过 |
| 类型检查                   | 0 个错误                   | 0 个错误           | 通过 |

参考指南与模板

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

BIGboss248/nextjs-wordpress

Create, configure, manage, and validate Google Antigravity customizations including skills, rules, MCP servers, lifecycle hooks, plugins, and custom JSON configs. Use when adding new capabilities to Antigravity, configuring MCP servers, writing rules, creating skills, setting up hooks, or modernizing legacy workflows.

BIGboss248/nextjs-wordpress

Spawn multiple agents into a shared conversation where they debate, disagree, and converge on a solution via a shared chat.json file. Use for architecture decisions, code review debates, design trade-offs, or any problem that benefits from adversarial reasoning. Triggers on "chatroom", "agent debate", "have agents discuss", "agent chatroom", "debate this", or /agent-chatrooms. Also triggers on phrases like "have 3 agents argue about", "multi-agent discussion", or "let them debate".

BIGboss248/nextjs-wordpress

Always-active code intelligence, search, and navigation skill utilizing the codebase-memory MCP server. Enforces an index-first protocol (verifying and refreshing the knowledge graph via index_repository or index_status before searching, required because background auto_watch is disabled to eliminate editor stutter and system lag), followed by graph-first exploration (search_graph, trace_path, get_code_snippet, query_graph, get_architecture, detect_changes) instead of naive text grep or full-file reads. Always activate before searching the codebase, inspecting unknown architecture, finding symbols, or tracing callers/callees.

BIGboss248/nextjs-wordpress

>- Discover, interview, and craft comprehensive UX/UI design specifications (design-spec.md) and design tokens for web components. Triggers on "/component-design", "design component", "design section", "design UI", "wireframe component", or "create design spec".

BIGboss248/nextjs-wordpress

>- Configure and query WooCommerce APIs including WPGraphQL, WooGraphQL, and JWT auth for headless frontends. Use when connecting Next.js to WooCommerce or fetching store catalog data.

BIGboss248/nextjs-wordpress

Orchestrate parallel browser automation using multiple Chrome DevTools MCP instances. Use when a task requires doing the same browser action across many targets simultaneously (e.g., submitting contact forms, filling applications, scraping pages that need JS rendering). Spin up 1-5 parallel Chrome agents.

BIGboss248/nextjs-wordpress

Workflow for spawning an independent subagent to conduct unbiased code reviews and inject adversarial edge-case tests ([ComponentName].edge.test.tsx).

BIGboss248/nextjs-wordpress

>- Build Next.js App Router React components with Suspense skeletons, semantic OKLCH tokens, Jest + RTL unit tests, Playwright visual/hydration checks, and Tailwind logical styling. Triggers on "/nextjs-component-dev", "create component", "new component", "build component", or "develop component".

BIGboss248/nextjs-wordpress

>- Bootstrap, configure, and verify the complete Next.js App Router development environment, developer tooling, testing suites, MCP servers, Docker containerization, and CI/CD. Triggers on "/nextjs-dev-setup", "setup nextjs dev environment", "start a nextjs project", or "containerize nextjs app".

BIGboss248/nextjs-wordpress

>- Configure production health monitoring endpoints (/api/health), Docker Compose probes, and runtime metrics in Next.js App Router applications. Use when asked to "setup health check", "add health endpoint", "docker compose healthcheck nextjs", "configure health monitor", or "/nextjs-healthcheck".

BIGboss248/nextjs-wordpress

Bootstrap, configure, and verify next-intl App Router internationalization (proxy.ts/middleware.ts, next/root-params, [locale] layout, routing). Triggers on "/nextjs-i18n-setup", "setup i18n", "install next-intl", "configure next-intl", "add internationalization", "setup locale routing", "migrate to [locale]".

BIGboss248/nextjs-wordpress

Read/write translation dictionaries (messages/[locale].json), next-intl hooks (getTranslations/useTranslations), providers (Storybook/tests/subtrees), and BiDi styling. Triggers on "/nextjs-i18n-usage", "i18n dictionary", "use translations", "read dictionary", "i18n provider", "next-intl hooks", "storybook i18n", "test i18n", "add translation keys", "localize component", "create a component", "update a component".

BIGboss248/nextjs-wordpress

Step-by-step workflow for designing and building Next.js App Router pages (RSC page.tsx, loading skeleton, metadata, JSON-LD schema, and dynamic static params). Triggers on "/nextjs-page-dev", "create page", "new page", "develop page", "build route", or "implement page".

BIGboss248/nextjs-wordpress

>- Orchestrate end-to-end planning for Next.js App Router projects, generating canonical specifications, design systems, and a 7-phase modular implementation roadmap in docs/plan/. Triggers on "/nextjs-plan", "plan a nextjs project", "plan nextjs app", "create nextjs project plan", "outline nextjs architecture", or "generate plan".

BIGboss248/nextjs-wordpress

Workflow and engineering standards for crafting co-located Storybook CSF3 stories ([ComponentName].stories.tsx) with interactive controls, action spies, and 4 canonical theme variants.

BIGboss248/nextjs-wordpress

>- Build Next.js e-commerce frontends backed by WooCommerce APIs, handling ISR catalogs, cart sessions, and JWT authentication. Use when building or querying Next.js stores with WooCommerce.

BIGboss248/nextjs-wordpress

Self-correcting rules engine and feedback loop that learns from user corrections, mistakes, and project-specific constraints by maintaining a persistent autofix ruleset. Scans learned rules before starting any task, resolves conflicts, and automatically appends new rules upon corrections. Triggers on user corrections ("no, do it this way", "never do X", "always use Y"), /learn, "self repair", "add rule", "update rules", or when diagnosing assumptions and bugs. CRITICAL ALWAYS-ACTIVE LIFECYCLE SKILL. Must always be kept in context, loaded at session start, and consulted before starting ANY task to read and apply active constraints from autofix.json. MUST ALWAYS be triggered immediately whenever the user provides ANY correction, preference, criticism, rejection of an approach, or adjustment ("no", "don't do X", "use Y", "remember", "prefer"), or when any mistake/bug is identified. Automatically and immediately formulates and appends the new imperative rule to the project's autofix.json ruleset file.

BIGboss248/nextjs-wordpress

Setup, automate, and execute SEO audits, CI/CD pre-push/pre-deploy checks, and ranking optimizations using the seo CLI and MCP server.

BIGboss248/nextjs-wordpress

End-to-end repository onboarding and development environment setup skill. Scans repository structure, configures project metadata (docs/project.json), sets up the codebase-memory-mcp code intelligence knowledge graph server (in workspace mcp.json and globally for AGY only), configures git hooks with Husky and Commitlint, establishes multi-stage production Docker containerization, and automates credit-optimized Release Please CI/CD with multi-arch (AMD64 & ARM64) GHCR package deployment. Triggers on "/setup-repository", "setup repository", "setup repo", "initialize repository", "new repo setup", or when preparing any repository for development and AI agent workflows.

BIGboss248/nextjs-wordpress

AI screen scaffolding, layout generation, and variant exploration workflow powered by Google Stitch (StitchMCP). Consumes a component design specification (docs/design/components/[page name]/[component name]/design-spec.md), verifies and reuses the central Stitch project in docs/project.json (or creates/persists one if absent), seeds the project's design system into Stitch, synthesizes layout prompts to generate a screen and create one variant of the given design spec file, downloads and saves Stitch JPG screenshots and HTML code files directly into docs/design/components/[page name]/[component name]/stitch/ using binary-safe PowerShell Invoke-WebRequest, outputs image prompts to the user if visual assets are needed (without calling generate_image to conserve tokens), updates design-spec.md with Stitch layout benchmarks, and audits asset download integrity with an independent subagent. Triggers on "/stitch-design", "generate stitch screen", "create stitch variant", "scaffold screen with stitch", or "stitch...

相关技能