菜单
Multilingual-resilient web UI, English/Spanish first-class. Use for localization, translation, text expansion, lang attributes, logical properties, RTL readiness, locale formats, bilingual copy tells, hreflang, and language toggles.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Imagery, illustration, and iconography direction for web UI. Use for hero images, photo treatment, illustration style, icon sets, favicons, OG/social cards, decorative graphics, image-shaped holes, and removing generic AI imagery.
OKLCH color-system guidance for cohesive palettes and contrast-safe tokens. Use when choosing colors, generating ramps, fixing muddy palettes, creating semantic state colors, checking WCAG contrast, or defining theme variables.
State matrix for interactive UI. Use when building or reviewing buttons, links, inputs, tabs, toggles, menus, cards, or controls that need hover, focus, active, disabled, loading, selected, error, keyboard, or ARIA states.
Honest, Tufte-informed web data visualization. Use for charts, dashboards, metrics, KPI tiles, sparklines, chart accessibility, chartjunk removal, genre choice, lie-factor checks, direct labels, data tables, and themed SVG/HTML.
Design-system interview before new frontend builds or redesigns. Use for vague site/app/landing/dashboard requests, generic-looking UI, direction-setting, aesthetic choices, type/color/density decisions, and DESIGN-SYSTEM.md tokens.
Empty, loading, and error-state design. Use for first-run screens, zero results, empty lists/tables/dashboards, loading skeletons, offline/permission errors, retries, layout stability, and state copy.
| name | i18n-ready |
| description | Multilingual-resilient web UI, English/Spanish first-class. Use for localization, translation, text expansion, lang attributes, logical properties, RTL readiness, locale formats, bilingual copy tells, hreflang, and language toggles. |
Design for the longest honest string, then translate meaning—not words. English/Spanish is the worked pair; the structural method generalizes.
Record a locale contract before resizing or translating:
| Boundary | Required decision/evidence |
|---|---|
| locale/reader | concrete BCP 47 tag, fallback/owner, formality and regional vocabulary |
| content | whole-message keys, variables/plurals, protected legal/safety language |
| mechanics | formats and data source for date/time zone/number/currency/address/name |
| stress/direction | longest approved fixture by surface; current dir, RTL/bidi/logical-property path |
Never invent locale, idiom, translation, or formality; pending source/approval means structural readiness only.
<html lang> and inline lang switches.Intl with real locales
for all mechanical formats.lang; provide hreflang and per-locale metadata for indexed
locale routes where applicable.Intl; native Spanish with consistent formality, accents/ñ/¿¡, and
cognitive-a11y pass per locale.Keep three evidence lanes distinct: meaning (native/approved intent, formality,
idiom, plural/protected wording); layout (longest fixtures in real views/states;
pseudo-localization finds width defects only); mechanical (Intl, time zones,
currencies, inputs, lang/dir, logical properties, toggle persistence). A date changing
calendar day is a data defect.
Require locale contract and approved fixtures first. Repair message boundaries, formats, keys, wrapping, logical CSS/bidi, and native voice, then record separate three-lane checks per locale/surface with reviewer/source authority.
lang, logical CSS, longest-fixture layout, and no fragmented/image text?Intl, native/formality-safe copy, and per-language cognitive pass?Deliver locale readiness: tag/fallback, formality source, longest fixture, three-lane
evidence, bidi/format risk, and owner. Keep locales in DESIGN-SYSTEM.md and hand off
voice/type/accessibility work.
references/decision-records.md — meta-patterns + ADR rules for novel cases.assets/locale-fixtures.json — EN/ES message keys, format examples, and longest-string stress fixtures.Canonical detail: contract.json.
table_with_evidence with status, reason, remediation, evidence, provenance.