Community라이팅 & 에디팅github.com

theshafinahmed/sproutly

강의 자료(슬라이드, PDF, 노트, 강의 계획서 또는 주제)를 듀오링고 스타일의 대화형 코스로 변환하는 하나의 오프라인 HTML 파일을 생성합니다. 미리 구축된 테스트된 엔진을 사용하여 Claude는 콘텐츠만 작성하면 됩니다. "make a course", "duo course", "interactive course", "turn these slides into lessons"와 같은 명령에 사용하세요.

sproutly란 무엇인가요?

Sproutly는 학습 자료를 하나의 자체 포함된 오프라인 듀오링고 스타일 HTML 코스로 변환하는 도구입니다. Claude Code, Cursor, Codex 등과 같은 AI 에이전트가 이 스킬을 통해 학습 콘텐츠 제작을 자동화할 수 있습니다. 미리 구축되고 테스트된 엔진이 앱의 UI, 내비게이션, 진행률 저장, 시험 모드, 시뮬레이션, 마스코트 등을 처리하므로, AI 에이전트는 콘텐츠 자체(수업, 질문, 퀴즈)만 집중적으로 작성하면 됩니다. 이 스킬은 강의 슬라이드, PDF, 노트, 강의 계획서 또는 단순한 주제를 입력으로 받아, 구조화된 유닛과 레슨으로 구성된 대화형 코스를 생성합니다. 모든 콘텐츠는 하나의 오프라인 HTML 파일로 빌드되며, 빌드 및 검증 스크립트를 통해 품질을 확인합니다. 하트, XP, 스트릭, 불꽃, 리더보드와 같은 게임화 요소가 없어 순수한 학습 도구로 사용됩니다. 최종 결과물은 사용자에게 파일로 전달되며, 브라우저에서 바로 열리고 오프라인에서도 작동하며 진행 상황이 저장됩니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/theshafinahmed/sproutly/tree/HEAD/skills/sproutly

Installed? Explore more 라이팅 & 에디팅 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

sproutly은(는) 무엇을 하나요?

학습 자료를 하나의 자체 포함된 오프라인 듀오링고 스타일 HTML 코스로 변환하세요. 미리 구축되고 테스트된 엔진이 앱(탭, 뒤로 가기 버튼, 진행률, 시험 모드, 숫자 채점, 시뮬레이션, 마스코트)을 처리합니다. 당신은 콘텐츠만 작성하면 되고, 두 개의 스크립트로 빌드하고 검증합니다. 엔진을 다시 작성하지 마세요.

이것은 학습 도구이며 게임이 아닙니다: 하트, XP, 스트릭, 불꽃 또는 리더보드가 없습니다. 진행률 = 완료된 수업과 이해한 답변입니다.

0단계: 엔진 가져오기 (2초)

SP="${SPROUTLY_HOME:-/tmp/sproutly}"
[ -f "$SP/scripts/build.js" ] || git clone --depth 1 https://github.com/theshafinahmed/sproutly "$SP"
ls "$SP/scripts"

이 스킬이 sproutly 저장소 안에서 읽히는 경우, 대신 해당 폴더를 SP로 사용하세요. 복제가 차단된 경우(네트워크 없음), 사용자에게 저장소를 zip 파일로 첨부하도록 요청하세요. 엔진을 수동으로 다시 빌드하지 마세요.

