payloadcms

generate-translations

40,235
3,316
# Install this skill:
npx skills add payloadcms/payload --skill "generate-translations"

Install specific skill from multi-skill repository

# Description

Use when new translation keys are added to packages to generate new translations strings

# SKILL.md


name: generate-translations
description: Use when new translation keys are added to packages to generate new translations strings
allowed-tools: Write, Bash(date:), Bash(mkdir -p )


Translation Generation Guide

Payload has two separate translation systems:

  1. Core Translations - for core Payload packages (packages/ui, packages/payload, packages/next)
  2. Plugin Translations - for plugins (packages/plugin-*)

Table of Contents


1. Core Translations

When to use: Adding translations to core Payload packages (packages/ui, packages/payload, packages/next)

Steps:

  1. Add the English translation to packages/translations/src/languages/en.ts

  2. Add your new key/value to the appropriate section (e.g., authentication, general, fields, etc.)

  3. Use nested objects for organization
  4. Example:
    typescript export const enTranslations = { authentication: { // ... existing keys newFeature: 'New Feature Text', }, }

  5. Add client key (if needed for client-side usage) to packages/translations/src/clientKeys.ts

  6. Add the translation key path using colon notation

  7. Example: 'authentication:newFeature'
  8. Client keys are used for translations that need to be available in the browser

  9. Generate translations for all languages

  10. Change directory: cd tools/scripts
  11. Run: pnpm generateTranslations:core
  12. This auto-translates your new English keys to all other supported languages

2. Plugin Translations

When to use: Adding translations to any plugin package (packages/plugin-*)

Steps:

  1. Verify plugin has translations folder

  2. Check if packages/plugin-{name}/src/translations exists

  3. If it doesn't exist, see "Scaffolding New Plugin Translations" below

  4. Add the English translation to the plugin's packages/plugin-{name}/src/translations/languages/en.ts

  5. Plugin translations are namespaced under the plugin name

  6. Example for plugin-multi-tenant:
    typescript export const enTranslations = { 'plugin-multi-tenant': { 'new-feature-label': 'New Feature', }, }

  7. Generate translations for all languages

  8. Change directory: cd tools/scripts
  9. Run the plugin-specific script: pnpm generateTranslations:plugin-{name}
  10. Examples:
    • pnpm generateTranslations:plugin-multi-tenant
    • pnpm generateTranslations:plugin-ecommerce
    • pnpm generateTranslations:plugin-import-export

Scaffolding New Plugin Translations

If a plugin doesn't have a translations folder yet, ask the user if they want to scaffold one.

Structure to create:

packages/plugin-{name}/src/translations/
β”œβ”€β”€ index.ts
β”œβ”€β”€ types.ts
└── languages/
    β”œβ”€β”€ en.ts
    β”œβ”€β”€ es.ts
    └── ... (all other language files)

Files to create:

  1. types.ts - Define the plugin's translation types
  2. index.ts - Export all translations and re-export types
  3. languages/en.ts - English translations (the source for generation)
  4. languages/*.ts - Other language files (initially empty, will be generated)

Generation script to create:

  1. Create tools/scripts/src/generateTranslations/plugin-{name}.ts

  2. Use plugin-multi-tenant.ts as a template

  3. Update the import paths to point to the new plugin
  4. Update the targetFolder path

  5. Add script to tools/scripts/package.json:
    json "generateTranslations:plugin-{name}": "node --no-deprecation --import @swc-node/register/esm-register src/generateTranslations/plugin-{name}.ts"


Important Notes

  • All translation generation requires OPENAI_KEY environment variable to be set
  • The generation scripts use OpenAI to translate from English to other languages
  • Always add translations to English first - it's the source of truth
  • Core translations: Client keys are only needed for translations used in the browser/admin UI
  • Plugin translations: Automatically namespaced under the plugin name to avoid conflicts

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.