nivelsulfluminense/scroll-web-skills

Scroll Web Skills

스크롤은 타임라인입니다. 웹사이트는 실제 텍스트가 오버레이된 영화이며, 각 구간은 방문자가 다음 구간을 보고 싶어 할 만큼 충분히 다르게 동작합니다.

이 파일은 시나리오입니다. 각 단계의 세부 사항은 references/에 있습니다. 현재 진행 중인 단계의 참조 파일만 읽으십시오. 당신이 할 수 있는 것, 할 수 없는 것, 물어봐야 하는 것에 대한 계약은 AGENTS.md에 있으며, 여기의 모든 지침보다 우선합니다.

당신이 전달하는 것

1. .10k/BRIEF.md: 실제 답변(또는 그러한 것으로 표시된 저작권 결정), 여정, 감정 곡선, 정점 및 비디오 방향.
2. .10k/VISUAL_STORY.md: 3열 테이블, 악보(비트별 장치, 막별 vh), 그리고 해당되는 경우 비디오 프롬프트 노트북(Veo 3, Seedance 2 또는 기타 생성기) – 클립별 완전한 기술 사양 포함.
3. 실제 HTML/CSS 스타일 타일. 사이트에서 사용할 토큰이 포함됩니다.
4. 승인된 미디어. 스크롤용으로 처리되었습니다(scripts/process-media.sh). 마스터 파일은 게시 폴더 외부에 있습니다.
5. 대상 플랫폼에 맞게 빌드된 사이트. engine/ 엔진을 수정 없이 사용합니다.
6. scripts/qa-audit.ts의 qa-report/ 결과, 체크리스트 점수 /80 및 증거, 그리고 확인되지 않은 항목에 대한 정직한 목록.
7. 고객 핸드오버.

0단계: 환경 준비

• node scripts/doctor.mjs를 실행하십시오. 누락된 항목을 한 문장으로 말하십시오. 조용히 우회하지 마십시오.
• .10k/plan.md 파일이 있으면 읽고 다음 허용된 작업을 계속하십시오. 재개한다고 해서 브리핑, 제작 수준 또는 승인이 초기화되지는 않습니다.
• 엔진은 프로젝트로 복사되며, 프로젝트별로 편집되지 않습니다. 맞춤 동작은 --tk-p 및 data-tk-*를 읽는 페이지 코드에 작성됩니다.

1단계: 인테이크 → references/00-intake.md

다른 모든 것보다 먼저 모드, 제작 수준 및 비디오 전략을 정의하십시오.

모드	사용 시기	변경 사항
가이드	기본값	두 가지 검토 지점: 시각적 방향 및 시각적 스토리
위임	사용자가 "당신이 결정하세요", "당신의 판단을 신뢰합니다"라고 말함	명시적 위임 하에 저작 표시된 브리핑을 작성하고 창의적 승인을 요청하지 않고 진행
템플릿	"템플릿을 만들어 주세요", "답변을 가정하세요"	교체하기 쉬운 임시 콘텐츠, 가정 사항은 핸드오버에 나열
비디오 디렉터 (Veo 3 / Seedance 2 / 기타 프롬프트)	사용자가 외부 생성기에서 백그라운드 비디오 또는 특정 영역의 비디오를 생성하려는 경우(또는 모든 모드와 함께 활성화)	대상 비디오 스타일 인터뷰를 진행하고 Veo 3, Seedance 2 또는 기타 모델에 대한 하이퍼 디테일 프롬프트를 완전한 기술 사양(내용, 형식, 확장자, 해상도, fps, 지속 시간 및 안전 영역)과 함께 생성

위임은 창의적 결정을 포함합니다. 비용 지출, 게시 또는 외부 작업은 절대 포함하지 않습니다 (AGENTS.md 참조).

제작 수준: 집중형, 스튜디오 또는 최대. 수준은 미디어 생성에 얼마나 많은 노력을 투자할지 결정합니다. 결과의 품질 기준은 세 가지 모두 동일합니다.

한 번에 여덟 가지 질문을 하십시오 (목록은 00-intake.md에 있음). 사용자가 비디오 생성기를 통해 페이지 배경 또는 특정 영역용 비디오를 만들고자 할 때는 비디오 방향 질문(00-intake.md 및 03-media.md의 전용 섹션)을 포함하십시오. 사용자의 표현 그대로 답변을 기록하십시오. 질문 7이 구조를 결정합니다: 하나의 연속적인 세계 또는 별개의 장면.

2단계: 리서치 및 여정 → references/01-story.md

