@intlayer/docs 8.11.2 → 8.11.3

package/docs/es/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Cómo traducir una aplicación Tanstack Start en 2026
-description: Aprende a añadir la internacionalización (i18n) a tu aplicación Tanstack Start utilizando Intlayer. Sigue esta guía completa para hacer que tu aplicación sea multilingüe con enrutamiento consciente de la configuración regional.
+updatedAt: 2026-05-31
+title: Tanstack Start i18n - Guía completa para traducir TanStack Start
+description: La mejor solución para el tamaño del bundle, SEO, rendimiento & mantenibilidad. Haga multilingüe su TanStack Start aplicación en 2026, traducción LLM, Agent Skills & MCP.
 keywords:
   - Internacionalización
   - Documentación
@@ -55,17 +55,47 @@ history:
 
 Esta guía demuestra cómo integrar **Intlayer** para una internacionalización fluida en proyectos Tanstack Start con enrutamiento consciente de la configuración regional, soporte para TypeScript y prácticas de desarrollo modernas.
 
-## ¿Qué es Intlayer?
+## ¿Por qué Intlayer en lugar de alternativas?
 
-**Intlayer** es una biblioteca de internacionalización (i18n) innovadora y de código abierto diseñada para simplificar el soporte multilingüe en aplicaciones web modernas.
+En comparación con soluciones principales como `react-i18next` o `use-intl`, o `paraglide`, Intlayer es una solución que viene con optimizaciones integradas como:
 
-Con Intlayer, puedes:
+<AccordionGroup>
+<Accordion header="Soporte completo de TanStack Start">
 
