deepwhy/deepwhy-skill

Cadeia de Conhecimento DeepWhy

Crie uma experiência de exploração do conhecimento, não um artigo longo com um sumário. A superfície principal é uma cadeia interativa e compacta de 3 a 6 ideias que progride de um fenômeno familiar em direção a um mecanismo, princípio, teoria, fronteira atual ou limite conhecido.

A experiência de aprendizado deve ajudar o aluno a compreender, não apenas receber uma explicação bem fundamentada. Organize cada ideia central em torno de uma cena familiar e uma metáfora utilizável. Mostre essa metáfora em movimento quando mudança ou causalidade for o ponto central, depois mapeie-a de volta ao mecanismo real em linguagem simples. O vídeo é uma segunda explicação ou confirmação do mundo real para o mesmo nó, nunca uma palestra genérica usada para preencher uma cota.

Prefira uma metáfora âncora em nível de cadeia. Reutilize e aprofunde-a em nós adjacentes sempre que ela ainda explicar a nova pergunta; mude somente quando o modelo antigo atingir um limite real. O aluno deve acumular um modelo mental em evolução, não coletar exemplos não relacionados de cartão em cartão.

O entregável padrão é um único arquivo HTML. Ele deve preservar uma experiência local útil sem uma etapa de compilação: seleção de nó, navegação anterior/próximo, ramificações, abas de detalhes, filtragem de linha do tempo, feedback de avaliação, dossiês de contexto e exportação JSON usam CSS e JavaScript incorporados. Artigos externos, vídeos, imagens e o próprio DeepWhy ainda exigem rede.

As imagens com conhecimento devem permanecer legíveis: nenhuma ilustração, diagrama, animação ou sobreposição pode cobrir texto, anotações, controles, legendas ou marcas críticas. Quando uma relação for naturalmente temporal ou causal, prefira uma animação proposital a uma imagem estática.

Leia apenas o que a tarefa precisa

• Antes de pesquisar, leia references/research-playbook.md.
• Antes de planejar a cadeia, leia references/knowledge-chain.md.
• Antes de projetar metáforas, animações ou pares de vídeo, leia references/teaching-progression.md.
• Antes de escolher Manim, leia references/manim-animation.md.
• Antes de criar um laboratório em nível de nó, leia references/interactive-labs.md.
• Antes de criar JSON, leia references/content-contract.md e assets/content.schema.json.
• Antes de escolher ou adaptar o sistema visual, leia references/visual-design-system.md e references/design-presets.md.
• Antes de compor a estrutura da página, leia references/learning-layout.md e references/page-delivery.md.
• Antes da garantia de qualidade final, leia references/evaluation-cases.md.

Comece a partir de assets/template.html, não de uma página em branco. Use o modelo e os scripts como contratos estruturais, não como fontes de fatos.

Construa a experiência de aprendizado

1. Enquadre o aluno e a pergunta. Extraia o tópico, a pergunta real, o conhecimento prévio provável e a profundidade pretendida. Preserve uma premissa falsa em meta.premiseCheck, marque-a como corrected, explique-a de forma compacta e continue com a pergunta corrigida. Não pare na correção.

2. Projete a rota de ensino antes de pesquisar os detalhes. Para cada nó central, identifique:

   cena reconhecível → uma metáfora → 2–4 mapeamentos explícitos → batida causal animada → regra em linguagem simples → vídeo relevante → verificação de transferência → limite da metáfora.

   Faça o aluno recontar a ideia com a metáfora. Não avance para uma definição técnica até que esse modelo mental esteja visível. Use uma metáfora por nó e carregue-a consistentemente através da animação, etapas e verificação.

3. Planeje a cadeia de conhecimento principal. Use 4–6 nós principais por padrão e 3 apenas quando o tópico genuinamente não suportar mais. Selecione os tipos de nó em ordem não decrescente de profundidade a partir de:

   fenômeno → mecanismo → princípio → teoria → fronteira → limite.

   O nó inicial deve ser algo que o aluno possa reconhecer. Cada nó faz uma pergunta causal. Cada nó a responde em uma frase, normalmente de 20 a 60 caracteres, e sugere no máximo três ramificações opcionais. O próximo nó deve responder à parte não respondida do nó anterior, em vez de reafirmá-la.

4. Pesquise cada nó. Mantenha um registro de evidências durante a pesquisa. Prefira artigos originais, páginas oficiais, normas, livros didáticos e relatórios institucionais. Registre as datas dos eventos separadamente da publicação, protótipo, implantação operacional e adoção. Marque a evidência ausente honestamente.

