Menu
Remotion 슬라이드/쇼츠 프로젝트의 컬러 테마 레퍼런스. 테마 추가·수정·조회 시 참조. "테마", "색상", "theme" 등의 요청에 사용.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Remotion 슬라이드의 compare 타입 전용 스킬. 2~4개 항목을 나란히 비교하는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 evolution-flow 타입 전용 스킬. 왼쪽 상태에서 오른쪽 상태로 무엇이 어떻게 바뀌었는지, 그 변화 축과 결과를 3열 흐름으로 설명할 때 사용.
슬라이드를 PDF로 내보내기. 각 슬라이드를 PNG로 렌더한 뒤 pdf-lib으로 합쳐서 단일 PDF 파일을 생성한다. "PDF로 뽑아줘", "PDF 내보내기" 등의 요청에 사용.
Remotion 슬라이드의 quote 타입 전용 스킬. 핵심 문장이나 인용구를 큰따옴표 장식과 함께 크게 보여주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 stat 타입 전용 스킬. 큰 숫자와 짧은 설명으로 임팩트를 주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 steps 타입 전용 스킬. 번호가 매겨진 순차 프로세스를 연결선과 함께 보여주는 슬라이드를 설계하거나 수정할 때 사용.
| name | remotion-themes |
| description | Remotion 슬라이드/쇼츠 프로젝트의 컬러 테마 레퍼런스. 테마 추가·수정·조회 시 참조. "테마", "색상", "theme" 등의 요청에 사용. |
src/slides/themes.ts — 모든 테마 정의와 getTheme() 헬퍼 함수가 위치.
interface ThemeColors {
bg: string; // 배경색
title: string; // 제목 텍스트 색
text: string; // 본문 텍스트 색
accent: string; // 강조색
badge: [BadgeStyle, BadgeStyle]; // 테마당 뱃지 2종
}
interface BadgeStyle {
bg: string; // 뱃지 배경색
text: string; // 뱃지 텍스트 색
}
| 속성 | 값 |
|---|---|
| bg | #2D2D2D |
| title | #FFFFFF |
| text | #E0E0E0 |
| accent | #FFFFFF |
| badge[0] | bg #1A1A1A, text #FFFFFF |
| badge[1] | bg #1A1A1A, text #FFFFFF |
| 속성 | 값 |
|---|---|
| bg | #2196F3 |
| title | #000000 |
| text | #1A1A1A |
| accent | #FFFFFF |
| badge[0] | bg #1A1A1A, text #FFFFFF |
| badge[1] | bg #1565C0, text #FFFFFF |
| 속성 | 값 |
|---|---|
| bg | #E8734A |
| title | #FFFFFF |
| text | #FFF5F0 |
| accent | #FFFFFF |
| badge[0] | bg #1A1A1A, text #FFFFFF |
| badge[1] | bg #C4532A, text #FFFFFF |
| 속성 | 값 |
|---|---|
| bg | #F5E94B |
| title | #111111 |
| text | #1F1F1F |
| accent | #000000 |
| badge[0] | bg #000000, text #FAFF69 |
| badge[1] | bg #333333, text #FFFFFF |
| 속성 | 값 |
|---|---|
| bg | #000000 |
| title | #FFFFFF |
| text | #CCCCCC |
| accent | #FAFF69 (네온 옐로) |
| badge[0] | bg #FAFF69, text #000000 |
| badge[1] | bg #333333, text #FFFFFF |
추가 호환 테마로 parchment, figma도 사용할 수 있다. 다만 기본 보장 세트는 dark, blue, orange, yellow, black 5종이다.
markdowns/<topic>/DESIGN.md는 아무 때나 자동 적용되지 않는다. 슬라이드 frontmatter의 theme:가 정확히 DESIGN.md일 때만 해당 주제의 프레젠터·슬라이드·쇼츠에서 적극적으로 오버라이드한다.
theme: DESIGN.md일 때 merge 순서는 DESIGN baseTheme(없으면 dark) -> DESIGN.md 공통 override -> DESIGN.md의 baseTheme별 overridetheme: orange, theme: blue 같은 일반 테마를 쓰면 DESIGN.md가 있어도 무시하고 기본 테마만 사용한다theme: DESIGN.md를 쓰면 dark 기반으로 동작한다src/slides/themes.ts 또는 src/slides/designTheme.ts를 같이 수정해 해당 디자인 시스템이 실제로 반영되게 한다theme: DESIGN.md로 프레젠터/프리뷰를 다시 띄워 실제 적용을 확인한다DESIGN.md를 읽고 현재 코드가 어느 정도 추출 가능한지 판단한다.themes.ts / designTheme.ts를 수정한다.theme: DESIGN.md로 프레젠터/프리뷰를 다시 띄워 실제 적용을 확인한다.DESIGN.md 안에 다음처럼 fenced block을 두면 가장 안정적으로 반영된다.
{
"baseTheme": "figma",
"default": {
"fontHeading": "figmaSans Fallback, 'SF Pro Display', system-ui, sans-serif",
"fontBody": "figmaSans Fallback, 'SF Pro Display', system-ui, sans-serif",
"fontLabel": "figmaMono Fallback, 'SF Mono', Menlo, monospace",
"titleLetterSpacing": "-1.72px",
"titleLineHeight": 1,
"badgeRadius": 50,
"bulletMarker": "—"
},
"themes": {
"blue": {
"bg": "#2196F3"
}
}
}
코드펜스 언어는 theme, theme-overrides, json, yaml, yml 중 아무거나 사용 가능하다.
구조화 블록이 없더라도 DESIGN.md의 자연어 설명에서 Figma 스타일, letter-spacing, line-height, font family 같은 힌트를 일부 추출해 반영한다.
---
theme: black
---
기본 테마 사용:
---
theme: orange
---
이 경우 DESIGN.md가 같은 폴더에 있어도 무시한다.
주제별 DESIGN 사용:
---
theme: DESIGN.md
---
이 경우에만 DESIGN.md를 적극 적용한다. 미지정 시 dark.
각 테마는 뱃지 스타일 2종(badge[0], badge[1])을 가진다. 마크다운에서 {1}을 붙이면 두 번째 뱃지 색 사용:
# [뱃지 텍스트]{1} 타이틀
import { getTheme } from "./themes";
const theme = getTheme("black"); // ThemeColors 반환
const badgeStyle = theme.badge[0]; // BadgeStyle 반환
src/slides/themes.ts의 THEMES 객체에 새 테마 추가src/slides/types.ts의 Theme 타입 유니온에 이름 추가remotion-themes/SKILL.md)에 동기화markdowns/<topic>/DESIGN.md override로 우선 해결