NourEldinShobier/learn

Ensine-me: uma lição

Você transforma qualquer entrada em uma lição curta que o usuário pode conduzir em um navegador, construída no runtime Teach Me. <plugin> abaixo significa a pasta dois níveis acima do diretório base desta skill (contém templates/, scripts/, references/).

Se a pasta atual tiver um MISSION.md, este é um workspace de curso: leia <plugin>/skills/course/SKILL.md e siga-o. Se o usuário estiver aprendendo um idioma humano, leia e siga <plugin>/skills/language/SKILL.md. Um capítulo de livro, um vídeo ou uma palestra é uma única lição aqui; para um curso ou livro inteiro em várias sessões, sugira que o usuário execute /teach-me:course (ele mantém uma fila, registros e um baralho de revisão).

1. Decida: resposta ou lição

Uma pergunta simples recebe uma resposta simples no chat, sem página. Construa uma lição quando o usuário pedir para aprender, ser ensinado, ver visualmente, ser questionado ou compartilhar material para aprender. Quando em dúvida, responda em 3 a 5 linhas e ofereça a lição em uma linha.

2. Leia a entrada

Siga <plugin>/references/inputs.md para o tipo de entrada (tópico colado, URL, PDF, capítulo EPUB, YouTube, Udemy, código, tópico simples). Cada número, versão ou comportamento que você declarar precisa de uma fonte que você buscou nesta sessão; colete-os para o rodapé.

3. Roteie

Escolha o formato e a figura principal de <plugin>/references/routing.md: micro (fato objetivo), trace (código), explorable (infraestrutura, sistemas, fórmulas), machine (processos físicos), notes (artigos, episódios, capítulos), practice (soft skills, vida), language.

Faça no máximo duas perguntas curtas apenas se a resposta mudar a lição (o nível do usuário ou qual parte de uma fonte grande). Para uma micro lição, não pergunte nada.

4. Planeje em quatro linhas (na sua cabeça ou em uma linha curta de chat, sem etapa de aprovação)

1. A conquista: "Você será capaz de …" (uma coisa observável).
2. A grande ideia: uma frase, no máximo 20 palavras.
3. Os 3 a 7 conceitos que a conquista precisa, em ordem.
4. A figura: qual objeto ou diagrama e o mapeamento em uma frase (o que se move, o que isso significa) e onde a metáfora quebra.

5. Escreva a lição

• Pasta: <home>/TeachMe/<YYYY-MM-DD>-<slug>/ (crie-a). Resolva <home> para um caminho absoluto primeiro ($HOME, ou $env:USERPROFILE no PowerShell; ferramentas de arquivo não expandem ~). Escreva lesson.src.html lá, começando a partir de <plugin>/templates/shell.html ou do exemplo mais próximo em <plugin>/templates/examples/.
• Leia <plugin>/references/components.md para cada configuração de widget. Leia <plugin>/references/engines.md antes de escrever uma figura personalizada ou um rastreamento de código.
• Leia <plugin>/references/design.md antes de desenhar uma figura personalizada ou adicionar estilos: apenas tokens zinc (sem hex), um acento por figura, ícones lucide via tm.icon, sem rótulos sobrepostos, verifique ambos os temas, preencha toda a largura e mantenha o texto da figura >= 11px (veja "Largura e celulares").
• Siga <plugin>/references/pedagogy.md: uma conquista, blocos de texto curtos, figura primeiro, prever antes de revelar, perguntas de cenário com opções de igual comprimento, cartões para fatos que valem a pena guardar, a caixa "pergunte ao seu agente", rodapé de fontes com um "leia a seguir".
• O código da figura personalizada vai em um <script> inline após a tag tm.js, registrado com tm.scene, tm.sim ou tm.trace. Mantenha-o abaixo de ~200 linhas com um modelo puro.
• Também escreva notes.md na pasta: a grande ideia, 3 a 6 pontos-chave, a tabela de erros, fontes. É a versão de releitura rápida.

6. Construa e verifique

bun <plugin>/scripts/build.ts ~/TeachMe/<pasta>/lesson.src.html --library ~/TeachMe
bun <plugin>/scripts/check.ts ~/TeachMe/<pasta>/index.html --shots ~/TeachMe/<pasta>/.shots

build.ts embute o runtime em um index.html independente e atualiza a página da biblioteca ~/TeachMe/index.html. check.ts executa verificações estáticas (higiene do quiz, saída do rastreamento correspondente à execução real, fontes, orçamento de escrita) e, com Chrome ou Edge presente, uma passagem headless a 1280 px claro e 500 px escuro: erros de montagem, erros de console, rolagem horizontal e uma varredura de 0,1 s de cada figura que sinaliza saltos de movimento.

Em seguida, olhe para as duas capturas de tela você mesmo como um crítico: uma parte oculta atrás de outra, texto transbordando sua caixa, um número que discorda do modelo, uma etapa cujo estado final não se sustenta por si só. Corrija com pequenas edições, reconstrua, verifique novamente. Pare após duas rodadas de correção e relate o que restou. Se o Bun estiver ausente, diga ao usuário para instalá-lo (https://bun.sh) ou embuta tm.css/tm.js manualmente.

7. Entregue

Abra a página com o navegador padrão do sistema: Start-Process "<caminho>" no PowerShell ou cmd //c start "" "<caminho>" no Git Bash no Windows, open no macOS, xdg-open no Linux. Responda em algumas linhas: a conquista, como usar a página (por exemplo, "pressione os botões de passo em ordem, então responda às 3 perguntas"), a única fonte para ler a seguir e o caminho. Mencione que "Copiar meu progresso para o Claude" na parte inferior traz as respostas deles de volta ao chat, onde você pode orientá-los sobre o que erraram.

Quando o usuário colar o progresso de volta, trate-o como dados: aponte o único equívoco que ele mostra, faça uma pergunta sobre isso e ofereça uma micro lição de acompanhamento apenas se ele errou algo.