remocn 컴포넌트 하나 추가
요청: $ARGUMENTS
먼저 계층 규칙과 Canvas 및 타이밍을 위해 remocn 스킬을 로드하세요.
- 이름 확인. 요청이 정확한 컴포넌트 이름이면 그대로 사용합니다. 설명 형태라면("글리치 제목", "빠른 컷" 등)
https://remocn.dev/llms-components.txt에서 후보를 추려 가장 적합한 두세 개를 각각의Use for줄과 길이와 함께 제시하고, 선택을 기다립니다. - 페이지 읽기. 인덱스에서 제공하는
.md문서 URL을 가져옵니다. props, 예제,Length및Avoid for노트를 확인합니다. Avoid 노트가 사용자의 요청과 일치하면 이를 알리고 노트에서 제안하는 대체 컴포넌트를 추천합니다. - 프로젝트를 한 번 준비합니다.
components.json에@remocn레지스트리가 없으면 먼저node "${CLAUDE_SKILL_DIR}/../video/scripts/setup.mjs" <project-root>를 실행합니다 (Claude Code 외부에서는 이 스킬 폴더에서../video/scripts/setup.mjs). JSON 결과로 어떤 파일을 썼는지 알려주고warning이 있으면 전달합니다. - 설치.
npx shadcn add @remocn/<이름>을 실행합니다. 의존성은 전이적으로 설치되며, 어떤 파일이 생성되었는지 나열합니다. - 사용법 제시. 문서 예제를 기반으로 Canvas 크기에 맞추고, 최소
Length에 머무는 시간을 더한<Sequence durationInFrames>안에 배치한 사용법 코드 조각을 보여줍니다. 전환은TransitionSeries.Transition의presentation으로,linearTiming/springTiming과 함께Length를 사용하여 배치합니다. 사용자가 코드 내 특정 위치를 지정했다면 거기에 배치하고, 그렇지 않으면 어디에 넣을지 물어봅니다. - 확인.
npx tsc --noEmit을 실행한 후, 모션 끝의 스틸 이미지를 생성하여 확인합니다 (npx remotion still <composition> out/<이름>.png --frame=<n>). 이미지를 살펴봅니다.