Community코딩 & 개발github.com

arifszn/slide-wright

주제, 간단한 노트 또는 개요를 바탕으로 아름다운 웹 프레젠테이션을 만들고, 슬라이드를 추가/제거/수정하며 덱을 편집할 수 있습니다. 사용자 정의 테마와 짧은 두 슬라이드 미리보기를 생성한 후, 사용자가 방향을 확인하면 전체 덱을 빌드합니다. 기존 덱 편집 시 해당 흐름을 건너뛰고 바로 적용합니다. 슬라이드, 프레젠테이션, 토크 덱, 피치 덱을 만들거나 기존 슬라이드를 추가/제거/변경하려는 경우에 사용하세요.

slide-wright란 무엇인가요?

slide-wright는 주제나 간단한 노트를 전략적이고 전문적인 프레젠테이션으로 변환하는 AI 에이전트 스킬입니다. 단일 자체 포함 HTML 파일로 제공되어 모든 브라우저에서 실행되며, reveal.js를 엔진으로 사용하지만 사용자에게는 슬라이드, 테마, 디자인 관점으로만 설명합니다. 새로운 덱을 만들 때는 먼저 테마를 제안하고 두 슬라이드 미리보기를 생성하여 사용자 승인을 받은 후 전체 덱을 빌드하는 단계별 프로세스를 따릅니다. 사용자가 거절하면 완전히 다른 방향으로 재시도하며, 하나의 제안만 제시합니다. 기존 HTML 덱이 reveal.js 기반인 경우 테마를 유지한 채 바로 편집하여 제안 단계를 건너뜁니다. Claude Code, Cursor와 같은 AI 코딩 에이전트에서 활용할 수 있으며, 참조 파일들을 통해 디자인 미학, 테마 생성, 코드 슬라이드, 애니메이션, 미디어, PDF/PPTX 내보내기, 배포 등의 고급 기능을 지원합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/arifszn/slide-wright/tree/HEAD/slide-wright

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

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

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

문서

slide-wright은(는) 무엇을 하나요?

주제나 간단한 노트를 보드룸 수준의 프레젠테이션으로 바꾸세요: 강력한 전략 또는 제품 팀이 만든 듯한 슬라이드로, 단일 자체 포함 HTML 파일로 제공되어 모든 브라우저에서 실행됩니다.

이 스킬을 정의하는 규칙

덱을 만들기 전에 디자인을 먼저 제안하세요. 첫 번째 패스에서는 완성된 프레젠테이션을 절대 만들지 않습니다. 테마를 생성하고, 그 테마로 두 슬라이드 미리보기를 만든 후, 사용자가 방향을 승인할 때까지 멈춥니다. 그런 다음에만 나머지를 빌드합니다.

한 번에 하나의 제안만, 메뉴는 제공하지 않습니다. 사용자가 거절하면 방향을 버리고 명확히 다른 방향을 시도하세요. 모든 테마는 현재 앞에 있는 덱을 위해 새로 만들어집니다. 미리 정의된 라이브러리는 없습니다.

새 덱: 먼저 references/new-deck.md를 읽으세요. 여기에는 1-4단계(덱 구성, 디자인 제안, 승인 받기, 빌드)와 정확한 승인 게이트가 포함되어 있습니다.

엔진 (내부용으로 유지하세요)

덱은 CDN에서 로드된 reveal.js로 렌더링되지만, 이는 사용자가 볼 수 없는 구현 세부 사항입니다. 슬라이드, 테마, 디자인에 대해 이야기하고 라이브러리 이름은 생성된 <link> 및 <script> 태그 안에서만 나타납니다. references/deck-template.md에 정확한 설정이 있습니다.

기존 덱 편집하기

사용자가 기존 HTML 덱을 가리키면 reveal.js 기반인지 확인하세요(reveal.js <link>/<script> CDN 태그를 찾으세요). 그렇다면 — 이 스킬로 만들었든 아니든 — 처음부터 다시 시작하지 말고: 읽고, 테마를 유지한 채로 그 자리에서 변경하세요. 디자인은 이미 승인되었으므로 제안과 게이트를 건너뛰세요. 편집 후 node <skill-dir>/scripts/check-deck.mjs <deck.html>을 실행하고 출력된 모든 줄을 수정하세요(자세한 내용은 references/new-deck.md 참조).

편집에는 참조 파일이 필요하지 않습니다. 단, 새로운 전시 유형을 추가하는 경우(references/exhibits.md 읽기) 또는 코드나 애니메이션을 추가하는 경우(references/code-slides.md 또는 references/motion-recipes.md 읽기)는 예외입니다.

덱이 HTML이지만 reveal.js 기반이 아닌 경우(다른 엔진, 일반 슬라이드 등) 이 스킬의 편집 경로에 해당하지 않습니다. 다른 엔진으로 강제로 다시 작성하지 말고 그렇게 말하세요. 여기의 나머지 내용은 새 덱을 만들기 위한 것입니다.

5단계 — 전달하기

  1. 완성된 덱을 엽니다.
  2. 파일 위치, 테마 이름, 슬라이드 개수를 알려줍니다.
  3. 사용자에게 덱 사용 방법을 알려줍니다: 화살표 키, 스페이스바 또는 스와이프로 이동; F 전체 화면, Esc 또는 O 슬라이드 개요, S 노트가 있는 발표자 보기; URL에 ?print-pdf를 추가하고 인쇄하여 PDF 저장(references/export-pdf.md에 단계 있음); 테마 색상은 :root 변수, 글꼴은 <link>에 있습니다.
  4. 다음 단계를 제안합니다: 콘텐츠 수정, 테마 변경, PDF 내보내기, PowerPoint 파일 내보내기(references/export-pptx.md), 또는 라이브 URL로 배포하여 공유. 배포를 원하면 references/deploy.md를 읽고 호스트(Surge, Vercel 또는 Netlify)를 선택하게 하세요 — 하나를 가정하지 마세요.

참조 파일

한 번에 모두 읽지 말고 필요할 때 읽으세요:

  • references/new-deck.md — 새 덱을 위한 1-4단계: 덱 구성, 디자인 제안, 승인 받기, 빌드
  • references/design-aesthetics.md — 덱이 디자인되어 보이게 하는 요소 (2단계)
  • references/theme-generation.md — 테마를 만드는 절차 (2단계)
  • references/deck-template.md — HTML 뼈대, 레이아웃 및 엔진 설정 (2단계 및 4단계)
  • references/exhibits.md — 각 콘텐츠 슬라이드의 시각 자료 선택 및 구축 (2단계 및 4단계)
  • references/code-slides.md — 코드 슬라이드 및 마크업 계약 (4단계)
  • references/motion-recipes.md — 사용자가 요청할 때의 애니메이션 (4단계)
  • references/media.md — 슬라이드의 이미지 및 비디오 (4단계)
  • references/export-pdf.md — 덱을 PDF로 저장 (5단계)
  • references/export-pptx.md — 덱을 편집 가능한 텍스트가 있는 PowerPoint로 내보내기 (5단계)
  • references/deploy.md — 덱을 라이브 URL로 게시 (5단계)

관련 스킬