Provides i18n best practices for React Router apps using remix-i18next, including middleware setup, locale detection, resource routes, and language switching.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin sergiodxa-agent-skills-1This skill uses the workspace's default tool permissions.
Guidelines for building a React Router i18n setup with `remix-i18next`. Focuses on middleware detection, locale storage, type safety, and client/server synchronization.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Guidelines for building a React Router i18n setup with remix-i18next. Focuses on middleware detection, locale storage, type safety, and client/server synchronization.
remix-i18next middleware/api/localesConfigure createI18nextMiddleware and type-safe resources.
export const [i18nextMiddleware, getLocale, getInstance] =
createI18nextMiddleware({
detection: {
supportedLanguages: ["es", "en"],
fallbackLanguage: "en",
cookie: localeCookie,
},
i18next: { resources },
plugins: [initReactI18next],
});
Define locale resources per language and re-export.
// app/locales/en/translation.ts
export default { title: "Example" };
Use a single namespace for small apps; multiple namespaces for large apps.
// Large app: common + route namespaces
export default { common, home, notFound };
Prefer cookie/session for speed, with DB as source of truth.
export const [i18nextMiddleware, getLocale] = createI18nextMiddleware({
detection: { cookie: localeCookie, fallbackLanguage: "en" },
});
Store locale in cookie/session and keep it in sync.
return data(
{ locale },
{ headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
);
Send locale to the UI and sync <html lang dir>.
export async function loader({ context }: Route.LoaderArgs) {
let locale = getLocale(context);
return data(
{ locale },
{ headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
);
}
Initialize i18next client with htmlTag detection.
i18next.init({ detection: { order: ["htmlTag"], caches: [] } });
Reuse the middleware instance in SSR with I18nextProvider.
<I18nextProvider i18n={getInstance(routerContext)}>
<ServerRouter context={entryContext} url={request.url} />
</I18nextProvider>
Serve /api/locales/:lng/:ns with validation and cache headers.
return data(namespaces[ns.data], { headers });
Use the bound t() in loaders and useTranslation in components.
let t = getInstance(context).getFixedT(locale);
Provide a 404 route so middleware runs and translations load.