Communitygithub.com

shakedal1/강의자료-재구성

지루하거나 혼란스러운 강의, 실습 또는 튜토리얼 슬라이드(PDF 또는 PPTX)를 비유, 예제, 퀴즈, 다이어그램, 애니메이션으로 구성된 명확하고 매력적인 Slides 아티팩트로 재구성합니다. 영어, 히브리어 또는 두 언어를 모두 지원합니다.

강의자료-재구성란 무엇인가요?

이 스킬은 기존의 딱딱한 강의 자료(PDF 또는 PPTX)를 학생들이 실제로 배울 수 있는 인터랙티브한 슬라이드 데크로 재탄생시킵니다. Slides 아티팩트 유형을 기반으로 각 언어별로 하나의 데크를 생성하며, 교수 설계, 애니메이션, 명령어 강조 규칙, 히브리어 오른쪽-왼쪽(RTL) 텍스트 처리 기법을 추가합니다. 소스 자료를 먼저 분석하여 주제, 명령어, 정의, 퀴즈, 이미지 등을 목록화한 후, 하나의 구체적인 실행 예제(예: 3비트 one-hot FSM을 '3개의 램프 체이서'로 비유)와 일상생활에서 가져온 비유, 4~6개 슬라이드마다 퀴즈를 배치하여 학습 효과를 극대화합니다. 원본의 관련 이미지는 유지하고, 설명이 필요한 부분은 SVG/div로 다이어그램을 그리며, 모든 콘텐츠 슬라이드에는 필수적으로 애니메이션(빌드 시퀀스, 매직 무브 등)을 적용합니다. 명령어는 '명령 칩' 형식으로 독립적인 블록에 강조하여 표시하며, 최종적으로 치트 시트와 용어집을 포함합니다. Claude Code, Cursor, Codex 등 AI 코딩 에이전트가 PDF/PPTX 분석, 이미지 크롭, 아티팩트 게시와 같은 복잡한 작업을 수행하는 데 특화되어 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/shakedal1/lecture-deck-remake/tree/HEAD

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

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

문서

강의 자료 데크 재구성

딱딱한 강의 자료를 학생들이 실제로 배울 수 있는 데크로 전환합니다. 결과물은 Slides 아티팩트 유형으로 만든 데크입니다(언어당 하나씩). 슬라이드 형식, 파일, 게시에 관한 모든 것은 해당 유형의 지침을 따릅니다. 이 스킬은 그 위에 교수 설계, 애니메이션 및 명령어 규칙, 히브리어 RTL 기법을 추가합니다.

첫 번째 슬라이드를 작성하기 전에 references/patterns.md를 읽으십시오. 아래에 명명된 모든 패턴에 대한 복사 가능한 마크업이 포함되어 있습니다.

1. 소스 전체를 먼저 읽기

  • PDF: Read를 사용하여 최대 20페이지씩 나누어 모든 페이지를 볼 때까지 읽습니다. PPTX: pptx 스킬을 사용하여 텍스트와 이미지를 추출합니다.
  • 읽는 동안 다음을 나열합니다: 순서대로 주제, 모든 명령어 또는 코드 조각, 모든 정의, 데크에 이미 있는 모든 퀴즈 또는 질문, 그리고 한 호출이 변경된 동일한 스크린샷을 반복하는 슬라이드. 이러한 반복 슬라이드는 가장 먼저 병합해야 할 대상입니다.
  • 또한 유지할 가치가 있는 모든 그림을 나열합니다: 사진, 실제 물체 또는 모델, 도구 스크린샷, 손으로 그릴 수 없는 것을 보여주는 그림. 각 그림의 페이지와 Read 미리보기에서의 대략적인 위치를 기록합니다. 나중에 자를 것입니다(§6).
  • 소스의 모든 사실(이름, 날짜, 이메일, 채점, 링크, 명령어 플래그)을 유지합니다. 소스나 예제 자체의 논리에서 파생할 수 없는 숫자, 인용문, 도구 동작을 절대 만들어내지 마십시오.

2. 교수 계획 수립, 그런 다음 구축

