Communitygithub.com

BIGboss248/nextjs-wordpress

引導、配置並驗證 next-intl App Router 國際化（proxy.ts/middleware.ts、next/root-params、[locale] 佈局、路由）。觸發詞：「/nextjs-i18n-setup」「setup i18n」「install next-intl」「configure next-intl」「add internationalization」「setup locale routing」「migrate to [locale]」。

nextjs-wordpress 是什麼？

此技能自動將 **`next-intl`** 引導並整合至現有的 Next.js App Router 專案中。它基於 Next.js 版本（16+ 或 ≤15）自動選擇正確的請求攔截器（`proxy.ts` 或 `middleware.ts`），並採用現代 `next/root-params` API（廢棄舊的 `requestLocale`），強制使用 `app/[locale]` 動態區段與純 TypeScript 的導航輔助函式。技能提供完整的 12 步驟檢查清單，涵蓋安裝、路由設定、請求處理、導航工具、Next.js 外掛 wrapp、字典建立、佈局遷移、型別擴充、以及透過 PowerShell 驗證腳本與 `pnpm build` 進行驗證。主要支援平台為 Claude Code（透過觸發詞啟動），但也適用於 Cursor、Codex 等工具，只要其能執行 shell 指令與檔案操作。最終產出一個詳盡的設定執行報告，標示每個元件的實作狀態，確保國際化配置乾淨無誤。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/BIGboss248/nextjs-wordpress/tree/HEAD/.agents/skills/nextjs-i18n-setup
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

Next.js i18n 設定（nextjs-i18n-setup）

將 next-intl 引導並建置於現有的 Next.js App Router 專案中，使用現代 next/root-params、動態區段 app/[locale]/，以及 Next.js 16+（proxy.ts） / Next.js ≤15（middleware.ts）。

[!TIP] 樣板與範本： 請參閱 references/templates.md 取得完整的可直接套用程式碼範本，用於建構檔案。 快速執行： 將驗證作業委派給輕量級子代理（Model: 'flash'）。

1. 架構規則與需求

  1. 中繼資料契約： 確保 docs/project.json 包含： 
    "dictionaries_dir": "messages",
"dictionary_file_pattern": "[locale].json"
  2. Next.js 版本攔截器：
    • Next.js 16+：使用 proxy.ts（或 src/proxy.ts）。遷移並移除任何舊有的 middleware.ts。
    • Next.js ≤15：使用 middleware.ts（或 src/middleware.ts）。
  3. 現代根參數： 在 i18n/request.ts 中使用 next/root-params（await rootParams.locale()）。禁止使用已棄用的 requestLocale 與 setRequestLocale()。
  4. 導航： 從 i18n/navigation.ts 匯出 Link、redirect、usePathname、useRouter（純 TypeScript，無 JSX）。
  5. 靜態生成： 根佈局 app/[locale]/layout.tsx 必須匯出 generateStaticParams()，為所有支援的地區設定傳回 { locale }。

2. 設定檢查清單

  • 步驟 0：審計：檢查 docs/project.json（supported_languages）以及 package.json 中的 Next.js 版本。
  • 步驟 1：安裝：執行 <pkg_mgr> add next-intl（pnpm add next-intl）。
  • 步驟 2：組態中繼資料：確保 docs/project.json 中有 dictionaries_dir: "messages"。
  • 步驟 3：路由：使用 defineRouting 建立 i18n/routing.ts（請參閱範本）。
  • 步驟 4：請求處理：使用 next/root-params 建立 i18n/request.ts（請參閱範本）。
  • 步驟 5：導航輔助函式：建立 i18n/navigation.ts（請參閱範本）。
  • 步驟 6：Next.js 外掛：使用 createNextIntlPlugin() 包裹 next.config.ts（請參閱範本）。
  • 步驟 7：攔截器：建立 proxy.ts（Next 16+）或 middleware.ts（Next ≤15），並包含靜態資源過濾匹配器（請參閱範本）。
  • 步驟 8：起始字典：確保所有支援的地區設定都存在 messages/[locale].json，且具有一致的基礎鍵值。
  • 步驟 9：遷移佈局與路由：將頂層路由移至 app/[locale]/。設定動態 dir、lang、generateStaticParams 以及 <NextIntlClientProvider>（請參閱範本）。
  • 步驟 10：型別擴充：在 global.d.ts 中宣告 AppConfig.Messages（請參閱範本）。
  • 步驟 11：導航匯入：更新現有元件中的內部連結，改用 @/i18n/navigation。
  • 步驟 12：驗證：執行驗證腳本與建置： 
    pwsh .agents/skills/nextjs-i18n-setup/scripts/verify-setup.ps1 -Quiet
pnpm run build

3. 設定執行報告範本

## 🌐 Next.js i18n 設定執行報告

| 步驟 / 元件        | 目標檔案                        | 狀態                            | 備註                    |
| :----------------- | :------------------------------ | :------------------------------ | :---------------------- |
| **套件**           | `package.json`（`next-intl`）   | `[IMPLEMENTED]` / `[UNTOUCHED]` | 已安裝執行時期        |
| **專案組態**       | `docs/project.json`             | `[IMPLEMENTED]` / `[UNTOUCHED]` | 已設定訊息目錄      |
| **路由**           | `i18n/routing.ts`               | `[IMPLEMENTED]` / `[UNTOUCHED]` | 地區設定與預設      |
| **請求**           | `i18n/request.ts`               | `[IMPLEMENTED]` / `[UNTOUCHED]` | next/root-params       |
| **導航**           | `i18n/navigation.ts`            | `[IMPLEMENTED]` / `[UNTOUCHED]` | 純 TS 輔助函式        |
| **外掛**           | `next.config.ts`                | `[IMPLEMENTED]` / `[UNTOUCHED]` | 已包裹 withNextIntl    |
| **攔截器**         | `proxy.ts` / `middleware.ts`    | `[IMPLEMENTED]` / `[UNTOUCHED]` | 路由匹配器            |
| **字典**           | `messages/[locale].json`        | `[IMPLEMENTED]` / `[UNTOUCHED]` | 起始字典              |
| **佈局**           | `app/[locale]/layout.tsx`       | `[IMPLEMENTED]` / `[UNTOUCHED]` | 靜態參數與 provider   |
| **型別**           | `global.d.ts`                   | `[IMPLEMENTED]` / `[UNTOUCHED]` | AppConfig 擴充        |
| **驗證**           | `verify-setup.ps1` 與建置       | `[PASSED]`                      | 乾淨建置              |

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

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

>- Configure, test, and verify OpenTelemetry (OTel) observability in Next.js App Router applications. Triggers on "/nextjs-otel", "setup otel", "configure opentelemetry", "test otel", or "verify opentelemetry".

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...

相關技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community