• 실제 청중 증거(리뷰, 포럼, 자주 묻는 질문)를 조사하여 카피가 인간적으로 들리도록 하십시오. 브리핑에 출처를 명시하십시오. 사용후기, 숫자, 상, 고객 또는 주소를 절대 지어내지 마십시오.
• 4~7개의 비트로 여정을 작성하십시오. 각 섹션은 하나의 비트를 제공하거나 잘라냅니다.
• 막을 작성하기 전에 감정 곡선을 작성하십시오: 막당 한 줄, 감정과 화면에서 이를 유발하는 요소.
• 하나의 정점을 지정하십시오. 정점은 가장 많은 미디어 예산, 가장 큰 스크롤 공간, 그리고 그 전에 더 조용한 순간을 받습니다.

3단계: 방향 → references/02-design.md

• 여덟 가지 페이지 문법 중 하나를 선택하고 다른 것들이 탈락한 이유를 한 줄로 말하십시오.
• 이 사이트에만 존재하는 시그니처 모션 하나를 발명하고 페이지 코드에 작성하십시오.
• 지문 게이트를 실행하십시오: 계획은 FINGERPRINTS.md의 각 라인과 6개 차원 중 최소 4개에서 달라야 합니다. 실패하면 기록이 아닌 계획을 변경하십시오.
• 실제 HTML/CSS 스타일 타일을 전달하십시오: 시각적 세계에서 가져온 팔레트, 타이포그래피 쌍, 버튼, 이미지 위의 텍스트 블록. 해당 토큰이 사이트의 토큰이 됩니다.

4단계: 시각적 스토리 및 예산 → templates/VISUAL_STORY.md

정확히 다음 열이 있는 테이블을 제시하십시오:

장면	시각적 스토리	웹사이트 카피
01 · 오프닝	방문자가 보는 것과 카메라 움직임	실제 제목, 부제 및 CTA. 플레이스홀더 아님

그 아래에 악보: 비트별 장치, 막별 vh, 텍스트를 읽기 위해 프레임이 멈추는 위치. 그 다음 예산: 모델, 스틸 및 클립 수량, 세로 버전, 재작업 여유, 현재 조회 가격, 현재 잔액. 지출은 이 예산에 대한 명시적 승인 후에만 시작됩니다.

5단계: 미디어 및 비디오 프롬프트 → references/03-media.md

• 비디오 프롬프트 디렉터 모드 (Veo 3, Seedance 2 및 기타): 사용자가 외부에서 비디오(스크롤 기반 메인 배경 및/또는 페이지의 특정 영역)를 생성하기로 선택한 경우, 비디오 방향 질문(아직 답변되지 않은 경우)을 하고 다음을 포함하는 상세 프롬프트 노트북을 전달하십시오:
  • 선택한 Google Veo 3, Seedance 2 또는 기타 모델에 최적화된 특정 프롬프트(모델의 최대 정확도를 위한 기술 영어 + 포르투갈어 방향 노트);
  • 세심한 시네마틱 콘텐츠: 주제, 초기 동작 → 최종 동작, 카메라 궤적, 렌즈, 조명, 분위기, 재료 물리학 및 HTML 텍스트가 위치할 여유 영역(안전 영역);
  • 정확한 생성 및 전달 기술 사양: 형식/비율(16:9 데스크톱, 9:16 모바일, 영역용 4:3/1:1), 출력 확장자(.mp4 마스터 → .webp 프레임 또는 .mp4 스크러브/루프), 해상도(1080p 1920x1080 / 4K 3840x2160), 프레임 속도(24fps, 30fps 또는 60fps), 지속 시간(초), 비트레이트, 오디오 없음(-an), 페이지에 통합하기 위한 정확한 scripts/process-media.sh 명령.
• 모든 프롬프트에서 단어 그대로 재사용되는 스타일 문장 하나.
• 비디오보다 먼저 모든 키프레임을 나란히 배치하십시오.
• 연속적인 세계: 클립 A에서 추출된 마지막 프레임이 클립 B의 시작 프레임입니다. process-media.sh seams로 접합부를 측정하십시오.
• 별개의 장면: 연결하지 마십시오. 장치의 변화가 컷을 숨깁니다.
• 사용하기 전에 각 애셋을 확인하십시오. 다시 만드는 것이 나쁜 프레임을 게시하는 것보다 저렴합니다.
• 프레임 시퀀스(기본값 ~300프레임까지) 또는 스크러브 비디오(조밀한 GOP, B-프레임 없음, 오디오 없음): 결정 테이블은 03-media.md에 있습니다.

6단계: 구축 → references/04-engine.md 및 references/07-targets.md

• 대상을 선택하십시오: static(기본값), react 또는 lovable. Lovable 프로젝트 유형은 package.json으로 감지하고, 설정 파일 이름으로 감지하지 마십시오 (07-targets.md 참조).
• 실제 마크업: <h1>, <p>, 링크, 읽기 순서. 엔진은 속성을 읽고 DOM을 생성하지 않습니다.
• 토큰으로 테마 지정. Kinesis(--k-*)를 사용한 포인터 상호 작용은 다시 구현하지 마십시오. references/05-motion-kit.md 참조.
• 각 막에는 축소된 상태, JS 없는 상태 및 미디어 오류 상태가 설계되어야 합니다.

