Triggers on "bilingual", "ES/EN toggle", "bilingual document", "dual language", "español e inglés", "agregar idioma", "make it bilingual". Implements the JM Labs bilingual pattern — [data-l="es"]/[data-l="en"] toggle via html[lang] attribute. INDEPENDENT skill but ALWAYS orchestrated by jmlabs-corporate-doc when brand context is active.
From jm-adknpx claudepluginhub javimontano/jm-adk-alfaThis skill is limited to using the following tools:
agents/guardian.mdagents/lead.mdagents/specialist.mdagents/support.mdevals/evals.jsonknowledge/body-of-knowledge.mdknowledge/knowledge-graph.mdprompts/meta.mdprompts/primary.mdprompts/variations/deep.mdprompts/variations/quick.mdreferences/bilingual-patterns.mdtemplates/output.docx.mdtemplates/output.htmlTL;DR: Implement the JM Labs bilingual system —
[data-l]attributes +html[lang]toggle — in any HTML document. Works standalone or when called byjmlabs-corporate-doc.
Principio Rector: El contenido bilingüe no es traducción — es presentación paralela. El documento existe simultáneamente en ES y EN, y el usuario elige cuál leer. El brand style orquesta cuándo se activa esta skill.
Activar cuando:
jmlabs-corporate-doc lo invoca con bilingual=true [EXPLICIT desde brand-config.json]Modo orquestado (lo normal):
jmlabs-corporate-doc activa bilingual-doc automáticamente. No requiere invocación manual del usuario.
Modo standalone: El usuario puede invocar directamente para añadir bilingüismo a cualquier HTML existente.
NO activar cuando:
/* Default: mostrar español */
[data-l] { display: none; }
[data-l="es"] { display: inline; }
/* Con html[lang="en"]: mostrar inglés */
html[lang="en"] [data-l="es"] { display: none; }
html[lang="en"] [data-l="en"] { display: inline; }
/* Variantes block (párrafos, divs) */
[data-lb="es"] { display: block; }
[data-lb="en"] { display: none; }
html[lang="en"] [data-lb="es"] { display: none; }
html[lang="en"] [data-lb="en"] { display: block; }
function toggleLang() {
const h = document.documentElement;
h.lang = h.lang === 'es' ? 'en' : 'es';
}
lang) on Root<!-- Default: español -->
<html lang="es" class="dark">
<!-- Después de toggle: inglés -->
<!-- html[lang="en"] activa las reglas CSS -->
<h2>
<span data-l="es">El problema está en el método</span>
<span data-l="en">The problem is in the method</span>
</h2>
<p style="font-size:.875rem;">
<span data-l="es">MetodologIA transforma la forma en que las organizaciones adoptan IA.</span>
<span data-l="en">MetodologIA transforms how organizations adopt AI.</span>
</p>
<!-- Cuando ES y EN tienen estructura HTML diferente -->
<div data-lb="es">
<p>Texto en español con <strong>énfasis</strong> en diferentes palabras.</p>
<ul>
<li>Punto uno en español</li>
<li>Punto dos en español</li>
</ul>
</div>
<div data-lb="en">
<p>English text with <strong>emphasis</strong> on different words.</p>
<ul>
<li>Point one in English</li>
<li>Point two in English</li>
</ul>
</div>
<!-- In top nav bar -->
<button class="jml-nav-btn" onclick="toggleLang()" id="lang-btn">ES/EN</button>
<div class="jml-sidenav">
<a href="#problem">
<span class="dot"></span>
<span class="label">
<span data-l="es">El Problema</span>
<span data-l="en">The Problem</span>
</span>
</a>
<a href="#solution">
<span class="dot"></span>
<span class="label">
<span data-l="es">La Solución</span>
<span data-l="en">The Solution</span>
</span>
</a>
</div>
<a href="#market">
<span class="num">3</span>
<span data-l="es">Mercado — 10 verticales</span>
<span data-l="en">Market — 10 verticals</span>
</a>
// Actualizar título del documento al cambiar idioma
function toggleLang() {
const h = document.documentElement;
h.lang = h.lang === 'es' ? 'en' : 'es';
document.title = h.lang === 'es'
? '{TITULO_ES} | JM Labs'
: '{TITLE_EN} | JM Labs';
}
Cuando el usuario aporta contenido en un solo idioma, seguir este proceso:
1. Identificar todos los nodos de texto visibles en el HTML
2. Para cada nodo:
- Si es inline: envolver con <span data-l="es">original</span>
y añadir <span data-l="en">traducción</span>
- Si es bloque: usar data-lb="es" / data-lb="en"
3. Añadir toggle button al nav
4. Verificar: NO dejar texto "desnudo" (sin data-l) excepto: números, símbolos, marcas
Mismo proceso. Español es siempre el default (html lang="es").
<!-- Números, símbolos, URLs, emails, nombres propios — sin atributo -->
<div class="mv">557</div> <!-- número -->
<span>JM Labs</span> <!-- marca -->
<span>©2026</span> <!-- símbolo -->
contacto@jmlabs.io <!-- email -->
<span class="src">WEF 2026</span><!-- source chip -->
<!-- Usar data-lb en lugar de data-l -->
<div data-lb="es">
<h3>La metodología que faltaba</h3>
<p>Durante años, la promesa de la IA fue enorme — pero la realidad decepcionante.
No era falla de las herramientas, sino del <strong>método</strong>.</p>
</div>
<div data-lb="en">
<h3>The missing methodology</h3>
<p>For years, AI's promise was enormous — but reality disappointing.
Not a tool failure, but a <strong>method</strong> failure.</p>
</div>
<a href="mailto:contacto@jmlabs.io" class="cta">
<span data-l="es">Agendar reunión →</span>
<span data-l="en">Schedule meeting →</span>
</a>
<input placeholder="" data-placeholder-es="Tu nombre" data-placeholder-en="Your name">
<script>
// Actualizar placeholders al cambiar idioma
function updatePlaceholders() {
const lang = document.documentElement.lang;
document.querySelectorAll('[data-placeholder-es]').forEach(el => {
el.placeholder = lang === 'es' ? el.dataset.placeholderEs : el.dataset.placeholderEn;
});
}
function toggleLang() {
const h = document.documentElement;
h.lang = h.lang === 'es' ? 'en' : 'es';
updatePlaceholders();
}
</script>
<head>
<!-- hreflang para SEO bilingüe -->
<link rel="alternate" hreflang="es" href="{URL}?lang=es">
<link rel="alternate" hreflang="en" href="{URL}?lang=en">
</head>
html[lang="es"] como default en el root elementES/EN en top nav[data-l] o [data-lb]document.title actualizado en toggleLang()data-l en un lugar y texto hardcodeado en otrobrand/jmlabs/corporate-template.cssdata-l="pt" pero requiere ampliar CSS| Archivo | Cargar cuando |
|---|---|
brand/jmlabs/brand-config.json | Cuando se orquesta desde jmlabs-corporate-doc (cargado por el orquestador) |
references/bilingual-patterns.md | Para ejemplos complejos: tablas bilingües, slides completos, modales |
Skill orquestadora: jmlabs-corporate-doc — esta skill es orquestada, no orquestadora.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.