스킬 자체의 표현으로
3계층 디자인 토큰 아키텍처(primitive → semantic → component), 컴포넌트 명세, 브랜드 규정을 준수하는 프레젠테이션 슬라이드를 생성합니다. Primitive 토큰은 --color-blue-600과 같은 원시 값을 정의합니다. Semantic 토큰은 용도에 따라 이를 별칭으로 매핑합니다(--color-primary). Component 토큰은 컴포넌트별 사용법을 지정합니다(--button-bg).
이 스킬은 CSS 변수, Tailwind 테마 통합을 위한 생성 및 검증 스크립트와, 15개의 덱 구조, 25개의 레이아웃, Duarte의 스파크라인 감정 곡선(sparkline emotion arc)에 걸쳐 BM25 검색을 사용하는 상황 인지형 슬라이드 시스템을 제공합니다. 모든 슬라이드는 design-tokens.css를 임포트해야 하며 CSS 변수만 사용해야 합니다. 데이터 시각화에는 Chart.js가 필요합니다. Pexels와 Unsplash 이미지 가져오기를 지원합니다.
산출물
- 토큰을 참조해야 하는데 소스 코드에 하드코딩된 값을 식별하는 토큰 검증 보고서
작동 방식
- 01토큰 아키텍처 참조 문서 로드
이 스킬은 토큰을 생성하거나 검증하기 전에 references/token-architecture.md를 로드하여 3계층 토큰 구조를 설정합니다.
- 02JSON 설정에서 CSS 생성
JSON 설정 파일과 함께 generate-tokens.cjs를 실행하여 3계층 토큰 구조를 CSS 변수로 담은 CSS 파일을 출력합니다.
- 03목표별 슬라이드 전략 검색
search-slides.py를 통한 BM25 검색을 사용하여 slide-strategies.csv에서 도메인(카피 또는 차트)과 맥락적 위치로 선택적으로 필터링하면서 일치하는 덱 구조, 감정 아크, 스파크라인 비트를 찾습니다.
- 04맥락적 의사결정 흐름 적용
목표를 파싱하고, 레이아웃과 break_pattern 플래그를 위해 slide-layout-logic.csv를, 타입 스케일을 위해 slide-typography.csv를, 색상 처리를 위해 slide-color-logic.csv를, 이미지 카테고리를 위해 slide-backgrounds.csv를 조회합니다.
- 05디자인 토큰으로 HTML 생성
assets/design-tokens.css를 가져오고, 모든 스타일링에 var()를 사용하며, 차트를 위해 Chart.js를 포함하고, slide-animations.css에서 내비게이션 및 애니메이션 클래스를 추가하는 슬라이드 HTML을 생성합니다.
- 06토큰 준수 검증
slide-token-validator.py를 실행하여 생성된 슬라이드 HTML이 CSS 변수만 사용하고 하드코딩된 색상, 폰트, 여백 값을 포함하지 않는지 확인합니다.