Direct Translation Calls and Component Files

Use direct localization calls and real component files instead of fallback translation wrappers or render helper functions

Source: .agents/rules/direct-translation-and-component-files.mdc

Metadata

• alwaysApply: true

Content

Direct Translation Calls and Component Files

• Use t('key') directly in JSX or simple value assignments.
• Translation keys must be the English source copy converted to kebab-case.
  • Example: "This should be translated" -> t('this-should-be-translated').
  • Keep meaningful words from the visible copy; do not use generic/context-only keys like modal-title, description-1, or magic-content-help-intro.
  • For copy with placeholders, keep the readable sentence shape and use placeholder names as words where needed.
• Do not split one visible sentence into multiple translation keys just to style part of it.
  • Example: use t('click-create'), not t('click') + t('create').
  • If part of the sentence needs bold/italic/link styling, keep one key for the full sentence and render the translated value through Markdown with markdown syntax such as Click **Create**.
• Do not create wrapper helpers around t() to provide fallback copy, such as getLocalizedCopy(key, fallback) or similar.
• Do not add fallback English strings for every translation key in component code. Locale files are managed separately.
• Do not use renderDomElement, renderSomething, or other JSX-returning render helper functions for reusable UI.
• Extract reusable UI into named component files colocated with the parent component.

// ❌ Avoid
function getCopy(key: string, fallback: string) {
  return t(key) === key ? fallback : t(key);
}

function renderCard(title: string) {
  return <div>{title}</div>;
}

// ✅ Prefer
<Card title={t('choose-a-style')} />;
<p>{t('this-should-be-translated')}</p>;
<Markdown>{t('click-create')}</Markdown>;