Awesome-omni-skill didactic-content-generator

Gere conteúdo didático de alta qualidade em HTML/CSS com ilustrações SVG, usando um sistema de Temas pré definidos e reutilizáveis. Capaz de criar ou editar apostilas, tutoriais e materiais educacionais que seguem filosofias pedagógicas claras.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/didactic-content-generator" ~/.claude/skills/diegosouzapw-awesome-omni-skill-didactic-content-generator-ad7cc3 && rm -rf "$T"

manifest: skills/development/didactic-content-generator/SKILL.md

source content

Estas são instruções para criar Conteúdo Didático Visual - material educacional que é estruturado pedagogicamente e expresso visualmente com qualidade editorial. A saída final DEVE ser um único arquivo

.html

ARQUIVOS E RECURSOS

examples/
: Contém exemplos de referência.
themes.json
: CRÍTICO. Este arquivo armazena as definições de estilo (cores, tipografia, CSS) dos temas pré definidos. O Agente DEVE ler este arquivo para operar.

FUNCIONALIDADES PRINCIPAIS

Sempre verifique qual destas ações abaixo o usuário deseja realizar:

1. CRIAR/EDITAR CONTEÚDO DIDÁTICO

Cria ou modifica um arquivo HTML único contendo o conteúdo didático completo, rico em visual e pedagogia.

Estrutura Pedagógica (Conteúdo)

Cabeçalho Editorial: Título (H1) impactante, Subtítulo (H2) explicativo, Badges de metadados. Resumo Executivo: Uma caixa destacada no início com os pontos chave (TL;DR). Desenvolvimento: O conteúdo dividido em seções claras (H3/H4). Didática Visual:

Use SVG Inline para diagramas (obrigatório para conceitos complexos).
Use Callouts (boxes coloridos) para alertas e dicas.
Use Cards para mnemônicos ou fórmulas.
Exemplos: Blocos de código ou cenários de uso com fundo contrastante.

Conclusão: Resumo final recapitulativo.

Diretrizes Técnicas (HTML/CSS)

HTML Semântico: Use

<article>

<section>

<aside>

<figure>

<figcaption>

CSS Embutido: Todo o estilo deve estar em uma tag
```
<style>
```
no
```
<head>
```
.
Responsividade: O layout deve funcionar em Mobile e Desktop. Use
```
max-width: 800px
```
para o contêiner de leitura principal para ergonomia visual.
Pronto para Impressão: A página deve possuir CSS avançado para impressão em formato de apostila A4 Retrato, de forma que não quebre o layout ao imprimir.
Tipografia: Use
```
@import
```
para fontes do Google Fonts. Escolha fontes que combinem (uma para Títulos, uma para Corpo, uma para Código/Detalhes).
- Exemplo:
```
Merriweather
```
  (Corpo) +
```
Oswald
```
  (Títulos) para um look clássico.
- Exemplo:
```
Inter
```
  (Corpo) +
```
Space Grotesk
```
  (Títulos) para tech.

Diretrizes de Ilustração (SVG/CSS)

O agente DEVE ser capaz de ilustrar conceitos. Não use imagens externas quebradas.

SVG Inline: Desenhe diagramas, ícones e fluxogramas usando tags
```
<svg>
```
diretamente no HTML. Isso garante vetores perfeitos em qualquer zoom.
CSS Shapes: Use divs com bordas e cores para criar caixas de destaque, separadores e elementos visuais simples.

Diretrizes de Qualidade (O "Canvas Digital")

Gere um arquivo HTML único. Este arquivo deve ser uma OBRA DE ARTE EDITORIAL.

Não faça páginas web genéricas.
Faça páginas que pareçam páginas de revista ou livros didáticos premiados.
HTML & CSS (Engine do Tema): Ao aplicar um tema, mapeie o JSON para CSS Variables na raiz
```
:root
```
.
Importe as fontes usando o campo
```
googleFontsUrl
```
do tema.

Processo de Criação

1. Defina Tópico: Se o usuário não informar o tópico, pergunte. Confirme o assunto (tópico e subtópicos), o público-alvo e o objetivo do conteúdo. 2. Defina o Público-alvo: Se o usuário não informar o público-alvo, pergunte. O público-alvo (Ex: Crianças de 5 anos, Doutorandos, Engenheiros Sênior). 3. Defina o Tom: Se o usuário não informar o tom, pergunte. Socrático, Direto, Lúdico, Acadêmico, "Explain Like I'm 5" (ELI5). 4. Defina a Filosofia Didática: Antes de escrever o conteúdo, defina a abordagem pedagógica e visual. Não pule esta etapa, ela garante coerência. (faça isso mentalmente). 5. Defina a Estrutura Cognitiva: Como o conhecimento será construído? (Ex: Conceito -> Exemplo -> Prática; ou Problema -> Solução -> Teoria). (faça isso mentalmente). 6. Consulte Temas: Leia

themes.json

e apresente a lista de temas disponíveis (Nome + Descrição) para o usuário escolher, ou selecione caso o usuário já tenha informado. 7. Gere o HTML:

Use as variáveis de cor e tipografia do Tema escolhido.
Insira o CSS no
```
<head>
```
.
IMPORTANTE: Siga todas as diretrizes: Técnicas (HTML/CSS), de Ilustração (SVG/CSS) e de Qualidade (O "Canvas Digital") (MANDATÓRIO).

Processo de Edição

Solicite o arquivo HTML ou o código fonte.
Aplique as alterações solicitadas (conteúdo ou visual).
Se for troca de tema, reescreva o bloco
```
<style>
```
com os dados do novo tema do
```
themes.json
```
.
IMPORTANTE: Siga todas as diretrizes: Técnicas (HTML/CSS), de Ilustração (SVG/CSS) e de Qualidade (O "Canvas Digital") (MANDATÓRIO).

2. CRIAR/EDITAR TEMA

Cria ou atualiza definições no arquivo

themes.json

Estrutura do Objeto Tema (Referência)

{
  "id": "string-kebab-case",
  "name": "Nome Legível",
  "description": "Breve descrição de uso.",
  "colors": {
    "primary": "#hex",
    "accent": "#hex",
    "secondary": "#hex",
    "text": "#hex",
    "background": "#hex",
    "surface": "#hex" // Para cartões/boxes
  },
  "typography": {
    "display": "Font Family para títulos",
    "body": "Font Family para texto",
    "code": "Font Family para código",
    "googleFontsUrl": "URL completa do Google Fonts"
  },
  "css_variables": {
    "--custom-var": "value" // Variáveis extras específicas
  },
  "extra_styles": "CSS cru para overrides específicos (ex: bordas de botões, sombras específicas)"
}

Processo de Criação

Coletar Dados: Pergunte ao usuário o "mood" (sério, lúdico, dark, tech), cores de preferência ou peça liberdade criativa. Gerar Identidade:

Nome: Crie um nome curto e intuitivo (Ex:
```
cyber-punk
```
,
```
infantil-pastel
```
,
```
direito-classico
```
).
ID: Kebab-case do nome.
Cores/Tipografia: Defina uma paleta coerente e fontes do Google Fonts. Persistir:
Leia o
```
themes.json
```
atual.
Adicione o novo objeto ao array.
Sobrescreva o arquivo
```
themes.json
```
com o novo conteúdo JSON.

Processo de Edição

Identifique o tema alvo.
Altere os valores solicitados.
Salve o
```
themes.json
```
atualizado.