Agent skill
i18n-frontend-implementer
Adds internationalization (i18n) infrastructure with translation plumbing, scalable key strategy, formatters for dates/numbers/currency, plural rules, and language switching. Use when implementing "internationalization", "translations", "multi-language support", or "i18n".
Install this agent skill to your Project
npx add-skill https://github.com/patricio0312rev/skills/tree/main/frontend/i18n-frontend-implementer
SKILL.md
i18n Frontend Implementer
Implement internationalization with next-intl, react-i18next, or similar libraries.
Core Setup
1. Install: npm install next-intl or react-i18next
2. Create dictionaries: locales/en.json, locales/es.json
3. Provider setup: Wrap app with IntlProvider
4. Translation keys: Hierarchical namespace structure
5. Formatters: Date, number, currency formatting
6. Language switcher: Dropdown or flags UI
Translation Structure
{
"common": { "nav": { "home": "Home", "about": "About" } },
"auth": { "login": "Sign In", "logout": "Sign Out" },
"errors": { "required": "{field} is required" }
}
Usage Examples
const t = useTranslations('common');
<h1>{t('nav.home')}</h1>
// With plurals
t('items', { count: 5 }) // "5 items"
// With formatting
<p>{formatDate(date, { dateStyle: 'long' })}</p>
Best Practices
Use namespaces for organization, extract all text to translations, handle plurals properly, format dates/numbers per locale, provide language switcher, support RTL languages, lazy-load translations.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
rate-limiting-abuse-protection
Implements rate limiting and abuse prevention with per-route policies, IP/user-based limits, sliding windows, safe error responses, and observability. Use when adding "rate limiting", "API protection", "abuse prevention", or "DDoS protection".
rbac-permissions-builder
Implements role-based access control with permission matrix, route guards, policy functions, and UI permission hints. Provides middleware/guards, helper utilities, test suggestions, and permission checking patterns. Use when building "RBAC", "permissions", "access control", or "authorization".
websocket-realtime-builder
Implements real-time features using WebSockets with Socket.io, rooms, authentication, and reconnection handling. Use when users request "real-time updates", "WebSocket", "Socket.io", "live chat", or "push notifications".
webhook-receiver-hardener
Secures webhook receivers with signature verification, retry handling, deduplication, idempotency keys, and error responses. Provides verification code, dedupe storage strategy, runbook for incidents. Use when implementing "webhooks", "webhook security", "event receivers", or "third-party integrations".
auth-module-builder
Implements secure authentication patterns including login/registration, session management, JWT tokens, password hashing, cookie settings, and CSRF protection. Provides auth routes, middleware, security configurations, and threat model documentation. Use when building "authentication", "login system", "JWT auth", or "session management".
rest-to-graphql-migrator
Migrates REST APIs to GraphQL incrementally with schema stitching, REST datasources, and gradual endpoint migration. Use when users request "migrate to GraphQL", "REST to GraphQL", "GraphQL wrapper", or "API modernization".
Didn't find tool you were looking for?