메뉴
바닐라 자바스크립트 기반의 고성능 웹 프레젠테이션 슬라이드를 생성, 수정 및 확장합니다. 외부 라이브러리 없이 브라우저 표준 기술(HTML5, CSS3, ES6+)만을 사용하여 16:9 비율의 반응형 시스템을 유지하며, ApexCharts 기반의 데이터 시각화와 프리미엄 UI/UX 표준을 준수합니다.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
원본 회의 메모를 분석하고 템플릿에 맞추어 전문적인 docx 회의록을 자동 생성하는 스킬
다나와 43인치 모니터 크롤링 결과를 바탕으로 경쟁사 가격 및 사양 비교 분석을 수행하고 시각화 자료와 보고서 초안을 생성합니다. (uv 환경 사용)
다나와(Danawa) 웹사이트에서 43인치 모니터를 검색하고 삼성전자와 LG전자의 상위 10개 인기 상품을 크롤링하여 CSV로 저장합니다.
JSON 형태의 슬라이드 데이터와 주제를 바탕으로 비즈니스용 이미지를 자동 생성하고, 지정된 양식(실습양식.pptx)에 맵핑하여 완성된 PPTX 파일을 생성하는 스킬입니다.
구매 요청 메일 확인부터 품목 파싱, 협력업체 선정, 발주서 엑셀 자동 작성까지의 전체 구매 프로세스를 자동화하는 통합 스킬입니다.
엑셀 파일(.xlsx)을 읽어 JSON 포맷으로 변환하는 스킬입니다.
| name | web-slide-creator |
| description | 바닐라 자바스크립트 기반의 고성능 웹 프레젠테이션 슬라이드를 생성, 수정 및 확장합니다. 외부 라이브러리 없이 브라우저 표준 기술(HTML5, CSS3, ES6+)만을 사용하여 16:9 비율의 반응형 시스템을 유지하며, ApexCharts 기반의 데이터 시각화와 프리미엄 UI/UX 표준을 준수합니다. |
이 스킬은 고유의 Presentation 클래스를 기반으로 하는 웹 프레젠테이션 시스템을 관리합니다. 모든 결과물은 외부 이미지 없이 순수 웹 코드로만 이루어진 프리미엄 디자인 표준을 따라야 합니다.
<section class="slide" id="slide-N"> 구조를 가집니다.aspect-ratio: 16 / 9; 속성을 사용하여 비율을 고정합니다.slide-header)와 본문 박스(.content)는 반드시 최대 너비 1300px 및 중앙 정렬(margin: 0 auto) 수직 축에 정렬되어야 합니다.justify-content: center; align-items: center;)**에 필수적으로 사용합니다. 모든 슬라이드 콘텐츠는 시각적으로 좌우/상하 균형이 완벽해야 합니다.slide-header)은 슬라이드 상단 경계선에서 충분한 여백을 두어야 하며, 본문 텍스트나 카드들이 슬라이드 중앙 영역에 안정적으로 배치되도록 구성합니다.gap) 및 정렬(align-items: center;)**을 확보하기 위해 사용합니다.h2)이 일관된 위치에 포함되어야 하며, 상단 여백(margin-top: 5vh;)을 두어 답답함을 방지합니다. 하단 여유 공간은 본문 박스(.content)가 시각적 중심을 잡도록 배치합니다..glass-card, .example-box 등)들은 텍스트 양에 상관없이 동일한 높이를 가져야 합니다. 이를 위해 height: 100%와 display: flex; flex-direction: column;을 사용하여 수직 축을 정렬합니다.transform: scale()을 이용한 동적 스케일링 엔진을 권장합니다.Math.min(window.innerWidth / 1400, window.innerHeight / 787.5) 비율로 컨테이너를 확대/축소하여 공간을 꽉 채웁니다.@media print에서 transform: none !important; 처리가 필수입니다.#slide-N)를 통해 현재 위치를 관리하며, 브라우저 뒤로 가기/앞으로 가기 시에도 동기화되어야 합니다.isAnimating = true)에는 중복 입력을 무시하여 버그를 방지합니다.[data-step] 속성을 부여합니다.data-step 요소는 일정한 간격(예: 0.2초)을 두고 자동으로 노출(.visible 클래스 추가)되어야 합니다.모든 슬라이드는 다음의 색상 체계를 엄격히 준수합니다.
| 구분 | 다크 모드 (Default) | 라이트 모드 |
|---|---|---|
| Base Background | #0f172a (Slate 900) | #f8fafc (Slate 50) |
| Secondary BG | #1e293b (Slate 800) | #f1f5f9 (Slate 100) |
| Main Text | #f8fafc (Slate 50) | #0f172a (Slate 900) |
| Dim/Body Text | #94a3b8 (Slate 400) | #64748b (Slate 500) |
| Accent (Amber) | #f59e0b (Amber 500) | #d97706 (Amber 600) |
| Glass BG | rgba(30, 41, 59, 0.7) | rgba(255, 255, 255, 0.8) |
| Glass Border | rgba(255, 255, 255, 0.1) | rgba(0, 0, 0, 0.05) |
Inter (UI/본문), Outfit (헤더/강조) - Google Fonts 필수.1300px (중앙 정렬 가이드라인).1400px x 787.5px (16:9 황금 비율).margin-top)은 **전체 높이의 약 10~15%**를 권장합니다..highlight-amber 클래스를 사용하여 세렴된 하이라이트 효과를 적용합니다.generate_image)하지 마십시오. 오직 Lucide 아이콘과 CSS 그라데이션, SVG 패턴으로만 시각적 완성도를 확보합니다.backdrop-filter: blur(20px)와 반투명 배경을 조합하여 프리미엄 질감을 구현합니다.0.6s, 순차 노출(Step) 간격 0.3s.transform(특히 translate3d)과 opacity 속성만 애니메이션화하여 레이아웃 리플로우(Reflow)를 방지합니다.will-change: transform;를 사용하여 브라우저 최적화를 유도합니다.통계 데이터, 수치 비교, 트렌드 분석이 포함될 경우 반드시 ApexCharts를 사용하여 시각화합니다.
.chart-container는 슬라이드 가용 너비의 최대치인 max-width: 1100px를 유지하며, ApexCharts 옵션에서 width: '100%'를 명시하여 박스에 꽉 차게 렌더링합니다.changePalette() 시 chart.updateOptions()를 호출하여 차트 색상을 실시간 동기화합니다.프리미엄 웹 슬라이드 시스템은 단일 HTML 파일로 완벽한 문서화(PDF)가 가능해야 합니다. 이를 위해 테마 가변성과 렌더링 안정성을 보장합니다.
#presentation ID 선택자를 사용하여 스타일을 재정의합니다..slide는 반드시 display: flex !important를 유지해야 합니다. (기존 block 방식은 수직 중앙 정렬을 파괴할 수 있음).slide에 background와 color를 명시적으로 부여(!important)하고 -webkit-print-color-adjust: exact를 적용합니다.<html> 태그에 data-theme="dark"를 기본값으로 설정하여 인쇄 엔진이 CSS 변수를 안정적으로 로드하도록 권장합니다.transform: scale()이 인쇄 엔진에서 레이아웃을 파괴(잘림 현상)하는 것을 막기 위해, CSS에서 #presentation { transform: none !important; }를 적용함과 동시에 반드시 JS 동적 리셋을 병행해야 합니다.beforeprint에서 presentation.style.transform = 'none'을 실행하고 afterprint에서 initScaling()을 재호출하여 이중으로 레이아웃 안정성을 확보합니다..presentation-wrapper)의 Flex 정렬을 해제(display: block !important;)하여 슬라이드가 페이지 상단부터 정확히 배치되도록 합니다.position: absolute 구조를 해제하고, 모든 슬라이드를 수직으로 쌓아 전체가 인쇄되도록 합니다.
.presentation, .slide { display: block !important; position: relative !important; height: auto !important; opacity: 1 !important; visibility: visible !important; } (단, 개별 슬라이드 내부는 flex 유지)[data-step] 요소의 opacity: 1, transform: none, transition: none을 강제하여 슬라이드의 최종 상태가 누락 없이 출력되도록 합니다.#hud-overlay, .modal-overlay, .shortcuts-info 등 웹 전용 UI 요소를 인쇄 시 반드시 숨깁니다. (display: none !important;)exportPDF() 호출 시, ApexCharts의 애니메이션을 일시적으로 비활성화(animations: { enabled: false })한 후 인쇄창을 띄워 데이터가 완전히 그려진 상태로 캡처되도록 합니다.backdrop-filter: blur 등을 제거하고, 복잡한 그리드 레이아웃은 안정적인 flex 기반으로 폴백(Fallback) 처리합니다.PDF 저장 시 최상의 품질을 위해 다음 브라우저 인쇄 설정을 안내해야 합니다.
:root 변수를 활용하여 다크/라이트 모드를 완벽히 제어합니다.프리미엄 프레젠테이션의 일관성을 위해 다음 구조의 하단 고정형 HUD(id="hud-overlay")를 반드시 구현합니다.
ANTIGRAVITY SLIDES (브랜드 정체성 노출).01 / 10 형식의 페이지 번호 (두 자리 패딩 필수).#progress-fill).Home, Prev, Next, Print, Help 버튼 모음.id="help-modal") 형식을 사용합니다.? 버튼 클릭.? 또는 / 키 입력.닫기 버튼 클릭 또는 Escape 키 입력.kbd 태그와 설명문이 포함된 그리드 레이아웃을 권장합니다.index.html에 슬라이드 구조를 추가하고 HUD의 총 슬라이드 개수를 갱신합니다.script.js에서 차트 초기화 로직을 추가합니다(필요 시).data-step 순서와 1300px 중앙 정렬 수직 축이 맞는지 확인합니다.data-step 요소들이 나타나지 않고 빈 화면으로 남는 현상. (다른 슬라이드로 갔다가 돌아와야 출력됨)Presentation 클래스 초기화 시 this.currentIndex = 0으로 시작할 경우, 초기 handleHash()가 goto(0)를 호출할 때 "현재와 동일한 인덱스"로 판단하여 triggerSteps() 실행을 건너뛰기 때문입니다.constructor)에서 this.currentIndex = -1;로 초기화하여 첫 번째 goto(0) 호출이 반드시 전체 로직을 수행하도록 보장합니다.