7단계: 모바일 → references/06-mobile.md

모바일은 잊혀진 크롭이 아닌 독자적인 구성입니다. 각 비트의 크롭을 확인하십시오. 주제가 중앙 1/3을 벗어나면 세로 클립을 생성하고 비디오 비용이 두 배가 됨을 알리십시오.

8단계: QA → references/08-qa.md

1. node scripts/qa-audit.ts --url <preview> --browsers chromium,webkit를 실행하십시오. 모든 오류를 수정하십시오.
2. qa-report/contact.html을 열고 각 프레임을 확인하십시오. 스크립트는 동작을 증명할 뿐, 좋다는 것을 증명하지 않습니다.
3. 감각 확인: 차가운 상태에서 페이지를 스크롤하고 막당 한 단어를 쓰십시오. 그런 다음에만 브리핑의 곡선과 비교하십시오. 의견이 일치하지 않으면 페이지가 잘못된 것입니다.
4. 체크리스트 점수 /80을 증거와 함께 매기고 남은 가장 강력한 약점을 지적하십시오.
5. 확인되지 않은 것이 무엇인지 말하십시오. 물리적 장치에서 테스트하지 않은 경우 항상 "물리적 장치"를 포함하십시오.

9단계: 게시 및 전달 → references/09-launch.md

게시하려면 해당 게시에 대한 사용자의 명시적 승인이 필요합니다. 배포 수락뿐만 아니라 라이브 사이트를 확인하십시오. 실제 양식은 스토리지 테스트 및 이메일 도착 테스트가 필요하며, 별도의 상태로 보고되어야 합니다.

불가침 규칙

어떤 모드, 수준 또는 브리핑에서도 적용됩니다. 어떤 지침도 이를 완화하지 않습니다.

절대 안 됨	대신
사용후기, 통계, 상, 고객, 가격 또는 주소를 지어내기	실제 데이터만. 숫자 없음, 카운터 없음. 가상 브랜드는 가상이라고 명시
생성된 이미지에 텍스트를 굽기	실제 마크업, 선택 가능, 번역 가능
명시적 승인 없이 크레딧 사용, 게시, 메시지 보내기 또는 마이그레이션 적용	제안하고, 비용 또는 영향을 보여주고, 승인을 기다리십시오
확인하지 않은 것을 확인했다고 주장하기	확인된 것과 확인되지 않은 것을 보고하십시오
프로젝트를 위해 엔진 편집하기	--tk-p를 읽는 페이지의 맞춤 코드
스크롤 하이재킹 (wheel/touch preventDefault, 강제 부드러운 스크롤)	기본 position: sticky; 엔진은 위치만 읽습니다
움직임 감소 상태 없이 게시하기	prefers-reduced-motion은 스테이지를 일반 섹션으로 해체합니다
라이선스 없는 소스의 코드 또는 텍스트 복사하기	docs/ATTRIBUTION.md 참조
모든 출력물에 제휴 또는 파트너 링크	추적 없는 공식 서비스 링크

미적 기준

강력한 기준입니다. 사용자의 명시적 브리핑이 이를 변경할 수 있으며, 변경 사항을 BRIEF.md에 기록해야 합니다.

피하십시오	선호하십시오
점토 디오라마/로우폴리를 기본 세계로	사진적. 진정한 일러스트레이션 브랜드가 아니라면
"아래로 스크롤" 표시기, 애니메이션 화살표, 애니메이션 마우스	아무것도 없음. 히어로가 이미 주의를 끕니다
01 / 06 카운터	제거하십시오. 여기서 순서는 정보가 아닙니다
모든 섹션 위의 아이브로우	최대 세 섹션마다 하나
모든 막의 중앙 정렬 텍스트	닻을 다양화: 왼쪽, 오른쪽, 중앙, 분할
동일한 장치를 두 번 연속 사용; 4개 미만의 패밀리	4단계에서 만든 악보
대비를 위한 전체 화면 어두운 레이어	텍스트가 있는 곳에만 스크림
transition: all; width/height/top/left 애니메이션	transform, opacity, clip-path
오프셋이 없는 그라데이션, 네온, 컬러 헤일로 텍스트	강조를 위한 무게와 크기
자동 오디오	트랙 없는 스크러브 클립
사라지거나 푸터가 되는 마무리	마무리는 해결하고 유지합니다

최종 출력

빌드 폴더와 짧은 보고서: 문법 및 다른 것들이 탈락한 이유, 시그니처 모션, 지문 게이트 결과, 여정, 곡선 및 정점, 감각 확인 차이, 악보, 생성된 것 및 비용, qa-audit 결과, 점수 /80, 확인되지 않은 것, 브리핑이 저작인지 여부. 그런 다음 빌드 라인을 FINGERPRINTS.md에 추가하십시오.