Communitygithub.com

BIGboss248/nextjs-wordpress

读写翻译字典(messages/[locale].json),使用 next-intl 钩子(getTranslations/useTranslations)、提供者(Storybook/测试/子树)以及 BiDi 样式。

nextjs-wordpress 是什么?

该技能专注于在基于 Next.js 的应用中,使用 next-intl 库实现国际化(i18n)功能。它提供了严格的工程标准,包括禁止硬编码用户界面文本、强制同步更新所有语言文件中的翻译键,并正确使用服务器组件(getTranslations)和客户端组件(useTranslations)的钩子。技能还涵盖了双向(BiDi)样式的最佳实践,要求使用 Tailwind 逻辑属性(如 ms-* 而非 ml-*)以支持从右到左(RTL)语言。此外,它指导如何在 Storybook 故事和测试中正确包装 NextIntlClientProvider,以避免常见陷阱,如“未找到国际化上下文”错误。该技能适用于所有 Next.js 平台,并包含一个字典验证脚本(verify-dictionaries.ps1)以确保语言文件之间的键一致性。

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

在你喜欢的 AI 中提问

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

文档

Next.js i18n 字典与提供者(nextjs-i18n-usage)

用于在 React 服务器组件、客户端组件、Storybook 故事和测试工具中消费 next-intl 翻译的工程标准、钩子和提供者模式。

[!TIP] 实现模式: 请查阅 references/examples.md 获取完整代码示例(RSC、客户端表单、语言切换器、Storybook 装饰器和测试包装器)。 快速执行: 将字典验证或键同步委托给轻量级子代理(Model: 'flash')。


1. 零硬编码契约

  • 零硬编码文本: 绝不在 JSX 中编写面向用户的标签、占位符或回退字符串。
  • 无模拟对象: 禁止使用文件中模拟的字典(例如 const DEFAULT_CONTENT = {...})。
  • 同步同步: 添加/更新 UI 文案时,在编写 JSX 之前,须向 messages/[locale].json 中的所有语言文件(例如 messages/en.json 和 messages/fa.json)插入真实的翻译。

2. API 与钩子快速参考

环境/目标钩子/API示例语法
服务器组件(RSC)getTranslationsconst t = await getTranslations('namespace');
服务器格式化器getFormatterconst format = await getFormatter(); format.dateTime(...)
动态元数据getTranslationsexport async function generateMetadata({ params }) { ... }
客户端组件useTranslationsconst t = useTranslations('namespace');
客户端格式化器useFormatterconst format = useFormatter(); format.number(...)
富文本(客户端)t.richt.rich('terms', { link: (c) => <Link href="/t">{c}</Link> })
导航@/i18n/navigationimport { Link, useRouter, usePathname } from '@/i18n/navigation';
Storybook 预览NextIntlClientProvider将预览装饰器包裹在 <NextIntlClientProvider locale="en" messages={enMessages}> 中
单元测试(Jest)renderWithIntl将渲染包裹在 <NextIntlClientProvider locale="en" messages={messages}> 中

3. BiDi(LTR / RTL)与样式标准

  1. 仅使用 Tailwind 逻辑属性:
    • 禁止: ml-*、mr-*、pl-*、pr-*、left-*、right-*、text-left、text-right
    • 必需: ms-*、me-*、ps-*、pe-*、start-*、end-*、text-start、text-end
  2. 动态方向: 为 fa/ar 设置动态 <html dir="rtl">,为 en 设置 dir="ltr"。

4. 反模式与陷阱

错误根本原因解决方案
在 RSC 中使用 useTranslations钩子无法在异步服务器组件中运行使用 await getTranslations('ns')
在客户端中使用 getTranslations仅用于服务器的异步函数使用 useTranslations('ns') 并添加 "use client"
“未找到国际化上下文”Storybook/测试中缺少提供者将故事/测试包裹在 <NextIntlClientProvider> 中
硬编码回退例如 `t('btn')
原生 next/link路由变化时丢失语言前缀使用来自 @/i18n/navigation 的 Link

5. 一致性验证

执行字典一致性检查:

pwsh .agents/skills/nextjs-i18n-usage/scripts/verify-dictionaries.ps1

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

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

相关技能