aiwithcarlos · June 28, 2026 00:46
diff --git a/carousel-canva.html b/carousel-canva.html
 <!DOCTYPE html>
 <html lang="es">
 <head>
 <meta charset="UTF-8">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

 body { background: white; font-family: 'IBM Plex Sans', sans-serif; }

 .slide {
  width: 1080px;
  height: 1350px;
  background: white;
  padding: 88px 96px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
 }

 .top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: #1E40AF;
 }

 .slide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 56px;
 }
 .brand {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.12em;
  text-transform: uppercase;
 }
 .slide-counter {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  color: #cbd5e1;
 }

 .rule-block {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 36px;
 }
 .rule-bar {
  width: 6px;
  background: #1E40AF;
  flex-shrink: 0;
  border-radius: 4px;
  align-self: stretch;
  min-height: 40px;
 }
 .rule-content { flex: 1; }
 .rule-label {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1E40AF;
  margin-bottom: 8px;
  font-family: 'IBM Plex Mono', monospace;
 }
 .rule-title {
  font-size: 30px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 10px;
 }
 .rule-desc {
  font-size: 24px;
  color: #475569;
  line-height: 1.55;
 }

 .code {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 12px;
  padding: 20px 28px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 21px;
  line-height: 1.65;
  color: #1e3a5f;
  margin: 16px 0;
  white-space: pre;
 }
 .c-key   { color: #1D4ED8; font-weight: 600; }
 .c-str   { color: #047857; }
 .c-comment { color: #94a3b8; }

 .pill {
  display: inline-block;
  padding: 4px 18px;
  border-radius: 100px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 19px;
  font-weight: 600;
  margin: 4px 6px 4px 0;
 }
 .pill-blue { background: #DBEAFE; color: #1D4ED8; }
 .pill-slate { background: #F1F5F9; color: #334155; border: 1px solid #e2e8f0; }

 .section-title {
  font-size: 44px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
 }
 .section-sub {
  font-size: 24px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 40px;
 }

 /* COVER */
 .cover-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1D4ED8;
  margin-bottom: 28px;
 }
 .cover-rule { width: 96px; height: 8px; background: #1E40AF; border-radius: 4px; margin-bottom: 36px; }
 .cover-h1 {
  font-size: 72px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 32px;
 }
 .cover-h1 span { color: #1E40AF; }
 .cover-desc {
  font-size: 26px;
  color: #64748b;
  line-height: 1.6;
  max-width: 760px;
  margin-bottom: 48px;
 }
 .cover-tags { display: flex; flex-wrap: wrap; gap: 12px; }

 /* TREE */
 .tree {
  background: #0f172a;
  border-radius: 16px;
  padding: 28px 36px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 21px;
  line-height: 1.7;
  color: #94a3b8;
  margin: 16px 0;
 }
 .t-dir  { color: #60a5fa; }
 .t-file { color: #e2e8f0; }
 .t-hl   { color: #34d399; font-weight: 600; }
 .t-note { color: #475569; }

 /* ANATOMY */
 .anatomy { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
 .anatomy-row { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
 .anatomy-key {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  font-weight: 600;
  color: #1D4ED8;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  padding: 6px 16px;
 }
 .anatomy-val { font-size: 22px; color: #475569; line-height: 1.45; padding-top: 8px; }
 .anatomy-val strong { color: #0f172a; font-weight: 600; }

 /* TRIGGERS */
 .trigger-list { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
 .trigger-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 20px;
 }
 .trigger-icon { font-size: 26px; line-height: 1; padding-top: 2px; }
 .trigger-text { font-size: 22px; color: #334155; line-height: 1.45; }
 .trigger-text strong { color: #1D4ED8; font-weight: 600; font-family: 'IBM Plex Mono', monospace; font-size: 20px; }

 /* DO DONT */
 .do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
 .col-do, .col-dont { border-radius: 16px; padding: 24px 28px; }
 .col-do { background: #F0FDF4; border: 1px solid #BBF7D0; }
 .col-dont { background: #FFF1F2; border: 1px solid #FECDD3; }
 .col-head {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-family: 'IBM Plex Mono', monospace;
 }
 .col-do .col-head { color: #16a34a; }
 .col-dont .col-head { color: #dc2626; }
 .col-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 21px;
  color: #334155;
  line-height: 1.45;
  margin-bottom: 14px;
 }
 .col-item:last-child { margin-bottom: 0; }
 .col-icon { flex-shrink: 0; font-size: 20px; margin-top: 2px; }

 /* FOOTER */
 .slide-footer {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #F1F5F9;
 }
 .footer-brand { font-family: 'IBM Plex Mono', monospace; font-size: 18px; color: #cbd5e1; letter-spacing: 0.08em; }
 .footer-dots { display: flex; gap: 8px; }
 .footer-dot { width: 10px; height: 10px; border-radius: 50%; background: #E2E8F0; }
 .footer-dot.active { background: #1E40AF; }

 /* CTA */
 .cta-box {
  background: #1E40AF;
  border-radius: 24px;
  padding: 56px 64px;
  text-align: center;
  margin-top: auto;
 }
 .cta-handle { font-family: 'IBM Plex Mono', monospace; font-size: 44px; font-weight: 600; color: white; margin-bottom: 16px; }
 .cta-text { font-size: 24px; color: #BFDBFE; line-height: 1.55; }
 .cta-action {
  display: inline-block;
  margin-top: 28px;
  background: white;
  color: #1E40AF;
  font-weight: 700;
  font-size: 22px;
  padding: 14px 36px;
  border-radius: 100px;
 }

 .cover-flex { flex: 1; display: flex; flex-direction: column; justify-content: center; }
 .cta-flex { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
 .divider { width: 100%; height: 1px; background: #E2E8F0; margin: 14px 0; }
 .golden-tip {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 12px;
  padding: 18px 24px;
  font-size: 21px;
  color: #7c3f07;
  line-height: 1.5;
  margin-top: 16px;
 }
 </style>
 </head>
 <body>

 <!-- SLIDE 1: COVER -->
 <div class="slide" data-document-role="page" data-label="Cover">
  <div class="top-bar"></div>
  <div class="slide-header">
    <span class="brand">@carlosmedina.io</span>
    <span class="slide-counter">01 / 08</span>
  </div>
  <div class="cover-flex">
    <p class="cover-eyebrow">Claude Code · Cheat Sheet</p>
    <div class="cover-rule"></div>
    <h1 class="cover-h1">Cómo escribir<br><span style="color:#1E40AF">Skills</span> que Claude<br>entiende bien</h1>
    <p class="cover-desc">La guía práctica para crear SKILL.md files que Claude Code interpreta correctamente — con las reglas que más importan.</p>
    <div class="cover-tags">
      <span class="pill pill-blue">SKILL.md</span>
      <span class="pill pill-blue">Claude Code</span>
      <span class="pill pill-slate">Triggers</span>
      <span class="pill pill-slate">Description</span>
    </div>
  </div>
  <div class="slide-footer">
    <span class="footer-brand">@carlosmedina.io</span>
    <div class="footer-dots">
      <div class="footer-dot active"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div>
    </div>
  </div>
 </div>

 <!-- SLIDE 2: QUÉ ES UN SKILL -->
 <div class="slide" data-document-role="page" data-label="Que es un Skill">
  <div class="top-bar"></div>
  <div class="slide-header">
    <span class="brand">@carlosmedina.io</span>
    <span class="slide-counter">02 / 08</span>
  </div>
  <div class="section-title">¿Qué es un Skill?</div>
  <div class="section-sub">La pieza de contexto que Claude lee antes de actuar.</div>
  <div class="rule-block">
    <div class="rule-bar"></div>
    <div class="rule-content">
      <div class="rule-label">Definición</div>
      <div class="rule-title">Un archivo SKILL.md que le dice a Claude cómo hacer algo</div>
      <div class="rule-desc">Claude Code lee el skill antes de ejecutar una tarea. Es tu forma de inyectar conocimiento específico del proyecto — librerías, convenciones, restricciones.</div>
    </div>
  </div>
  <div class="code"><span class="c-comment"># Dónde viven los skills</span>
 <span class="c-key">/mnt/skills/</span>
  <span class="c-key">public/</span>    <span class="c-comment"># skills globales (para todos)</span>
    <span class="c-str">pdf/SKILL.md</span>
    <span class="c-str">docx/SKILL.md</span>
  <span class="c-key">user/</span>      <span class="c-comment"># skills personales del usuario</span>
    <span class="c-str">imagegen/SKILL.md</span></div>
  <div class="rule-block" style="margin-top:20px;">
    <div class="rule-bar"></div>
    <div class="rule-content">
      <div class="rule-label">Cuándo se activa</div>
      <div class="rule-desc">Claude escanea los skills disponibles y decide cuáles leer según la tarea. <strong>Tú no lo invocas manualmente</strong> — Claude lo hace solo si el skill está bien descrito.</div>
    </div>
  </div>
  <div class="slide-footer">
    <span class="footer-brand">@carlosmedina.io</span>
    <div class="footer-dots">
      <div class="footer-dot"></div><div class="footer-dot active"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div>
    </div>
  </div>
 </div>

 <!-- SLIDE 3: ESTRUCTURA -->
 <div class="slide" data-document-role="page" data-label="Estructura minima">
  <div class="top-bar"></div>
  <div class="slide-header">
    <span class="brand">@carlosmedina.io</span>
    <span class="slide-counter">03 / 08</span>
  </div>
  <div class="section-title">Estructura mínima</div>
  <div class="section-sub">Lo que necesita cada skill folder.</div>
  <div class="tree"><span class="t-dir">my-skill/</span>
 ├── <span class="t-hl">SKILL.md</span>          <span class="t-note">← requerido, el cerebro del skill</span>
 ├── <span class="t-file">example.py</span>       <span class="t-note">← ejemplos reales (opcional)</span>
 ├── <span class="t-file">template.html</span>    <span class="t-note">← plantillas (opcional)</span>
 └── <span class="t-file">LICENSE.txt</span>      <span class="t-note">← si lo compartes</span></div>
  <div class="anatomy">
    <div class="anatomy-row">
      <div class="anatomy-key">name:</div>
      <div class="anatomy-val"><strong>Nombre corto</strong> del skill — aparece en logs</div>
    </div>
    <div class="anatomy-row">
      <div class="anatomy-key">description:</div>
      <div class="anatomy-val"><strong>Cuándo usarlo</strong> — Claude lo lee para decidir</div>
    </div>
    <div class="anatomy-row">
      <div class="anatomy-key">location:</div>
      <div class="anatomy-val">Ruta al <strong>SKILL.md</strong> desde la raíz del proyecto</div>
    </div>
  </div>
  <div class="code" style="margin-top:24px;"><span class="c-comment">---</span>
 <span class="c-key">name</span>: pdf-export
 <span class="c-key">description</span>: Usar cuando el usuario quiere crear
  o manipular archivos PDF desde Python.
 <span class="c-key">location</span>: /mnt/skills/public/pdf/SKILL.md
 <span class="c-comment">---</span></div>
  <div class="slide-footer">
    <span class="footer-brand">@carlosmedina.io</span>
    <div class="footer-dots">
      <div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot active"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div>
    </div>
  </div>
 </div>

 <!-- SLIDE 4: ANATOMÍA -->
 <div class="slide" data-document-role="page" data-label="Anatomia del SKILL.md">
  <div class="top-bar"></div>
  <div class="slide-header">
    <span class="brand">@carlosmedina.io</span>
    <span class="slide-counter">04 / 08</span>
  </div>
  <div class="section-title">Anatomía del SKILL.md</div>
  <div class="section-sub">Las secciones que Claude espera encontrar.</div>
  <div class="rule-block">
    <div class="rule-bar"></div>
    <div class="rule-content">
      <div class="rule-label">Frontmatter YAML</div>
      <div class="rule-desc">Va al inicio entre <code style="background:#EFF6FF;padding:2px 10px;border-radius:6px;font-family:'IBM Plex Mono',monospace;font-size:19px;">---</code>. Le da metadata a Claude para decidir si leer el skill.</div>
    </div>
  </div>
  <div class="rule-block">
    <div class="rule-bar"></div>
    <div class="rule-content">
      <div class="rule-label">Cuerpo Markdown</div>
      <div class="rule-desc">Instrucciones, reglas, ejemplos de código, comandos exactos a correr, y qué <strong>no hacer</strong>.</div>
    </div>
  </div>
  <div class="code"><span class="c-comment">---</span>
 <span class="c-key">name</span>: <span class="c-str">mi-skill</span>
 <span class="c-key">description</span>: <span class="c-str">Cuándo y por qué usarlo</span>
 <span class="c-key">license</span>: <span class="c-str">Términos de uso</span>
 <span class="c-comment">---</span>

 <span class="c-key"># Nombre del Skill</span>

 <span class="c-comment">## Cuándo usar este skill</span>
 ...triggers y contexto...

 <span class="c-comment">## Setup requerido</span>
 pip install X --break-system-packages

 <span class="c-comment">## Reglas críticas</span>
 - NUNCA hacer X
 - SIEMPRE usar Y para Z</div>
  <div class="slide-footer">
    <span class="footer-brand">@carlosmedina.io</span>
    <div class="footer-dots">
      <div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot active"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div>
    </div>
  </div>
 </div>

 <!-- SLIDE 5: TRIGGERS -->
 <div class="slide" data-document-role="page" data-label="El campo description">
  <div class="top-bar"></div>
  <div class="slide-header">
    <span class="brand">@carlosmedina.io</span>
    <span class="slide-counter">05 / 08</span>
  </div>
  <div class="section-title">El campo <span style="color:#1E40AF;font-family:'IBM Plex Mono',monospace;">description</span></div>
  <div class="section-sub">La única razón por la que Claude decide leer (o ignorar) tu skill.</div>
  <div class="trigger-list">
    <div class="trigger-item">
      <div class="trigger-icon">🎯</div>
      <div class="trigger-text">Menciona <strong>el tipo de archivo o tarea</strong> explícitamente: "Usar cuando el usuario quiere crear archivos .pdf" — no "para manejo de documentos".</div>
    </div>
    <div class="trigger-item">
      <div class="trigger-icon">🔑</div>
      <div class="trigger-text">Incluye las <strong>palabras clave que el usuario usaría</strong>: "PDF, exportar, combinar, dividir" — Claude hace matching semántico.</div>
    </div>
    <div class="trigger-item">
      <div class="trigger-icon">⚡</div>
      <div class="trigger-text">Usa verbos de acción: <strong>crear, leer, editar, convertir, extraer</strong> — no sustantivos abstractos como "gestión".</div>
    </div>
    <div class="trigger-item">
      <div class="trigger-icon">🚫</div>
      <div class="trigger-text">Define el <strong>límite del skill</strong>: "No usar para PDFs que requieren OCR" — evita activaciones incorrectas.</div>
    </div>
  </div>
  <div class="slide-footer">
    <span class="footer-brand">@carlosmedina.io</span>
    <div class="footer-dots">
      <div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot active"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div>
    </div>
  </div>
 </div>

 <!-- SLIDE 6: DO'S -->
 <div class="slide" data-document-role="page" data-label="Reglas del cuerpo">
  <div class="top-bar"></div>
  <div class="slide-header">
    <span class="brand">@carlosmedina.io</span>
    <span class="slide-counter">06 / 08</span>
  </div>
  <div class="section-title">Reglas del cuerpo ✅</div>
  <div class="section-sub">Qué incluir para que Claude ejecute bien.</div>
  <div class="rule-block">
    <div class="rule-bar" style="background:#16a34a;"></div>
    <div class="rule-content">
      <div class="rule-label" style="color:#16a34a;">Comandos exactos, no descripciones</div>
      <div class="code"><span class="c-comment"># ✅ Así:</span>
 pip install reportlab --break-system-packages

 <span class="c-comment"># ❌ No así:</span>
 <span class="c-comment"># "instalar la librería de PDFs"</span></div>
    </div>
  </div>
  <div class="rule-block">
    <div class="rule-bar" style="background:#16a34a;"></div>
    <div class="rule-content">
      <div class="rule-label" style="color:#16a34a;">Rutas de output siempre explícitas</div>
      <div class="rule-desc">Dile exactamente <em>dónde</em> guardar los archivos generados: <span class="pill pill-blue" style="font-size:18px;">/mnt/user-data/outputs/</span> para entregables finales.</div>
    </div>
  </div>
  <div class="rule-block">
    <div class="rule-bar" style="background:#16a34a;"></div>
    <div class="rule-content">
      <div class="rule-label" style="color:#16a34a;">Sección "NUNCA / SIEMPRE" al final</div>
      <div class="rule-desc">Las restricciones absolutas en su propia sección. Claude les da mayor peso cuando están separadas del texto general.</div>
    </div>
  </div>
  <div class="rule-block">
    <div class="rule-bar" style="background:#16a34a;"></div>
    <div class="rule-content">
      <div class="rule-label" style="color:#16a34a;">Ejemplos reales de código funcional</div>
      <div class="rule-desc">Un snippet que funcione vale más que tres párrafos de explicación. Claude reutiliza el patrón exacto.</div>
    </div>
  </div>
  <div class="slide-footer">
    <span class="footer-brand">@carlosmedina.io</span>
    <div class="footer-dots">
      <div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot active"></div><div class="footer-dot"></div><div class="footer-dot"></div>
    </div>
  </div>
 </div>

 <!-- SLIDE 7: DON'TS -->
 <div class="slide" data-document-role="page" data-label="Lo que mata la interpretacion">
  <div class="top-bar"></div>
  <div class="slide-header">
    <span class="brand">@carlosmedina.io</span>
    <span class="slide-counter">07 / 08</span>
  </div>
  <div class="section-title">Lo que mata la interpretación ❌</div>
  <div class="section-sub">Errores que hacen que Claude ignore o malinterprete tu skill.</div>
  <div class="do-dont">
    <div class="col-do">
      <div class="col-head">✅ Hacer</div>
      <div class="col-item"><span class="col-icon">▸</span><span>Description en presente activo: "Usar cuando…"</span></div>
      <div class="col-item"><span class="col-icon">▸</span><span>Mencionar extensiones de archivo: .pdf .docx .xlsx</span></div>
      <div class="col-item"><span class="col-icon">▸</span><span>Definir qué no cubre el skill</span></div>
      <div class="col-item"><span class="col-icon">▸</span><span>Comandos de instalación completos con flags</span></div>
      <div class="col-item"><span class="col-icon">▸</span><span>Un ejemplo mínimo funcional por caso</span></div>
    </div>
    <div class="col-dont">
      <div class="col-head">❌ Evitar</div>
      <div class="col-item"><span class="col-icon">▸</span><span>Descriptions vagas: "para trabajar con documentos"</span></div>
      <div class="col-item"><span class="col-icon">▸</span><span>Instrucciones contradictorias en el mismo skill</span></div>
      <div class="col-item"><span class="col-icon">▸</span><span>Skills que cubren demasiados casos distintos</span></div>
      <div class="col-item"><span class="col-icon">▸</span><span>Asumir que Claude conoce tus convenciones</span></div>
      <div class="col-item"><span class="col-icon">▸</span><span>Dejar el frontmatter sin el campo description</span></div>
    </div>
  </div>
  <div class="golden-tip">
    <strong>Regla de oro:</strong> Si tú mismo no puedes leer el description y decidir en 5 segundos si el skill aplica — Claude tampoco lo sabrá.
  </div>
  <div class="slide-footer">
    <span class="footer-brand">@carlosmedina.io</span>
    <div class="footer-dots">
      <div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot active"></div><div class="footer-dot"></div>
    </div>
  </div>
 </div>

 <!-- SLIDE 8: CTA -->
 <div class="slide" data-document-role="page" data-label="Resumen y CTA">
  <div class="top-bar"></div>
  <div class="slide-header">
    <span class="brand">@carlosmedina.io</span>
    <span class="slide-counter">08 / 08</span>
  </div>
  <div class="cta-flex">
    <div>
      <div class="section-title" style="margin-bottom:16px;">El resumen en 4 líneas</div>
      <div class="rule-block"><div class="rule-bar"></div><div class="rule-content"><div class="rule-desc">El <strong>description</strong> es lo único que Claude lee para decidir si abre tu skill.</div></div></div>
      <div class="rule-block"><div class="rule-bar"></div><div class="rule-content"><div class="rule-desc">El <strong>cuerpo</strong> debe tener comandos exactos, no intenciones vagas.</div></div></div>
      <div class="rule-block"><div class="rule-bar"></div><div class="rule-content"><div class="rule-desc">Un skill <strong>enfocado</strong> en una sola tarea funciona mejor que uno genérico.</div></div></div>
      <div class="rule-block"><div class="rule-bar"></div><div class="rule-content"><div class="rule-desc"><strong>Ejemplos reales de código</strong> &gt; explicaciones en prosa.</div></div></div>
    </div>
    <div class="cta-box">
      <div class="cta-handle">@carlosmedina.io</div>
      <div class="cta-text">Más guías de Claude Code, AWS y herramientas de IA para developers.<br>Sígueme para la próxima cheat sheet.</div>
      <div class="cta-action">→ Seguir en Instagram</div>
    </div>
  </div>
  <div class="slide-footer">
    <span class="footer-brand">@carlosmedina.io</span>
    <div class="footer-dots">
      <div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot"></div><div class="footer-dot active"></div>
    </div>
  </div>
 </div>

 </body>
 </html>
No results found