5. Ensine uma nova ideia de cada vez. Padrão para meta.audience.explanationLevel = "child" a menos que a solicitação especifique um público mais profundo. Antes de introduzir um termo ou fórmula, ancore-o em uma cena e metáfora familiares. Cada nó deve incluir uma ponte, uma analogy utilizável, um mapeamento em linguagem simples, etapas causais ordenadas e uma verificação "preveja, depois revele". Nós de mecanismo, princípio, teoria e fronteira exigem a analogia; um fenômeno pode usar sua cena de abertura diretamente, e um limite pode usar um contraexemplo.

6. Projete operações de aprendizado ativo. Pelo menos um visual de conhecimento em cada página deve convidar o aluno a fazer algo, e uma página de 4 a 6 nós deve normalmente incluir 2 a 3 dessas operações. Escolha entre previsão antes da revelação, manipulação de parâmetros com consequência ao vivo, ou uma alternância que compara duas condições. Vincule cada interação à metáfora do nó e atualize o feedback imediatamente; o aluno deve descobrir a relação agindo, não clicando em um controle decorativo. Não adicione uma interação que meramente repita a resposta. Nós de mecanismo e princípio exigem um laboratório isolado e autocontido; escolha simulação, diagrama, código, jogo, 3D espacial ou prática procedimental de acordo com o conhecimento. Laboratórios adjacentes não devem usar a mesma modalidade. Para avaliação, pré-crie exatamente cinco questões de múltipla escolha para cada nó principal. Gere cada opção correta, resposta modelo, explicação e lista de fontes junto com a pergunta. Nunca dependa de um modelo em tempo de execução para avaliar. Selecionar uma opção deve revelar imediatamente feedback verde-correto ou vermelho-incorreto mais a explicação; não exija uma ação de envio ou um botão de "verificar domínio" em toda a cadeia. Após a primeira resposta em um nó, mostre um cartão de resposta de cinco slots com estados verde-correto, vermelho-incorreto e neutro não respondido; cada slot salta de volta para aquela pergunta. Oculte a ação "Próximo" após a quinta pergunta ter sido respondida. Também exponha um questionário global contendo todas as perguntas por nó a partir do seletor de visão global superior.

7. Emparelhe animação e vídeo no ponto de confusão. Animar a metáfora fazendo o trabalho causal, então estabilizar em um quadro estático legendado. Cada nó de conhecimento requer exatamente cinco vídeos externos verificados. A aba Vídeo apresenta um player principal seguido por quatro cartões de miniatura para os vídeos restantes. Selecionar uma miniatura troca o player principal. Todos os cinco clipes demonstram o mesmo nó através de fenômenos reais, experimentos ou explicações visuais alternativas. Nunca invente URLs, miniaturas, métricas ou suporte de incorporação para chegar a cinco. Diferentes nós de conhecimento devem usar diferentes registros de vídeo. Exponha uma visão de biblioteca de vídeos global a partir do seletor global superior, separada do conjunto de cinco vídeos de cada nó. Mantenha lacunas de verificação de plataforma ou rede nos metadados de evidência; não as transforme em avisos voltados para o aluno na aba Vídeo. Use SVG/SMIL em linha primeiro quando explicar o movimento causal. Somente quando o Manim tornar uma transformação, trajetória, força ou metáfora matemática materialmente mais clara, você deve planejar uma cena Manim em nível de nó. Teste o tempo de execução apenas nesse ponto. Se a configuração for necessária, execute o comando de plano, mostre seus comandos completos e localização do cache isolado, e peça consentimento explícito antes de executar install --confirmed. Se o consentimento for recusado ou a configuração falhar, use SVG para o restante desta geração e não repita o prompt.

8. Coloque explicações completas atrás da divulgação. O cartão do nó possui apenas a pergunta e a resposta em uma frase. Um inspetor lateral pode incluir um mergulho profundo curto, analogia, diagrama com fonte, evidência, vídeo/recursos e uma verificação em nível de nó. Coloque pessoas e instituições com fontes correspondentes em Histórico de Pesquisa, e aplicações com fontes correspondentes, eventos de linha do tempo e status de implantação de fronteira em Desenvolvimento da Indústria. Mantenha ambas as abas filtradas para o conjunto de fontes do nó; nunca duplique uma CTA de contexto global na conclusão da cadeia ou área de cabeçalho. O inspetor usa cinco abas: Entender, Vídeo, Histórico de Pesquisa, Desenvolvimento da Indústria e Verificar Entendimento. As ramificações permanecem recolhidas até serem explicitamente abertas. A aba de vídeo carrega um player principal verificado e quatro opções de miniatura; outros players carregam apenas quando selecionados. Não renderize S1, S2 ou tags de fonte numérica semelhantes em painéis de nó voltados para o aluno. Preserve IDs de fonte no JSON para rastreabilidade.