한 줄로 사용자에게 계획을 알리고 시작하십시오. 승인을 기다리지 마십시오.

  • 하나의 실행 예제. 소스 자체의 예제를 선택하고 구체적인 물리적 그림을 부여합니다(3비트 one-hot FSM은 "3개의 램프 체이서"가 되었습니다). 모든 슬라이드에서 재사용합니다: 속성은 그것에 대한 평범한 질문이 되고, 결과는 해당 용어로 설명됩니다.
  • 개념당 하나의 비유, 일상생활에서 가져와서 슬라이드에 기울임꼴로 형식적 정의 옆에 배치합니다(시뮬레이션 대 형식적 검증 = 1,000개의 열쇠 시도 대 자물쇠 기술자가 메커니즘 증명; 리셋 = "새 게임"; 클록 = 메트로놈; 경계 = 거리에서 가장 가까운 커피숍; 디버깅 "왜" = 시간을 거슬러 가는 탐정).
  • 4~6개 슬라이드마다 퀴즈: 실행 전 예측, 손으로 추적, "X를 바꾸면 어떻게 될까", 참/거짓. 정답은 클릭 시 나타나는 고정된 상자에 표시됩니다. 정답을 발표자 노트에도 넣으십시오.
  • 소스의 그림을 유지하고, 나머지는 그립니다. 사용자는 원본의 관련 그림이 데크에 포함되기를 원합니다. 그림을 위해 그림을 버리지 마십시오. 목록의 각 그림에 대해:
    • 당신의 그림과 같은 것을 보여주는 경우(해상도 스트립, 도구의 실제 창, 전후 비교), 그림을 대신 사용하십시오.
    • 그림이 추가할 수 없는 것을 보여주는 경우(실제 사진, 실제 3D 모델, 실제 데이터셋), 실행 예제 그림과 같은 슬라이드에 배치하고 한 줄 캡션으로 연결하십시오.
    • 순전히 장식적이거나 다른 그림을 반복하는 경우 생략하고 보고서에 이름을 명시하십시오. 소스가 말로만 설명하는 것은 SVG/div(patterns.md)로 그립니다: 상태 다이어그램, 파형, 타임라인, 수직선, 실행 예제의 단계별 구축.
  • 슬라이드당 한 가지 아이디어, 약 20~26개의 슬라이드. 리듬을 따르십시오: 표지, 각 섹션 시작 및 요약을 위한 어두운 배경 슬라이드; 밝은 내용 슬라이드; 퀴즈 슬라이드를 위한 따뜻한 색조 배경.
  • 치트 시트로 마무리: 모든 명령어를 순서대로 2~3단어 설명과 함께, 그리고 핵심 용어의 용어집을 포함하십시오.

3. 애니메이션은 필수, 선택 사항이 아님

사용자가 더 많은 애니메이션을 요청했습니다. 모든 데크는 다음을 준수해야 합니다:

  • 모든 섹션에 data-transition을 넣으십시오: 대부분은 fade, 새 섹션으로 들어갈 때는 push, 동일한 다이어그램을 두 상태로 표시하는 두 슬라이드 사이에는 magic을 사용하십시오.
  • 모든 콘텐츠 슬라이드에 최소 하나의 빌드 시퀀스를 제공하십시오: 핵심 요소는 position:absolute 자식 요소로, data-build-in="<효과> <순서>"를 사용하여 프레젠테이션 모드에서 하나씩 나타나게 합니다. 빌드는 고정된 자식 요소에서만 작동하므로, 단계별로 드러나는 슬라이드는 명시적인 left/top/width로 배치됩니다.
  • 가르치는 데 도움이 되는 빌드를 사용하십시오. 흐름을 한 단계씩 드러내고(rise 1, rise 2, …), 상태 머신 화살표를 하나씩 그리고(화살표 그룹당 고정 SVG 하나), 파형을 주기별로 이동하고, 정의 후에 비유를 드러내고, 마지막에 퀴즈 답변을 표시하십시오.
  • 매직 무브를 사용하여 변경 사항을 애니메이션화하십시오: 연속된 두 슬라이드의 일치하는 고정 요소에 동일한 id를 사용합니다(램프가 켜지고, 강조 표시가 다음 주기로 이동하고, 경계 간격이 좁아짐).
  • 효과를 목적에 맞게 다양화하십시오: rise는 목록과 단계, pop은 결과 또는 확인, left/right는 특정 방향에서 도착하는 요소, fade는 주석, scale은 큰 공개용. 슬라이드당 약 6개 이상의 빌드를 사용하지 마십시오.

4. 명령어는 슬라이드에서 눈에 띄어야 함

사용자가 더 눈에 띄는 명령어를 요청했습니다. 모든 명령어, 플래그 또는 Tcl/셸 라인은 patterns.md의 명령 칩을 사용하며, 데크의 다른 어떤 것도 이와 비슷하게 보이지 않습니다:

  • 자체 블록(<p>)으로, 문장 안에 인라인으로 절대 사용하지 않습니다. Span은 색상만 전달할 수 있으므로 span의 font-family는 자동으로 무시됩니다.
  • 32~40px의 고정폭 글꼴(JetBrains Mono), 굵게. 어두운 칩 배경, 명령어에만 예약된 밝은 강조 색상, 앞쪽 가장자리에 두꺼운 강조 막대, 프롬프트 문자(%는 Tcl용, $는 셸용).
  • 각 칩 옆에 기능을 설명하는 짧은 레이블("컴파일", "모두 증명").
  • 단계 슬라이드에서 명령 칩은 제목 다음으로 가장 큰 요소이며, 가장 먼저 나타납니다.
  • 코드 목록(전체 파일)은 별도의 조용한 코드 카드 스타일을 사용하므로 명령어가 여전히 눈에 띕니다.

