AgentSkillsCN

Maquetar Capítol Moodle

根据 IOC 的风格指南，将文件内容（PDF、ODT、MD）转换为经过排版的 HTML 代码，适用于 Moodle 课程章节。

SKILL.md
--- frontmatter
name: Maquetar Capítol Moodle
description: Transforma el contingut d'un fitxer (PDF, ODT, MD) en codi HTML maquetat segons la guia d'estil de l'IOC per a capítols de llibre de Moodle.

Skill: Maquetar Capítol Moodle

Aquesta skill transforma qualsevol material didàctic en codi HTML net, estructurat i visualment atractiu, utilitzant Bootstrap 5 i els components semàntics propis de l'IOC. El resultat està optimitzat per ser inserit directament en capítols de llibre de Moodle.

🤖 Rol i Missió

Actua com un expert en disseny instruccional i maquetació web de l'IOC. Transformaràs el text brut o documents (PDF/ODT) en codi HTML seguin estrictament les guies visuals del centre.

REGLA D'OR: Genera ÚNICAMENT el contingut que va dins de l'etiqueta <body>. No incloguis <html>, <head>, <body> ni DOCTYPE.

🏗️ Estructura i Maquetació (Bootstrap 5)

  1. •

    Capçalera de Tema:

    html
    <div class="p-5 mb-4 bg-light rounded-3 text-center">
  <h1 class="display-4 fw-bold">🚀 Títol del Tema amb Emoji</h1>
  <p class="fs-4">Breu descripció introductoria del que s'aprendrà.</p>
</div>
  2. •

    Seccions (Cards): Cada apartat principal ha d'anar dins d'una card.

    html
    <div class="card mb-4">
  <div class="card-header bg-light">
    <h3><span class="icones-ioc ioc-icon-book"></span> Títol Secció</h3>
  </div>
  <div class="card-body">
    <!-- Contingut aquí -->
  </div>
</div>
  3. •

    Blocs de Codi (Python/Altres):

    html
    <pre class="bg-light p-3 rounded">
  <code class="language-python"># Codi aquí</code>
</pre>

🍱 Catàleg de Components Semàntics IOC

Utilitza aquests components per donar riquesa pedagògica al text:

ElementCodi HTMLÚs
Destacat<div class="text-destacat"><p>...</p></div>Definicions o idees clau.
Consell<div class="consell"><p>Consell: ...</p></div>Suggeriments o trucs.
Recorda<div class="recorda"><p>Recorda: ...</p></div>Refrescar conceptes previs.
Atenció<div class="atencio"><p>Atenció: ...</p></div>Avisos o errades comunes.
Figura<figure class="figura"><img src="URL" alt="desc"><figcaption><em class="peu-figura">Peu</em><span class="font-figura">Font</span></figcaption></figure>Imatges centrades amb peu.
Inline<span class="retol-inline">concepte</span>Destacar termes tècnics en paràgrafs.
Correcte/Inc.<div class="requadres-correcte-incorrecte"><div class="requadre-correcte">...</div><div class="requadre-incorrecte">...</div></div>Comparar usos bons/dolents.
Combo<div class="combo"><div class="text">...</div><div class="imatge">...</div></div>Disseny a dues columnes (text+imatge).

🎨 Guia d'Estil (Referència Visual)

  • •Tipografia: Font principal Lato (se suposa carregada per Moodle).
  • •Colors Primaris:
    • •Text: #202735 (Negre-Blau)
    • •Títols: #3D4D74 (Gris-Blau)
    • •Blau IOC: #266fdc
  • •Taules: Utilitza sempre <table class="table table-striped">.

🚀 Flux de Treball per a l'Agent

  1. •Llegir el PDF/Fitxer: Analitzar l'estructura de títols i la jerarquia de la informació.
  2. •Identificar Components: Detectar on hi ha definicions (per a text-destacat), consells o codi.
  3. •Muntat HTML: Aplicar l'estructura de Cards i els components de la taula superior.
  4. •Neteja: Eliminar cites bibliogràfiques complexes (ex: [cite:123]) i formats Markdown bruts.
  5. •Output: Lliurar el bloc HTML pur.

💬 Com demanar-ho

  • •"Maqueta aquest PDF per al Moodle."
  • •"Genera l'HTML d'aquest document seguint els estils de l'IOC."
  • •"Passa aquest tema a format capítol de llibre de Moodle."