القائمة
Remotion 슬라이드의 evolution-flow 타입 전용 스킬. 왼쪽 상태에서 오른쪽 상태로 무엇이 어떻게 바뀌었는지, 그 변화 축과 결과를 3열 흐름으로 설명할 때 사용.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Remotion 슬라이드의 compare 타입 전용 스킬. 2~4개 항목을 나란히 비교하는 슬라이드를 설계하거나 수정할 때 사용.
슬라이드를 PDF로 내보내기. 각 슬라이드를 PNG로 렌더한 뒤 pdf-lib으로 합쳐서 단일 PDF 파일을 생성한다. "PDF로 뽑아줘", "PDF 내보내기" 등의 요청에 사용.
Remotion 슬라이드의 quote 타입 전용 스킬. 핵심 문장이나 인용구를 큰따옴표 장식과 함께 크게 보여주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 stat 타입 전용 스킬. 큰 숫자와 짧은 설명으로 임팩트를 주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 steps 타입 전용 스킬. 번호가 매겨진 순차 프로세스를 연결선과 함께 보여주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 기반 타이포 중심 발표 슬라이드 생성의 상위 오케스트레이터 스킬. 슬라이드 주제와 내용을 보고 적절한 개별 타입 스킬(title-image, title-tags, title-bullets, split)을 선택해 구성할 때 사용.
| name | remotion-slide-evolution-flow |
| description | Remotion 슬라이드의 evolution-flow 타입 전용 스킬. 왼쪽 상태에서 오른쪽 상태로 무엇이 어떻게 바뀌었는지, 그 변화 축과 결과를 3열 흐름으로 설명할 때 사용. |
{
type: "evolution-flow",
badge: "카테고리명",
title: "메인 타이틀",
fromTitle: "이전 상태",
fromImage: "before.png", // optional
fromBullets: [
"기존 문제 1",
"기존 문제 2",
],
toTitle: "이후 상태",
toImage: "after.png", // optional
toBullets: [
"변화 결과 1",
"변화 결과 2",
],
theme: "blue",
}
# [개선] 검색 경험이 어떻게 바뀌었나
<< 기존 검색
- 결과 목록이 길게 이어진다
- 먼저 읽어야 할 답이 눈에 띄지 않는다
==
>> 개선된 검색
- 핵심 답이 먼저 보인다
- 다음 클릭이 자연스럽게 이어진다
좌우 섹션에서 대괄호 표기는 배지로 처리한다.
<< [기존]
- 결과 목록이 길게 이어진다
>>
또는 배지와 제목을 같이 쓸 수 있다.
<< [기존] 검색 경험
>> [개선] 검색 경험
이미지가 있으면 좌우 섹션 안에 넣는다.
# [개선] 가입 플로우가 빨라졌다
<< 기존 가입
- 입력 단계가 길다
- 중도 이탈이 많다
==
>> 개선된 가입
- 핵심 입력만 남았다
- 완료까지의 흐름이 분명하다
==는 레이아웃 전환 신호일 뿐이며, 그 아래에 불릿이나 설명을 쓰지 않는다[텍스트]는 실제 배지로 렌더한다fromImage / toImage가 없고 해당 섹션의 불릿도 없을 때, ImagePlaceholder가 자동으로 렌더된다src/slides/components/ImagePlaceholder.tsx1fr 1fr, gap 60px) — 좌우 배지 + 불릿/이미지useRef + offsetLeft/offsetWidth로 배지 DOM 위치를 측정하여 좌표 계산position: absolute로 그리드 위에 오버레이이 경우는 split, title-bullets, 또는 여러 장으로 나누는 편이 낫다.