5. 언어

사용자가 두 가지 언어를 요청하면, 동일한 슬라이드 ID와 내용으로 해당 유형의 데크를 두 개 만드십시오. 먼저 소스 언어(또는 영어)를 구축한 다음, 다른 언어를 구축하십시오. 히브리어는 patterns.md의 RTL 기법이 필요합니다: 모든 히브리어 텍스트 블록을 &#8295;…&#8297;로 분리하고, 히브리어 내 인라인 코드를 &#8294;…&#8297;로 감싸고, text-align:right와 row-reverse 행을 사용하고, 테이블 열 순서를 반대로 하고, 시퀀스에 ←를 사용하고, 각 <br>로 구분된 줄을 개별적으로 분리하십시오. 코드, 명령 칩, 파형 및 GUI 와이어프레임은 왼쪽에서 오른쪽으로 유지하십시오. Rubik 글꼴은 히브리어와 라틴 문자를 모두 지원합니다.

6. 구축 및 게시

Slides 유형의 자체 파일 및 호출 지침을 따르되, 사용 경험에서 얻은 다음 규칙을 적용하십시오:

  • project/deck.json(전체 order, sections, faces)과 표지를 작성하고 게시한 다음, 라운드당 약 4개의 슬라이드를 작성하고 게시하십시오.
  • edits가 있는 게시는 files를 동시에 전달할 수 없습니다. Edit 도구로 편집한 다음 파일을 게시하십시오.
  • 게시가 네트워크 오류로 실패하면 동일한 파일을 다시 보내십시오. 안전합니다.
  • PDF에서 소스 그림 자르기(이 그림을 사용하는 슬라이드를 작성하기 전에 수행):
    • PDF를 스크래치패드의 새 폴더에 복사하고, 자른 결과물은 별도의 assets 폴더에 작성하십시오.
    • python -I -c "import pypdf,sys;print(pypdf.PdfReader(sys.argv[1]).pages[0].mediabox)" <pdf>로 페이지 크기를 구하십시오. PyMuPDF와 Pillow는 설치되어 있지 않습니다. pdftoppm(MiKTeX)이 설치되어 있습니다. "Windows 10 필요" 경고는 무시하십시오.
    • 페이지에서 직접 자르기: pdftoppm -f N -l N -r 250 -x X -y Y -W W -H H -png -singlefile <pdf> <assets>/<name>. 좌표는 Read 미리보기에서 가져옵니다: 스케일 = (250 / 72) × 페이지 너비(pt) / 미리보기 너비(px). 720pt 페이지가 1000px 너비로 미리보기되면 ×2.5입니다.
    • 각 자른 이미지를 한 번 Read하고 가장자리를 수정한 후 업로드하십시오. 이웃 그림의 조각이 포함되는 경우가 일반적입니다.
    • 패널 스트립(예: 7가지 해상도의 단일 이미지)을 패널당 하나의 자르기로 분할하여 패널이 하나씩 나타날 수 있게 하십시오.
    • 모든 자른 이미지를 한 번의 호출로 업로드: Artifact publish에 url, asset: true, file_paths(최대 25개)를 사용하십시오. 반환된 각 /_blob/<id>를 <img src>에 그대로 사용하고, object-fit:contain과 자른 이미지의 종횡비와 일치하는 width/height를 지정하십시오.
    • PPTX의 경우, pptx 스킬이 추출한 이미지를 가져온 다음 동일한 방식으로 업로드하십시오.
  • 높이 예산: 여백 내에서 824px. 제목 블록 약 130px, 테이블 행은 줄당 글꼴 크기의 약 2.1배, 고정 상자는 y 952 이상으로 끝나야 합니다. 텍스트를 줄이기 전에 짧게 하고, 텍스트는 24px 이상으로 유지하십시오.
  • 사용자가 요청하지 않는 한 렌더링하거나 스크린샷을 찍어 확인하지 마십시오.

7. 보고서

각 데크의 링크, 원본과 비교하여 변경된 사항(실행 예제, 비유, 삽화, 유지된 소스 그림과 위치, 생략된 그림, 퀴즈, 애니메이션, 명령어 스타일링, 병합된 반복 슬라이드), 그리고 확인하지 않은 사항을 제공하십시오. 데크가 공유되기 전까지는 비공개임을 사용자에게 상기시키십시오.

관련 스킬