-- **Gestionar fácilmente las traducciones** utilizando diccionarios declarativos a nivel de componente.
-- **Localizar dinámicamente metadatos**, rutas y contenido.
-- **Garantizar el soporte de TypeScript** con tipos autogenerados, mejorando el autocompletado y la detección de errores.
-- **Beneficiarte de funciones avanzadas**, como la detección y el cambio dinámico de la configuración regional.
-- **Habilitar el enrutamiento consciente de la configuración regional** con el sistema de enrutamiento basado en archivos de Tanstack Start.
+Intlayer está completamente optimizado para TanStack Start y proporciona **enrutamiento multilingüe**, **administración de cookies**, **generación de mapas de sitio**, **carga de contenido dinámico** y todas las funciones necesarias para escalar sus esfuerzos de internacionalización (i18n).
+
+</Accordion>
+<Accordion header="Tamaño del bundle">
+
+En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a **reducir el tamaño de su bundle y de sus páginas hasta en un 50%**.
+
+</Accordion>
+<Accordion header="Mantenibilidad">
+
+Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente escrito** para garantizar la precisión de su contenido.
+
+</Accordion>
+<Accordion header="Agente de IA">
+
+La ubicación conjunta de contenido **reduce el contexto necesario** para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una **CLI** para comprobar si faltan traducciones,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.
+
+</Accordion>
+<Accordion header="Automatización">
+
+Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su proveedor de IA. Intlayer también ofrece un **compilador** para automatizar la extracción de contenido, así como una [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ayudar a **traducir en segundo plano**.
+
+</Accordion>
+<Accordion header="Actuación">
+
+La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.
+
+</Accordion>
+<Accordion header="Escalando sin ningún desarrollador">
+
+Más que una simple solución i18n, Intlayer proporciona un **[editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -103,11 +133,15 @@ Con Intlayer, puedes:
 
 Consulta la [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-tanstack-start-template) en GitHub.
 
-### Paso 1: Crear proyecto
+<Steps>
+
+<Step number={1} title="Crear proyecto">
 
 Comienza creando un nuevo proyecto TanStack Start siguiendo la guía [Start new project](https://tanstack.com/start/latest/docs/framework/react/quick-start) en el sitio web de TanStack Start.
 
-### Paso 2: Instalar paquetes de Intlayer
+</Step>
+
+<Step number={2} title="Instalar paquetes de Intlayer">
 
 Instala los paquetes necesarios utilizando tu gestor de paquetes preferido:
 
@@ -145,7 +179,9 @@ bun x intlayer init
 - **vite-intlayer**
   Incluye el plugin de Vite para integrar Intlayer con el [empaquetador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como el middleware para detectar la configuración regional preferida del usuario, gestionar cookies y manejar la redirección de URL.
 
-### Paso 3: Configuración de tu proyecto
+</Step>
+
+<Step number={3} title="Configuración de tu proyecto">
 
 Crea un archivo de configuración para configurar los idiomas de tu aplicación:
 
@@ -166,7 +202,9 @@ export default config;
 
 > A través de este archivo de configuración, puedes establecer URLs localizadas, redirección de middleware, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, desactivar los registros de Intlayer en la consola y más. Para obtener una lista completa de los parámetros disponibles, consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
-### Paso 4: Integrar Intlayer en tu configuración de Vite
+</Step>
+
+<Step number={4} title="Integrar Intlayer en tu configuración de Vite">
 
 Añade el plugin intlayer en tu configuración:
 
@@ -196,7 +234,9 @@ export default config;
 
 > El plugin de Vite `intlayer()` se utiliza para integrar Intlayer con Vite. Asegura la construcción de los archivos de declaración de contenido y los monitorea en modo desarrollo. Define variables de entorno de Intlayer dentro de la aplicación Vite. Además, proporciona alias para optimizar el rendimiento.
 
-### Paso 5: Crear el diseño raíz (Root Layout)
+</Step>
+
+<Step number={5} title="Crear el diseño raíz">
 
 Configura tu diseño raíz para admitir la internacionalización mediante el uso de `useParams` para detectar la configuración regional actual y estableciendo los atributos `lang` y `dir` en la etiqueta `html`.
 
@@ -256,7 +296,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Paso 6: Crear el diseño de configuración regional (Locale Layout)
+</Step>
+
+<Step number={6} title="Crear el diseño de configuración regional">
 
 Crea un diseño que maneje el prefijo de configuración regional y realice la validación.
 
@@ -288,7 +330,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Para el modo `'prefix-all'`, es posible que prefieras cambiar el espacio a `$locale` en su lugar.
 > Para el modo `'no-prefix'` o `'search-params'`, puedes eliminar el espacio por completo.
 
-### Paso 7: Declarar tu contenido
+</Step>
+
+<Step number={7} title="Declarar tu contenido">
 
 Crea y gestiona tus declaraciones de contenido para almacenar traducciones:
 
@@ -334,7 +378,9 @@ export default appContent;
 
 > Para más detalles, consulta la [documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md).
 
-### Paso 7: Crear componentes y hooks conscientes de la configuración regional
+</Step>
+
+<Step number={7} title="Crear componentes y hooks conscientes de la configuración regional">
 
 Crea un componente `LocalizedLink` para la navegación consciente de la configuración regional:
 
@@ -438,7 +484,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Paso 8: Utilizar Intlayer en tus páginas
+</Step>
+
+<Step number={8} title="Utilizar Intlayer en tus páginas">
 
 Accede a tus diccionarios de contenido en toda tu aplicación:
 
@@ -486,7 +534,9 @@ function RouteComponent() {
 
 > Para obtener más información sobre el hook `useIntlayer`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useIntlayer.md).
 
-### Paso 9: Crear un componente selector de idioma (Locale Switcher)
+</Step>
+
+<Step number={9} title="Crear un componente selector de idioma">
 
 Crea un componente para permitir a los usuarios cambiar de idioma:
 
@@ -547,7 +597,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Para obtener más información sobre el hook `useLocale`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useLocale.md).
 
-### Paso 10: Gestión de atributos HTML
+</Step>
+
+<Step number={10} title="Gestión de atributos HTML">
 
 Como se vio en el Paso 5, puedes gestionar los atributos `lang` y `dir` de la etiqueta `html` utilizando `useParams` en tu componente raíz. Esto garantiza que los atributos correctos se establezcan en el servidor y el cliente.
 
@@ -566,7 +618,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Paso 11: Añadir middleware (Opcional)
+</Step>
+
+<Step number={11} title="Añadir middleware">
 
 También puedes usar el `intlayerProxy` para añadir enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional adecuada. Si no se especifica ninguna configuración regional, el plugin determinará la más adecuada según las preferencias de idioma del navegador del usuario. Si no se detecta ninguna, redirigirá a la configuración regional predeterminada.
 
@@ -597,7 +651,9 @@ export default defineConfig({
 
 ---
 
-### Paso 12: Internacionalizar tus metadatos (Opcional)
+</Step>
+
+<Step number={12} title="Internacionalizar tus metadatos">
 
 También puedes usar el hook `getIntlayer` para acceder a tus diccionarios de contenido en toda tu aplicación:
 
@@ -644,7 +700,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Paso 13: Recuperar la configuración regional en tus acciones del servidor (Opcional)
+</Step>
+
+<Step number={13} title="Recuperar la configuración regional en tus acciones del servidor">
 
 Es posible que desees acceder a la configuración regional actual desde dentro de tus acciones del servidor o endpoints de la API.
 Puedes hacerlo utilizando el asistente `getLocale` de `intlayer`.
@@ -681,7 +739,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Paso 14: Gestionar páginas no encontradas (Opcional)
+</Step>
+
+<Step number={14} title="Gestionar páginas no encontradas">
 
 Cuando un usuario visita una página que no existe, puedes mostrar una página de no encontrado personalizada y el prefijo de configuración regional puede afectar la forma en que se activa la página de no encontrado.
 
@@ -757,7 +817,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### (Opcional) Paso 15 : Extraer el contenido de tus componentes
+</Step>
+
+<Step number={15} title="Extraer el contenido de tus componentes" isOptional={true}>
 
 Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.
 
@@ -855,7 +917,9 @@ bun run build # Or bun run dev
 
 ---
 
-### Paso 16: Generar un Sitemap (Opcional)
+</Step>
+
+<Step number={16} title="Generar un Sitemap">
 
 Intlayer viene con un generador de sitemap integrado para ayudarte a crear fácilmente un sitemap para tu aplicación. Maneja las rutas localizadas y agrega los metadatos necesarios para los motores de búsqueda.
 
@@ -930,7 +994,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Paso 17: Configurar TypeScript (Opcional)
+</Step>
+
+<Step number={17} title="Configurar TypeScript">
 
 Intlayer utiliza la ampliación de módulos para obtener los beneficios de TypeScript y fortalecer tu base de código.
 
@@ -961,6 +1027,10 @@ Para ello, puedes añadir las siguientes instrucciones a tu archivo `.gitignore`
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Extensión de VS Code
 
 Para mejorar tu experiencia de desarrollo con Intlayer, puedes instalar la **extensión oficial de Intlayer para VS Code**.

package/docs/es/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: i18n Vanilla JS - Cómo traducir una aplicación Vanilla JS en 2026
-description: Descubre cómo hacer que tu sitio web Vanilla JS sea multilingüe. Sigue la documentación para internacionalizarlo (i18n) y traducirlo.
+updatedAt: 2026-05-31
+title: i18n Vanilla JS - Guía completa para traducir Vanilla JS
+description: La mejor solución para el tamaño del bundle, SEO, rendimiento & mantenibilidad. Haga multilingüe su Vanilla JS sitio web en 2026, traducción LLM, Agent Skills & MCP.
 keywords:
   - Internacionalización
   - Documentación
@@ -57,28 +57,55 @@ history:
 
 <TOC/>
 
-## ¿Qué es Intlayer?
+## ¿Por qué Intlayer en lugar de alternativas?
 
-**Intlayer** es una biblioteca de internacionalización (i18n) innovadora y de código abierto diseñada para simplificar el soporte multilingüe en aplicaciones web modernas.
+En comparación con soluciones principales como `i18next` o `i18n.js`, Intlayer es una solución que viene con optimizaciones integradas como:
 
-Con Intlayer, puedes:
+<AccordionGroup>
+<Accordion header="Soporte completo de Vanilla JS">
 
-- **Gestionar fácilmente las traducciones** usando diccionarios declarativos a nivel de componente.
-- **Localizar dinámicamente metadatos**, rutas y contenido.
-- **Asegurar el soporte de TypeScript** con tipos autogenerados, mejorando el autocompletado y la detección de errores.
-- **Beneficiarte de funciones avanzadas**, como la detección y el cambio dinámico de idioma.
+Intlayer está optimizado para funcionar perfectamente con Vanilla JavaScript al ofrecer **administración de contenido independiente del marco**, **compatibilidad con TypeScript** y todas las funciones necesarias para escalar la internacionalización (i18n).
 
-Esta guía demuestra cómo usar Intlayer en una aplicación de Vanilla JavaScript **sin usar un gestor de paquetes o un empaquetador** (como Vite, Webpack, etc.).
+</Accordion>
+<Accordion header="Tamaño del bundle">
 
-Si tu aplicación usa un empaquetador (como Vite), te recomendamos seguir la [Guía de Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+vanilla.md) en su lugar.
+En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a **reducir el tamaño de su bundle y de sus páginas hasta en un 50%**.
 
-Usando el paquete independiente (standalone), puedes importar Intlayer directamente en tus archivos HTML mediante un único archivo JavaScript, lo que lo hace perfecto para proyectos heredados o sitios estáticos simples.
+</Accordion>
+<Accordion header="Mantenibilidad">
+
+Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente escrito** para garantizar la precisión de su contenido.
+
+</Accordion>
+<Accordion header="Agente de IA">
+
+La ubicación conjunta de contenido **reduce el contexto necesario** para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una **CLI** para comprobar si faltan traducciones,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.
+
+</Accordion>
+<Accordion header="Automatización">
+
+Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su proveedor de IA. Intlayer también ofrece un **compilador** para automatizar la extracción de contenido, así como una [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ayudar a **traducir en segundo plano**.
+
+</Accordion>
+<Accordion header="Actuación">
+
+La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.
+
+</Accordion>
+<Accordion header="Escalando sin ningún desarrollador">
+
+Más que una simple solución i18n, Intlayer proporciona un **[editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Guía paso a paso para configurar Intlayer en una aplicación Vanilla JS
 
-### Paso 1: Instalar dependencias
+<Steps>
+
+<Step number={1} title="Instalar dependencias">
 
 Instala los paquetes necesarios usando npm:
 
@@ -138,7 +165,9 @@ bun x intlayer build
 
 > La exportación de empaquetado (bundling) del CLI `intlayer standalone` produce una compilación optimizada mediante la eliminación de código muerto (tree-shaking) de paquetes no utilizados, idiomas y lógica no esencial (como redireccionamientos o prefijos) específica de su configuración.
 
-### Paso 2: Configuración de tu proyecto
+</Step>
+
+<Step number={2} title="Configuración de tu proyecto">
 
 Crea un archivo de configuración para configurar los idiomas de tu aplicación:
 
@@ -162,7 +191,9 @@ export default config;
 
 > A través de este archivo de configuración, puedes configurar URLs localizadas, redirección de middleware, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, desactivar los registros de Intlayer en la consola y más. Para una lista completa de los parámetros disponibles, consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
-### Paso 3: Importar el paquete en tu HTML
+</Step>
+
+<Step number={3} title="Importar el paquete en tu HTML">
 
 Una vez que hayas generado el paquete `intlayer.js`, puedes importarlo en tu archivo HTML:
 
@@ -186,7 +217,9 @@ Una vez que hayas generado el paquete `intlayer.js`, puedes importarlo en tu arc
 
 El paquete expone `Intlayer` y `VanillaIntlayer` como objetos globales en `window`.
 
-### Paso 4: Inicializar Intlayer en tu punto de entrada
+</Step>
+
+<Step number={4} title="Inicializar Intlayer en tu punto de entrada">
 
 En tu `src/main.js`, llama a `installIntlayer()` **antes** de que se renderice cualquier contenido para que el singleton global de idioma esté listo.
 
@@ -206,7 +239,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### Paso 5: Declarar Tu Contenido
+</Step>
+
+<Step number={5} title="Declarar Tu Contenido">
 
 Crea y gestiona tus declaraciones de contenido para almacenar traducciones:
 
@@ -284,7 +319,9 @@ export default appContent;
 >
 > Para más detalles, consulta la [documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md).
 
-### Paso 6: Usar Intlayer en tu JavaScript
+</Step>
+
+<Step number={6} title="Usar Intlayer en tu JavaScript">
 
 El objeto `window.VanillaIntlayer` proporciona ayudantes de API: `useIntlayer(key, locale?)` devuelve el contenido traducido para una clave dada.
 
@@ -318,7 +355,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Opcional) Paso 7: Cambiar el idioma de tu contenido
+</Step>
+
+<Step number={7} title="Cambiar el idioma de tu contenido" isOptional={true}>
 
 Para cambiar el idioma de tu contenido, usa la función `setLocale` expuesta por `useLocale`.
 
@@ -353,7 +392,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (Opcional) Paso 8: Cambiar los atributos de idioma y dirección HTML
+</Step>
+
+<Step number={8} title="Cambiar los atributos de idioma y dirección HTML" isOptional={true}>
 
 Actualiza los atributos `lang` y `dir` de la etiqueta `<html>` para que coincidan con la configuración regional actual para accesibilidad y SEO.
 
@@ -371,7 +412,9 @@ useLocale({
 });
 ```
 
-### (Opcional) Paso 9: Carga diferida de diccionarios por idioma
+</Step>
+
+<Step number={9} title="Carga diferida de diccionarios por idioma" isOptional={true}>
 
 Si deseas cargar diferidamente diccionarios por idioma, puedes usar `useDictionaryDynamic`. Esto es útil si no deseas incluir todas las traducciones en el archivo inicial `intlayer.js`.
 
@@ -427,3 +470,7 @@ Para más detalles sobre cómo usar la extensión, consulta la [documentación d
 ### Ir más allá
 
 Para ir más allá, puedes implementar el [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) o externalizar tu contenido usando el [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/es/intlayer_with_vite+lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Lit - Cómo traducir una aplicación Lit en 2026
-description: Descubre cómo hacer que tu sitio web Vite y Lit sea multilingüe. Sigue la documentación para internacionalizarlo (i18n) y traducirlo.
+updatedAt: 2026-05-31
+title: i18n Vite + Lit - Guía completa para traducir Lit
+description: La mejor solución para el tamaño del bundle, SEO, rendimiento & mantenibilidad. Haga multilingüe su Vite and Lit aplicación en 2026, traducción LLM, Agent Skills & MCP.
 keywords:
   - Internacionalización
   - Documentación
@@ -57,22 +57,55 @@ history:
 
 <TOC/>
 
-## ¿Qué es Intlayer?
+## ¿Por qué Intlayer en lugar de alternativas?
 
-**Intlayer** es una innovadora biblioteca de internacionalización (i18n) de código abierto diseñada para simplificar el soporte multilingüe en aplicaciones web modernas.
+En comparación con soluciones principales como `lit-localize` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas como:
 
-Con Intlayer, puedes:
+<AccordionGroup>
+<Accordion header="Cobertura total de iluminación">
 
-- **Gestionar fácilmente las traducciones** usando diccionarios declarativos a nivel de componente.
-- **Localizar dinámicamente metadatos**, rutas y contenido.
-- **Asegurar el soporte de TypeScript** con tipos autogenerados, mejorando el autocompletado y la detección de errores.
-- **Beneficiarte de funciones avanzadas**, como la detección y el cambio dinámico de idioma.
+Intlayer está optimizado para funcionar perfectamente con Lit al ofrecer **alcance de contenido a nivel de componente web**, **compatibilidad con TypeScript** y todas las funciones necesarias para escalar la internacionalización (i18n).
+
+</Accordion>
+<Accordion header="Tamaño del bundle">
+
+En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a **reducir el tamaño de su bundle y de sus páginas hasta en un 50%**.
+
+</Accordion>
+<Accordion header="Mantenibilidad">
+
+Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente escrito** para garantizar la precisión de su contenido.
+
+</Accordion>
+<Accordion header="Agente de IA">
+
+La ubicación conjunta de contenido **reduce el contexto necesario** para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una **CLI** para comprobar si faltan traducciones,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.
+
+</Accordion>
+<Accordion header="Automatización">
+
+Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su proveedor de IA. Intlayer también ofrece un **compilador** para automatizar la extracción de contenido, así como una [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ayudar a **traducir en segundo plano**.
+
+</Accordion>
+<Accordion header="Actuación">
+
+La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.
+
+</Accordion>
+<Accordion header="Escalando sin ningún desarrollador">
+
+Más que una simple solución i18n, Intlayer proporciona un **[editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Guía paso a paso para configurar Intlayer en una aplicación Vite y Lit
 
-### Paso 1: Instalar dependencias
+<Steps>
+
+<Step number={1} title="Instalar dependencias">
 
 Instala los paquetes necesarios usando npm:
 
@@ -110,7 +143,9 @@ bun x intlayer init
 - **vite-intlayer**
   Incluye el complemento Vite para integrar Intlayer con el [empaquetador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como middleware para detectar el idioma preferido del usuario, gestionar cookies y manejar la redirección de URL.
 
-### Paso 2: Configuración de tu proyecto
+</Step>
+
+<Step number={2} title="Configuración de tu proyecto">
 
 Crea un archivo de configuración para configurar los idiomas de tu aplicación:
 
@@ -134,7 +169,9 @@ export default config;
 
 > A través de este archivo de configuración, puedes configurar URLs localizadas, redirección de middleware, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, desactivar los registros de Intlayer en la consola y más. Para obtener una lista completa de los parámetros disponibles, consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
-### Paso 3: Integrar Intlayer en tu configuración de Vite
+</Step>
+
+<Step number={3} title="Integrar Intlayer en tu configuración de Vite">
 
 Agrega el complemento intlayer en tu configuración.
 
@@ -150,7 +187,9 @@ export default defineConfig({
 
 > El complemento Vite `intlayer()` se utiliza para integrar Intlayer con Vite. Asegura la construcción de archivos de declaración de contenido y los monitorea en modo de desarrollo. Define variables de entorno de Intlayer dentro de la aplicación Vite. Además, proporciona alias para optimizar el rendimiento.
 
-### Paso 4: Inicializar Intlayer en tu punto de entrada
+</Step>
+
+<Step number={4} title="Inicializar Intlayer en tu punto de entrada">
 
 Llama a `installIntlayer()` **antes** de que se registren los elementos personalizados para que el singleton de idioma global esté listo cuando se conecte el primer elemento.
 
@@ -175,7 +214,9 @@ installIntlayerMarkdown();
 import "./my-element.js";
 ```
 
-### Paso 5: Declarar tu contenido
+</Step>
+
+<Step number={5} title="Declarar tu contenido">
 
 Crea y gestiona tus declaraciones de contenido para almacenar traducciones:
 
@@ -261,7 +302,9 @@ export default appContent;
 >
 > Para más detalles, consulta la [documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md).
 
-### Paso 6: Utilizar Intlayer en tu LitElement
+</Step>
+
+<Step number={6} title="Utilizar Intlayer en tu LitElement">
 
 Usa `useIntlayer` dentro de un `LitElement`. Devuelve un proxy `ReactiveController` que activa automáticamente los re-renderizados cada vez que cambia el idioma activo, sin necesidad de configuración adicional.
 
@@ -306,7 +349,9 @@ export class MyElement extends LitElement {
 > html`<img alt=${String(content.viteLogo)} />`;
 > ```
 
-### (Opcional) Paso 7: Cambiar el idioma de tu contenido
+</Step>
+
+<Step number={7} title="Cambiar el idioma de tu contenido" isOptional={true}>
 
 Para cambiar el idioma de tu contenido, usa el método `setLocale` expuesto por el controlador `useLocale`.
 
@@ -341,7 +386,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Opcional) Paso 8: Renderizar contenido Markdown y HTML
+</Step>
+
+<Step number={8} title="Renderizar contenido Markdown y HTML" isOptional={true}>
 
 Intlayer admite declaraciones de contenido `md()` y `html()`. En Lit, la salida compilada se inyecta como HTML sin procesar a través de la directiva `unsafeHTML`.
 
@@ -391,7 +438,9 @@ export class MyElement extends LitElement {
 > [!TIP]
 > `String(content.editNote)` llama a `toString()` en el `IntlayerNode`, que devuelve la cadena Markdown sin procesar. Pásala a `compileMarkdown` para obtener una cadena HTML, luego renderízala con la directiva `unsafeHTML` de Lit.
 
-### (Opcional) Paso 9: Agregar enrutamiento localizado a tu aplicación
+</Step>
+
+<Step number={9} title="Agregar enrutamiento por localeizado a tu aplicación" isOptional={true}>
 
 Para crear rutas únicas para cada idioma (útil para SEO), puedes usar un enrutador del lado del cliente junto con los ayudantes `localeMap` / `localeFlatMap` de Intlayer, y el complemento Vite `intlayerProxy` para la detección de idioma del lado del servidor.
 
@@ -411,7 +460,9 @@ export default defineConfig({
 });
 ```
 
-### (Opcional) Paso 10: Cambiar la URL cuando cambia el idioma
+</Step>
+
+<Step number={10} title="Cambiar la URL cuando cambia el idioma" isOptional={true}>
 
 Para actualizar la URL del navegador cuando cambia el idioma, usa `useRewriteURL` junto con el selector de idioma:
 
@@ -449,7 +500,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Opcional) Paso 11: Cambiar los atributos de idioma y dirección HTML
+</Step>
+
+<Step number={11} title="Cambiar los atributos de idioma y dirección HTML" isOptional={true}>
 
 Actualiza los atributos `lang` y `dir` de la etiqueta `<html>` para que coincidan con el idioma actual para fines de accesibilidad y SEO.
 
@@ -474,7 +527,9 @@ export class MyElement extends LitElement {
 }
 ```
 
-### (Opcional) Paso 12: Extraer el contenido de tus componentes
+</Step>
+
+<Step number={12} title="Extraer el contenido de tus componentes" isOptional={true}>
 
 Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.
 
@@ -636,3 +691,7 @@ Para obtener más detalles sobre cómo usar la extensión, consulta la [document
 ### Ir más lejos
 
 Para ir más lejos, puedes implementar el [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) o externalizar tu contenido usando el [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md).
+
+</Step>
+
+</Steps>