워크플로우

  1. 수집. 모든 파일을 완전히 읽습니다. 모든 주제, 정의, 공식, 예제 및 연습 문제를 소스 순서대로 나열합니다. 이미지만 있는 슬라이드를 기록합니다. 주요 콘텐츠를 읽을 수 없으면 말하고 스크린샷을 요청합니다. 슬라이드 내용을 지어내지 마세요. (사용자가 주제만 제공한 경우, 커리큘럼을 계획하고 보여준 후 승인을 기다린 후 작성합니다.)
  2. 차단된 경우에만 질문 (읽을 수 없는 파일, 관련 없는 과정이 섞인 경우, 명확하지 않은 범위). 그렇지 않으면 시작하고 마지막에 한 줄로 가정을 명시합니다.
  3. 계획. 610개의 유닛, 각각 25개의 레슨, 기본부터 시작하며 자동 Final Boss가 포함됩니다. 커버리지 체크리스트(모든 소스 주제가 레슨에 포함됨), 각 레슨에 대한 그림 계획 및 시뮬레이션 계획(또는 "없음, 이유는 ...")을 작성합니다.
  4. 콘텐츠 파일 작성./content/ 디렉토리에 (유닛당 하나의 파일로 수정 범위를 작게 유지하고, 사용자가 속도를 요청한 경우 하위 에이전트가 병렬로 유닛을 작성할 수 있음). 00-course.js 파일에는 COURSE.title='...'; COURSE.slug='...';만 담깁니다. 그런 다음 01-unit.js, 02-unit.js... 각각 UNIT(...)을 호출하고, 마지막으로 99-end.js에 CHEAT(...)와 COVERAGE(...)를 담습니다.
  5. 빌드: node "$SP/scripts/build.js" Course-Name.html content/
  6. 검증: node "$SP/scripts/verify.js" Course-Name.html --shots shots (생물학 유형 단어의 경우 --allow heart 추가). 구문, 데이터 형태, 독립형 질문, 숫자 채점, ref() 공식에 대한 모든 시뮬레이션, 그림, 모든 레슨 자동 재생, 뒤로 가기, 레이아웃, 지속성, 오프라인 여부 및 커버리지를 확인합니다. FAIL이 출력된 것만 수정합니다(하나의 작은 유닛 파일을 편집하고, 다시 빌드하고, 다시 실행). shots/*.png를 한 번 보고 명백히 잘못된 것을 수정하고 중단합니다.
  7. 전달 SendUserFile (display: 'attach', 한 줄 설명)을 사용합니다. 요청하지 않는 한 아티팩트로 게시하지 마세요.

최종 응답: 2~3문장, 재치 있는 친구 톤. 내용(유닛, 레슨, 질문, 그림, 시뮬레이션)을 설명하고, 모든 브라우저에서 열리며 오프라인에서 작동하고, 해당 브라우저의 해당 기기에 진행 상황이 저장된다고 말합니다. 가정 사항과 읽을 수 없는 내용을 언급합니다. 매일 사용하라는 정직한 권유 한 번. 단계를 요약하지 마세요.

콘텐츠 API (모든 헬퍼는 엔진에 이미 존재합니다)

UNIT('Unit name', 'one-line description', [ L('u1l1','Lesson title',[ ...cards ], ['key fact 1','key fact 2']) ]);
T(title, body, viz, {tip, mood, code})     // teach card. body = string or array of short sentences. viz = svg string. mood: happy|think
WORK(title, problem, [[what we do, why],..]) // worked example, one step per tap
Q(q, right, [wrong1, wrong2,..], why, {viz, code, trap})  // multiple choice. WRITE THE RIGHT ANSWER FIRST; the engine shuffles
TF(q, true|false, why, {viz, code, trap})
N(q, answer, 'unit', why, tol, {viz, code})  // typed number. tol: omit (1%) | {rel:0.02} | {abs:0.5} | {strict:true, rel:1e-6}
M(q, [[left,right],..], why)               // match pairs, right-hand values must be unique
SIM('slider'|'toggle'|'stepper', title, text, cfg)
RECAP(['plain bullets'], [['new word','simple meaning']])   // last card of EVERY lesson
CHEAT({formulas:[..], tables:[{title,head,rows}], glossary:[[term,meaning]], traps:[..]})
COVERAGE([['source topic','lessonId'],..])

텍스트 마크업: **bold**, `code`, V_{D} 아래첨자, x^{2} 위첨자, \n 줄 바꿈. 모든 것은 HTML 이스케이프 처리됩니다. T/Q/N은 code: (코드 블록, C 또는 모든 프로그래밍 과정에 좋음)를 허용합니다. Q(..., {trap:true})는 시험 함정 목록에도 추가됩니다.

시뮬레이션 (항상 task와 notice를 제공하고, slider와 toggle은 반드시 ref를 제공해야 함):

SIM('slider','Ohm','text',{
  inputs:[{id:'V',label:'Voltage',min:1,max:24,step:1,def:12,unit:'V'}, ...],   // 1 to 3 sliders; also use as a timeline scrubber
  model:function(v){ if(!v.R) return {out:[],msg:'Open circuit: R must be above 0'};
     var I=v.V/v.R; return {out:[{k:'I',label:'Current',val:I,unit:'A'}], fig:F.svg(...)} },
  ref:function(v){ return {I:v.V/v.R}; },   // INDEPENDENT recomputation, verify.js compares it with model()
  task:'Double R.', notice:'Current halves.' });
SIM('toggle', ..., {inputs:[{id:'A',label:'A is on',def:false}], model, ref, task, notice});
SIM('stepper', ..., {steps:[{caption:'...', fig:F.svg(...)}], task, notice});

SI 단위(A, V, Ω, W, F, H, Hz, s...)는 자동 접두사(mA, kΩ)를 얻습니다. 모든 경계 조건(0으로 나누기, 음수의 제곱근, 0의 로그)을 msg를 반환하여 보호하고, NaN을 반환하지 마세요.

그림: F.svg(w,h,inner,label), F.text, F.line, F.arrow, F.circle, F.dot, F.box, F.axes ({svg,X,Y} 반환), F.plot(ax,fn,xmin,xmax) (곡선은 실제 공식에서 나옴), F.mem (C 및 컴퓨터 아키텍처용 메모리 셀), F.centres, 그리고 회로: F.wire, F.res, F.src, F.gnd. 더 많은 모양이 필요하신가요? $SP/engine/js/figlib/에 파일을 추가하면 (자동으로 인라인 처리됨) 헬퍼를 일반적으로 유지하세요.

콘텐츠 규칙: ELI5지만 매우 상세함

간단하면서도 완전함. 둘 중 하나를 희생하지 마세요.

  • 호기심 많은 10~12세 어린이를 위해 작성하세요. 짧은 문장(약 15단어). 카드당 하나의 아이디어. 일상적인 단어를 먼저, 기술 용어는 그 다음에, 그 후에는 일관되게 용어를 사용하세요. 모든 기술 용어는 처음 등장할 때 바로 옆에 설명하세요. "당연히", "간단히", "사소하게", "우리가 알다시피"는 절대 쓰지 마세요.
  • 개념별 교육 순서: 왜 존재하는지(문제), 핵심 아이디어를 한 줄로, 일상적인 비유, 정확한 메커니즘 또는 공식, 실제 숫자가 포함된 작은 예제. 기본 원칙부터 시작하고 항상 이유를 설명하세요.
  • 완전함: 소스의 모든 슬라이드, 정의, 공식, 예제 및 연습 문제가 어딘가에 나타납니다. 여러 아이디어를 하나의 카드로 압축하지 마세요. 레슨은 6~14개의 카드로 구성됩니다. 어려운 아이디어 = 더 긴 카드가 아닌 더 많은 작은 카드.
  • Teach 카드: 최대 4개의 짧은 문장 또는 하나의 공식 블록, 선택적 그림. 최대 두 개의 teach 카드 후에 질문을 하세요.
  • 공식 카드: 모든 기호를 단위와 함께 이름 짓고, 각 부분이 증가하거나 감소할 때 어떤 일이 일어나는지 평범한 말로 설명하고, 하나의 작은 예제를 제공하세요.
  • 모든 레슨은 RECAP (35개의 불릿과 새로운 단어)으로 끝나고 keys (14개의 한 줄 사실; 알림 버튼이 이를 표시함)를 가집니다.
  • 톤: 재치 있는 가장 친한 친구. 장난스럽고, 약간 비꼬며, 정직하고, 따뜻함. 가벼운 농담, 명확성을 희생하지 마세요. 기업 톤, "좋은 질문입니다" 없음.
  • 업로드된 자료가 진실의 소스이며, 그 표기법을 포함합니다. 추가하는 모든 것은 "추가, 슬라이드에 없음"과 같이 레이블이 지정됩니다.

모든 질문은 독립적이어야 함

질문에는 필요한 모든 것이 포함되어야 합니다: 단위가 있는 모든 값, 조건, 기호 의미, 그리고 그림({viz: ...}). "위 회로", "이전 예제", "이전과 같이", "같은 값", "다이어그램"을 절대 쓰지 마세요. 각 질문을 테스트하세요: "빈 화면에서 혼자 있을 때, 주제를 아는 학생이 답할 수 있는가?" (verify.js가 구문을 플래그 지정합니다.)

숫자는 코드에서 나옴

유닛 파일 상단에 상수를 정의하고 텍스트, 그림 및 답변을 그로부터 파생하세요 (examples/test-fixture/course.js 참조). 모든 숫자 답변은 손으로 계산하지 말고 코드로 계산하세요. 입력된 답변은 올바른 반올림, 쉼표 소수점, 7.3e-3, 22/3 및 후행 단위를 자동으로 허용합니다. 다른 것이 필요할 때만 tol을 사용하고, 정확한 반올림 질문의 경우 질문 텍스트에 그렇게 명시하세요.

그림: 가르치는 곳에 그리기

  • 그림이 많은 과목(전기전자공학, 물리학, 화학, 생물학, 기하학, 컴퓨터 아키텍처, 디지털 논리, 자료 구조, 알고리즘, 네트워크, C 및 메모리): 약 두 번째 teach 카드마다 그림, 많은 질문에도 그림.
  • 중간 수준 과목: 그림이 말보다 나은 경우(약 3~4 카드당 하나).
  • 그림이 적은 과목(역사, 법학, 문학, 언어): 타임라인 또는 인과 관계 흐름, 레슨당 한두 개, 말로 충분할 때는 없음.
  • 레이아웃 변수에서 위치를 계산하세요. 소스의 기호 표준을 사용하세요. 그림이 확실하지 않으면 단순화하고 "단순화됨"이라고 레이블을 지정하세요. 평범하고 올바른 그림이 멋지지만 잘못된 그림보다 낫습니다.

시뮬레이션: 느낄 것이 있을 때만

변수가 있는 공식, 단계가 있는 프로세스, 타임라인, 파형, 상태 기계. 양적 또는 프로세스 중심 과목의 대부분 유닛에서 적어도 하나의 시뮬레이션을 목표로 하세요. 역사나 법학에서는 없음. 통과하는 ref() 검사가 없는 시뮬레이션은 수정되거나 제거됩니다.

질문 다양성

주로 객관식(그럴듯한 오답, 간단한 단어로 된 한 줄 why), 모든 계산에 N, 매칭에 M, 일반적인 오해에 TF, 그리고 자료가 경고하는 혼란에 대해 trap:true 질문.

고정된 모양

모든 시각적 요소(팔레트, 둥근 글꼴, 유닛 색상, 새싹 블롭 마스코트 Pip, 두꺼운 버튼, 다크 모드, 확대/축소 없음, 텍스트 선택 없음, 하단 탭)는 엔진에 내장되어 있습니다. Pip을 변경하거나 다른 마스코트를 만들지 마세요. 기존 브랜드, 캐릭터 또는 로고를 사용하지 마세요. 과정 이름은 해당 과목을 따서 지으세요.

관련 스킬