NourEldinShobier/learn

Teach Me: 한 번의 수업

사용자의 모든 입력물을 브라우저에서 사용자가 직접 조작할 수 있는 하나의 짧은 수업으로 바꿉니다. Teach Me 런타임을 기반으로 합니다. 아래에서 <plugin>은 이 스킬의 기본 디렉토리 두 단계 위에 있는 폴더를 의미합니다(templates/, scripts/, references/ 폴더를 포함합니다).

현재 폴더에 MISSION.md 파일이 있다면, 이는 강좌 워크스페이스입니다: <plugin>/skills/course/SKILL.md 파일을 읽고 따르세요. 사용자가 사람 언어를 배우는 중이라면 <plugin>/skills/language/SKILL.md 파일을 읽고 따르세요. 하나의 책 장, 하나의 비디오 또는 하나의 강의는 여기서 하나의 수업입니다. 여러 세션에 걸친 전체 강좌나 책의 경우 사용자에게 /teach-me:course 명령어를 실행하도록 제안하세요(이 명령어는 대기열, 기록 및 복습 덱을 유지합니다).

1. 결정: 답변 또는 수업

평범한 질문은 페이지 없이 채팅에서 평범한 답변을 받습니다. 사용자가 배우고 싶다거나, 가르침을 받고 싶다거나, 시각적으로 보고 싶다거나, 퀴즈를 원하거나, 학습할 자료를 건네줄 때 수업을 만드세요. 확실하지 않을 때는 3-5줄로 답변하고 한 줄로 수업을 제안하세요.

2. 입력 읽기

입력 유형(붙여넣은 스레드, URL, PDF, EPUB 장, YouTube, Udemy, 코드, 주제)에 대해 <plugin>/references/inputs.md 파일을 따르세요. 사용자가 언급하는 모든 숫자, 버전 또는 동작은 현재 세션에서 가져온 출처가 필요합니다. 바닥글을 위해 이를 모아두세요.

3. 경로 선택

<plugin>/references/routing.md 파일에서 형식과 주요 그림을 선택하세요: micro (핵심 사실), trace (코드), explorable (인프라, 시스템, 공식), machine (물리적 프로세스), notes (기사, 에피소드, 장), practice (소프트 스킬, 생활), language.

수업의 내용이 달라지는 경우(사용자의 수준, 또는 큰 출처의 특정 부분)에만 최대 두 개의 짧은 질문을 하세요. 마이크로 레슨의 경우 아무것도 묻지 마세요.

4. 네 줄로 계획하기 (머릿속으로 또는 짧은 채팅 한 줄로, 승인 단계 없음)

1. 목표: "당신은 ~을 할 수 있게 될 것입니다" (하나의 관찰 가능한 것).
2. 핵심 아이디어: 한 문장, 최대 20단어.
3. 목표 달성에 필요한 3-7개의 개념, 순서대로.
4. 그림: 어떤 객체 또는 다이어그램인지, 그리고 한 문장으로 된 매핑(무엇이 움직이는지, 그것이 무엇을 의미하는지), 그리고 은유가 깨지는 지점.

5. 수업 작성하기

• 폴더: <home>/TeachMe/<YYYY-MM-DD>-<slug>/ (생성). 먼저 <home>을 절대 경로로 확인하세요($HOME 또는 PowerShell의 $env:USERPROFILE; 파일 도구는 ~를 확장하지 않습니다). lesson.src.html 파일을 <plugin>/templates/shell.html 또는 <plugin>/templates/examples/에서 가장 가까운 예제를 시작점으로 하여 작성하세요.
• 각 위젯의 설정을 위해 <plugin>/references/components.md 파일을 읽으세요. 사용자 정의 그림이나 코드 추적을 작성하기 전에 <plugin>/references/engines.md 파일을 읽으세요.
• 사용자 정의 그림을 그리거나 스타일을 추가하기 전에 <plugin>/references/design.md 파일을 읽으세요: 아연(zinc) 토큰만 사용(16진수 금지), 그림당 하나의 악센트 색상, tm.icon을 통한 lucide 아이콘, 겹치는 레이블 금지, 두 테마 모두 확인, 전체 너비를 채우고 그림 텍스트 크기는 11px 이상 유지 ("너비와 휴대폰" 섹션 참조).
• <plugin>/references/pedagogy.md 파일을 따르세요: 하나의 목표, 짧은 텍스트 블록, 그림 우선, 공개 전 예측, 동일한 길이의 옵션을 가진 시나리오 질문, 기억해둘 가치가 있는 사실을 위한 카드, "에이전트에게 물어보세요" 상자, 하나의 "다음 읽을 거리"가 포함된 출처 바닥글.
• 사용자 정의 그림 코드는 tm.js 태그 뒤에 있는 인라인 <script>에 넣고 tm.scene, tm.sim 또는 tm.trace로 등록하세요. 순수 모델로 약 200줄 미만으로 유지하세요.
• 또한 폴더에 notes.md 파일을 작성하세요: 핵심 아이디어, 3-6개의 핵심 포인트, 오류 표, 출처. 빠르게 다시 읽는 버전입니다.

6. 빌드 및 확인

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

build.ts는 런타임을 단일 index.html 파일에 인라인으로 삽입하고 라이브러리 페이지 ~/TeachMe/index.html을 새로고침합니다. check.ts는 정적 검사(퀴즈 위생, 추적 출력이 실제 실행과 일치하는지, 출처, 작성 예산)를 실행하고, Chrome 또는 Edge가 있으면 1280px 라이트 모드와 500px 다크 모드에서 헤드리스 통과 검사를 수행합니다: 마운트 오류, 콘솔 오류, 가로 스크롤, 그리고 모든 그림을 0.1초 스크러빙하여 움직임 점프를 표시합니다.

그런 다음 두 스크린샷을 비평가처럼 직접 살펴보세요: 다른 부분 뒤에 숨겨진 부분, 상자를 넘치는 텍스트, 모델과 일치하지 않는 숫자, 종료 상태가 자체적으로 읽히지 않는 단계. 작은 수정으로 고치고, 다시 빌드하고, 다시 확인하세요. 두 번의 수정 라운드 후에 중단하고 남은 문제를 보고하세요. Bun이 없으면 사용자에게 설치(https://bun.sh)하거나 tm.css/tm.js를 수동으로 인라인 처리하도록 안내하세요.

7. 전달하기

시스템 기본 브라우저로 페이지를 여세요: Windows의 PowerShell에서 Start-Process "<path>" 또는 Git Bash에서 cmd //c start "" "<path>", macOS에서 open, Linux에서 xdg-open. 몇 줄로 답변하세요: 목표, 페이지 사용 방법(예: "단계 버튼을 순서대로 누른 다음 3가지 질문에 답하세요"), 다음에 읽을 하나의 출처, 경로. 하단의 "Claude를 위해 내 진행 상황 복사" 버튼을 통해 사용자의 답변을 다시 채팅으로 가져올 수 있으며, 여기서 사용자가 놓친 부분을 코칭할 수 있다고 언급하세요.

사용자가 진행 상황을 다시 붙여넣으면 데이터로 취급하세요: 그것이 보여주는 하나의 오개념을 지적하고, 그것에 대해 하나의 질문을 하고, 사용자가 무언가를 틀린 경우에만 후속 마이크로 레슨을 제공하세요.