Getting it into your agent
This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.
/plugin marketplace add kkunkunya/ai-frontend-design-kit/plugin install ai-frontend-design-kitWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/kkunkunya/ai-frontend-design-kit/frontend-i18n-essentials)<a href="https://agentmods.dev/skills/kkunkunya/ai-frontend-design-kit/frontend-i18n-essentials"><img src="https://agentmods.dev/badge/skills/kkunkunya/ai-frontend-design-kit/frontend-i18n-essentials/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/kkunkunya/ai-frontend-design-kit/frontend-i18n-essentials"><img src="https://agentmods.dev/badge/skills/kkunkunya/ai-frontend-design-kit/frontend-i18n-essentials.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00300 | $0.05217 |
| Opus 5 | $0.00150 | $0.02609 |
| Sonnet 5 | $0.00060 | $0.01043 |
| Haiku 4.5 | $0.00030 | $0.00522 |
Grade A, and why
frontend-i18n-essentials scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 387 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Packaged Knowledge Snapshot
This packaged copy includes local note snapshots for portability. When the original Obsidian absolute path is unavailable, use the packaged snapshot instead:
/Users/kunkun/note/11-前端工程/前端国际化（i18n）认知对齐.md->references/packaged-knowledge/前端国际化（i18n）认知对齐.md
Frontend i18n Essentials
这个 skill 在做什么
做国际性网站时的 i18n 规划与执行路由器。用户要做多语言、补多语言、或 i18n debug 时，本 skill 干两件事：
- 按三层正交模型诊断用户的痛点在哪一层（运行时 / 翻译内容 / 视觉），避免把不同层的问题混着解
- 按三场景分流（新搭 / 补多语言 / debug）输出对应决策 + 执行资产（prompt 模板 / subagent 编排 / checklist / glossary 骨架）
本 skill 不替用户做具体库选型（next-intel vs i18next vs react-intl 让 AI 按项目栈判断），不跑完整开发流程（执行交给开发实现剧本）——它只管"i18n 相关决策的判断方向"和"翻译质量流水线的编排"。
核心赌局
i18n 最常见的失败是把三件正交的事混成一件：
- 用户抱怨"网站不地道"——问题在翻译内容层（机翻味）、视觉层（字体塌）、还是运行时层（切语言把表单清空了）？
- 模型默认倾向把这些症状堆在一起开一个大药方，结果哪一层都没治好
本 skill 的硬约束：先定位层，再开方。三层各自独立评审、独立优化。
何时进入本 skill
要进：
- 用户说"做国际性网站 / 做国际化 / 做多语言 / 加英文版 / 加日文版 / i18n / 本地化 / localization"
- 老项目要补多语言，问"怎么开始 / 架构怎么搭 / 翻译怎么搞"
- 讨论 i18n 相关具体决策：路由用子路径还是子域名 / SEO hreflang 怎么配 / 语言切换器放哪 / 切语言要不要刷新 / 复数怎么处理 / 字符串提取 / 字体跨语言
- 翻译质量问题：机翻味重、当地人读着古怪、文化陷阱
- i18n 相关 debug：SEO 流量异常、语言切换后状态错乱、缺翻译页面 404
不要进：
- 项目是纯单语言（无国际化意图，用户没说要扩展）→ 跳过本 skill
- 纯翻译任务不涉及前端（纯文案翻译）→ 不是本 skill 范畴
- RTL 排版深度实现（目标市场不含中东 / 希伯来 / 波斯 / 乌尔都时直接跳过，附录里有清单但不是主场）
- UI 设计 / 视觉规划 / 动效 / 组件库（那是 frontend-suite 其他 skill 的活）
知识库依赖
本 skill 的认知底座住在 Obsidian，本文件只放执行层的路由 + 模板。决策前必读底座：
| 文件 | 用途 | 何时读 |
|---|---|---|
/Users/kunkun/note/11-前端工程/前端国际化（i18n）认知对齐.md |
三层正交模型 + 四条元原则 + 8 题原则 + 三场景速查 | 启动必读 |
重要分工：
- 认知层（Obsidian 笔记）：原则 + 判断标准 + 禁区——回答"为什么这么做"
- skill 层（本文件）：执行流程 + prompt 模板 + 决策树——回答"怎么做"
两者互补不重复。认知笔记更新优先，skill 同步引用。
执行顺序
步骤 0 读认知层 + 场景路由
↓
步骤 1 三层诊断（运行时 / 翻译内容 / 视觉）
↓
步骤 2 按层 × 场景输出决策 + 落地方案
↓
步骤 3 翻译内容层：subagent 并行化编排（按需）
↓
步骤 4 输出结构化结论 + handoff 给执行者
步骤 0：读认知层 + 场景路由
先 Read 认知底座（一次即可，后续按章节回读）：
/Users/kunkun/note/11-前端工程/前端国际化（i18n）认知对齐.md
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 387 lines · 300 tokens per session scan A f26d06b951c5
frontend-i18n-essentials is a skill published in the GitHub repository kkunkunya/ai-frontend-design-kit (7 stars, last pushed 3mo ago), licensed MIT. It adds 300 tokens to every session and 5,217 once invoked, about $0.0015 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
stark
Use for UI/UX design, product flows, frontend or native interface design, design audits, design translation, asset planning, motion direction, design tokens, or distinctive non-generic apps and websites. Covers web and React, Windows and WinUI/Mica, Apple and SwiftUI, Android and Jetpack Compose/Material…
web-design
Use for web interfaces, landing pages, product sites, dashboards, React, Next.js, Astro, Tailwind, frontend audits, responsive design, browser interaction, web motion, or requests for a distinctive non-generic website. Select the web surface and implementation track, load a small reference bundle, preserve usability…
live-preview
Mid-build visual verification loop. Takes screenshots of components during construction, not just after. Catches visual regressions and invisible features before they compound. Requires Playwright or similar screenshot tool.
react-i18n
Use when implementing translations in a React app (not Next.js) with react-i18next — useTranslation, namespaces, pluralization, Suspense.
fec-nextjs-project-standard
A development guide for Next.js 14 and newer projects using App Router, Next.js’s file-based routing system. It covers server-rendered pages, layouts, data loading, middleware, metadata, and server actions.
fec-component-testing
A guide for writing and reviewing front-end unit, component, and lightweight integration tests. These tests check small pieces of code and UI behavior without running a full browser journey.