Repolode
제출하기
ywEdAi

ywEdAi/teachable-figures

수업의 주장을 학습자가 결과를 예측하고, 원인을 바꾸고, 새로운 사례를 설명하는 인터랙티브 도형으로 바꾸는 에이전트 스킬입니다.

GitHub에서 보기웹사이트
스타
277
포크
38
열린 이슈
0
마지막 커밋
3일 전

어떤 프로젝트인가요?

Teachable figures는 하나의 인과 관계 주장에 초점을 둔 인터랙티브 교육용 도형을 만드는 에이전트 스킬입니다. 학습자는 결과를 예측하고, 기본 컨트롤로 원인을 바꾸고, 효과를 관찰한 다음, 전이 사례를 설명합니다. 이 스킬은 먼저 주장, 흔한 오개념, 원인, 관찰 가능한 효과, 기저의 진리 모델을 명시한 교육용 사양을 작성한 뒤, 그에 맞춰 도형과 렌더러를 선택합니다.

저장소에는 스킬 지침, 두 가지 상위 스킬을 바탕으로 만든 렌더링 키트(기계식 솔리드와 3D 뷰를 위한 Anatomy, 아이소메트릭 SVG를 위한 iso-figure), 오프라인에서 독립형 HTML로 실행되는 완성된 예제 수업 6개, 브라우저 및 모델 테스트 스위트가 포함되어 있습니다. 호스트 애플리케이션의 수업 스키마와 함께 사용할 수도 있고 독립형 HTML 도형으로도 사용할 수 있으며, Claude Code 또는 Codex의 스킬 디렉터리에 설치할 수 있습니다.

예제에서는 기어비, 원뿔 단면, 3D 인체 흉부, 로켓 내부 구조도, Transformer 어텐션 데이터 흐름, 명나라 시대의 의상을 다룹니다. 프로젝트 설명에 따르면 생성된 도형은 교육용 설계물이며 학습자를 대상으로 평가되지는 않았습니다.

핵심 기능

  • 01하나의 교육용 주장을 예측, 시도, 설명으로 이어지는 상호작용 과정으로 바꿉니다.
  • 022D SVG, 아이소메트릭 SVG, 기계식 절개도, 회전하는 3D 뷰를 위한 렌더링 키트를 제공합니다.
  • 03기본 컨트롤, 초기화 기능, 이중 언어 페이지를 갖춘 오프라인 HTML 수업 예제 6개를 제공합니다.
  • 04모델 및 브라우저 테스트 스위트와 3D 지오메트리 감사 스크립트를 포함합니다.
  • 05Claude Code 또는 Codex의 스킬로 설치하거나 일반 HTML 도형에서 사용할 수 있습니다.

활용 사례

  • 입력 하나를 바꾸면 출력이 어떻게 달라지는지 보여 주는 인터랙티브 물리 또는 역학 데모 만들기.
  • 오개념을 다루는 수업을 위한 독립형 HTML 교육용 도형 만들기.
  • 기존 교육용 웹 앱에 예측하고 설명하는 상호작용 추가하기.
  • 어텐션이나 기어 트레인 같은 추상적인 모델을 학생들에게 보여 줄 시각화 방법 탐색하기.

빠른 시작

  1. 1

    저장소를 skills 디렉터리에 클론하여 Claude Code에 설치합니다

    git clone https://github.com/ywEdAi/teachable-figures.git ~/.claude/skills/teachable-figures
  2. 2

    Claude Code를 다시 시작한 다음 /teachable-figures를 입력하고 가르칠 작업을 설명합니다

  3. 3

    선택 사항으로 개발 종속성을 설치해 검사를 실행합니다

    npm ci

사용 전 알아둘 점

  • 메타데이터에 라이선스가 명시되어 있지 않아 재사용 조건이 불분명합니다.
  • 학습자를 대상으로 그림을 평가하지 않았으므로 교육 효과가 입증되지 않았습니다.
  • 포함된 예시 중 일부에는 자동 재생 투어가 있어 수업에 통합하기 전에 비활성화해야 합니다.
  • 브라우저 검사를 실행하려면 Google Chrome이 설치되어 있거나 Playwright Chromium 환경이 필요합니다.

포함된 컬렉션

Claude Code 도구·스킬·플러그인AI 코딩 어시스턴트와 에이전트AI 에이전트 스킬 라이브러리오픈소스 교육 및 학습 도구

토픽

#agent-skill#education#interactive-learning#svg#webgl#html#claude-code#codex

자주 묻는 질문

teachable-figures은(는) 무엇인가요?
수업의 주장을 학습자가 결과를 예측하고, 원인을 바꾸고, 새로운 사례를 설명하는 인터랙티브 도형으로 바꾸는 에이전트 스킬입니다. Teachable figures는 하나의 인과 관계 주장에 초점을 둔 인터랙티브 교육용 도형을 만드는 에이전트 스킬입니다. 학습자는 결과를 예측하고, 기본 컨트롤로 원인을 바꾸고, 효과를 관찰한 다음, 전이 사례를 설명합니다. 이 스킬은 먼저 주장, 흔한 오개념, 원인, 관찰 가능한 효과, 기저의 진리 모델을 명시한 교육용 사양을 작성한 뒤, 그에 맞춰 도형과 렌더러를 선택합니다.
teachable-figures은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
teachable-figures에는 명시된 라이선스가 없습니다. 코드는 공개되어 있지만 라이선스가 없으면 재사용 허가가 명확하지 않으므로, 사용 전에 작성자에게 문의하는 것이 좋습니다.
teachable-figures은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. teachable-figures의 마지막 커밋은 2026년 11월 3일입니다.
teachable-figures은(는) 어디에 사용할 수 있나요?
입력 하나를 바꾸면 출력이 어떻게 달라지는지 보여 주는 인터랙티브 물리 또는 역학 데모 만들기. 오개념을 다루는 수업을 위한 독립형 HTML 교육용 도형 만들기. 기존 교육용 웹 앱에 예측하고 설명하는 상호작용 추가하기. 어텐션이나 기어 트레인 같은 추상적인 모델을 학생들에게 보여 줄 시각화 방법 탐색하기.
teachable-figures는 어떻게 설치하나요?
저장소를 skills 디렉터리에 클론하여 Claude Code에 설치합니다: git clone https://github.com/ywEdAi/teachable-figures.git ~/.claude/skills/teachable-figures Claude Code를 다시 시작한 다음 /teachable-figures를 입력하고 가르칠 작업을 설명합니다 선택 사항으로 개발 종속성을 설치해 검사를 실행합니다: npm ci
teachable-figures은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/ywEdAi/teachable-figures

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트