9. Crie o HTML completo. Coloque todos os dados em #deepwhy-data e renderize-os com o modelo. Use um SVG inline revisado para um diagrama de mecanismo quando possível. Nunca apresente uma imagem de atmosfera gerada por IA como um mecanismo factual. Para movimento, execução sequencial, mudança de estado, propagação, fluxo ou feedback, use animação SVG inline sempre que o movimento carregar a explicação; mantenha um estado estabilizado legível e um equivalente de texto estático. Mostre as imagens do nó por completo: preserve a proporção de aspecto intrínseca e use um ajuste do tipo "contain" em vez de cortar. Mantenha rótulos essenciais fora de imagens raster. Aumente o viewBox, divida o visual ou remova detalhes secundários em vez de permitir sobreposição. Mantenha prosa substancial e citações fora do DOM escrito à mão. No desktop, componha uma bancada de aprendizado com altura da janela de visualização: uma tela de gráfico de nó de 40-46% ao lado de uma bancada de lição dominante. O laboratório selecionado e a reflexão pertencem à bancada. No celular, retorne ao fluxo normal do documento e abra a bancada como uma folha inferior. Se um nó tiver manim, renderize uma animação silenciada, em loop e playsinline acima do laboratório do nó, com seu pôster, legenda, transcrição, ação de repetição e fallback SVG inline. O modo de movimento reduzido deve mostrar o pôster sem reprodução automática. O construtor incorpora ativos WebM e WebP locais no HTML final.

10. Escolha a direção visual. Use deepwhy por padrão: a linguagem de sala de aula inspirada no OpenMAIC com um palco pontilhado quase branco, tinta neutra fria, ações violeta contidas, painéis flutuantes arredondados e uma bancada de interação dominante. atlas, chronicle e fieldnotes são alternativas explícitas, não correspondências automáticas de tópico. --style e DEEPWHY_PAGE_STYLE substituem a escolha de conteúdo. As predefinições podem alterar tipografia, cor, materiais e detalhes de layout; não podem alterar a semântica dos dados ou as interações.

    Antes de escrever HTML, registre o arquétipo, insight central, visual focal, hierarquia e ritmo de seção em presentation. Construa um ponto focal visual dominante, depois varie a composição por propósito do nó. Não padrão para uma página de destino, painel, modelo de artigo ou grade de cartão repetida.

11. Valide a experiência. Execute validação de conteúdo, testes de unidade e um teste Playwright quando disponível. Confirme que a primeira tela mostra a cadeia, insight chave, posição atual e próxima ação; apenas um detalhe de nó e um player de vídeo estão ativos por vez; as ramificações permanecem subordinadas ao caminho principal; e todo o material de contexto permanece acessível. Inspecione cada diagrama nas larguras de desktop e celular para texto, controles, legendas, marcas essenciais e conteúdo de imagem cortados ou sobrepostos. Verifique se o movimento significativo está presente onde ajuda a explicar a ideia, estabiliza em um quadro legível e respeita as preferências de movimento reduzido. Confirme que cada nó central permite que o aluno re conte a ideia com sua metáfora, transfira-a uma vez e reconheça onde a metáfora quebra. Verifique se os vídeos vinculados suportam o nó atual em vez de servir como contexto não relacionado. Exercite cada interação e confirme que alterar a entrada produz uma consequência visível e verdadeira. Revise a composição completa e a versão para celular. Se parecer com uma página SaaS genérica gerada por IA, redesenhe-a antes da entrega.

Cobertura de conteúdo

Os antigos módulos educacionais ainda são cobertos, mas não mapeiam mais para 12 longas seções de página:

• fenômeno, mecanismo, princípio, teoria, fronteira e limite tornam-se tipos de nó de cadeia;
• a cena familiar, a metáfora principal, o mapeamento animado e a regra simples vivem no detalhe do nó;
• cada nó de mecanismo e princípio contém um laboratório prático isolado seguido por reafirmação livre e uma conclusão de referência atrasada;
• os vídeos são vinculados ao nó exato que ajudam a explicar;
• pessoas, instituições, aplicações, linha do tempo de evolução, fronteira mais recente e inventário de fontes vivem na gaveta de contexto, com links de pesquisa correspondentes dentro do nó lateral direito relevante;
• as cinco verificações de múltipla escolha pré-criadas de cada nó vivem na aba Verificar Entendimento do seu inspetor;
• as próximas perguntas tornam-se ramificações e sugestões de acompanhamento em nível de cadeia; cada recomendação é clicável e possui link profundo para https://deepwhy.cn/ com o tópico atual e a pergunta recomendada na URL;
• nenhuma conta ou API é necessária; o HTML permanece útil de forma independente, enquanto as perguntas recomendadas podem abrir a plataforma DeepWhy.

O seletor de visão global superior é uma superfície de orientação proeminente. Ele renderiza a linha do tempo de desenvolvimento combinada e o estágio atual, pessoas relacionadas, a biblioteca de vídeos completa.

... [truncado para tradução]