AI Agent Skill HUB

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.

16 stars
bydiegosouzapw
View on GitHubInstallation ↓

Best use case

didactic-content-generator is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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.

Teams using didactic-content-generator should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/didactic-content-generator/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/content-media/didactic-content-generator/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/didactic-content-generator/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How didactic-content-generator Compares

Feature / Agentdidactic-content-generatorStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

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.
- **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)

```json
{
  "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.

Related Skills

generator

16
from diegosouzapw/awesome-omni-skill

Générateur de Skill - Crée de nouveaux fichiers SKILL.md depuis les définitions YAML d'agents

EchoKit Config Generator

16
from diegosouzapw/awesome-omni-skill

Generate config.toml for EchoKit servers with interactive setup for ASR, TTS, LLM services, MCP servers, API key entry, and server launch

bigconfig-generator

16
from diegosouzapw/awesome-omni-skill

Use this skill when creating or updating Bigeye monitoring configurations (bigconfig.yml files) for BigQuery tables. Works with metadata-manager skill.

ai-image-generator

16
from diegosouzapw/awesome-omni-skill

使用 ModelScope 等平台生成 AI 图像。当用户需要生成图像、设计图标、创建角色立绘，或需要帮助编写 AI 绘画提示词时使用此技能。支持直接生成图像和仅优化提示词两种模式。

wechat-content-skill

16
from diegosouzapw/awesome-omni-skill

公众号内容创作助手 - 帮助高效采集素材、筛选选题、创作优质文章

url-content-loading

16
from diegosouzapw/awesome-omni-skill

A URL content loading tool that extracts text or metadata from URLs across multiple platforms (YouTube, PTT, Twitter/X, Truth Social, Reddit, GitHub, and more). Use this when you need to load and extract content from social posts, videos, documents, or code repositories for scraping, data extraction, or content analysis.

thumbnail-generator

16
from diegosouzapw/awesome-omni-skill

Generate prompts for dev.to blog thumbnail/cover images in hand-drawn infographic style. Use when creating cover images, thumbnails, or featured images for blog posts. Recommended size 1000x420 pixels.

social-content

16
from diegosouzapw/awesome-omni-skill

When the user wants help creating, scheduling, or optimizing social media content for LinkedIn, Twitter/X, Instagram, TikTok, Facebook, or other platforms. Also use when the user mentions 'LinkedIn post,' 'Twitter thread,' 'social media,' 'content calendar,' 'social scheduling,' 'engagement,' or 'viral content.' This skill covers content creation, repurposing, and platform-specific strategies.

seo-content

16
from diegosouzapw/awesome-omni-skill

Content quality and E-E-A-T assessment with AI citation readiness scoring. Evaluates Experience, Expertise, Authoritativeness, and Trustworthiness alongside word count analysis, readability metrics, keyword optimization, content structure, and Generative Engine Optimization (GEO) signals.

seo-content-refresher

16
from diegosouzapw/awesome-omni-skill

Identifies outdated elements in provided content and suggests updates to maintain freshness. Finds statistics, dates, and examples that need updating. Use PROACTIVELY for older content.

seedream-image-generator

16
from diegosouzapw/awesome-omni-skill

Generate images using the Doubao SeeDream API based on text prompts. Use this skill when users request AI-generated images, artwork, illustrations, or visual content creation. The skill handles API calls, downloads generated images to the project's /pic folder, and supports batch generation of up to 4 sequential images.

refresh-content

16
from diegosouzapw/awesome-omni-skill

Update existing content with fresh information and improvements.