bright-y/static-prototype-splitter

Static Prototype Splitter (정적 프로토타입 분할기)

이 스킬은 완성되었거나 반쯤 완성된 정적 프로토타입을 데모, 반복, 마이그레이션, 또는 인계를 위한 더 깔끔한 결과물로 변환하는 데 사용됩니다.

목표는 제품을 재설계하는 것이 아닙니다. 기존의 시각적 방향과 상호작용 의도를 유지하면서 프로토타입을 더 쉽게 열고, 검사하고, 수정하고, 마이그레이션할 수 있도록 만드세요.

범위 및 인계

• 이 스킬은 기존 정적 프로토타입에서 새로운 분할, 컴포넌트화, 또는 인계 결과물을 만들 때 사용합니다. 이미 정리된 프로토타입에 대한 지속적인 편집은 prototype-maintenance를 사용하세요(필수 종속성은 아님).
• 작은 복사나 스타일 변경의 경우, 프로토타입을 재구성하지 않고 요청된 변경만 수행하세요.
• 기존 프레임워크 프로젝트는 설정된 스택을 유지하세요. 요청이 없는 한 React/Vue 또는 유사 프로젝트를 정적 HTML로 평탄화하지 마세요.
• 파일 교체, 설정, 종속성, 네트워크 액세스, 로컬 서버 및 저장된 데이터에 대한 사용자의 권한 규칙을 따르세요. 이 스킬은 해당 권한을 부여하지 않습니다.

기본 원칙

• 소스 파일을 보존하세요. 사용자가 명시적으로 요청하지 않는 한 원본 프로토타입을 덮어쓰지 마세요.
• 생성된 결과물에는 타임스탬프가 포함된 출력 폴더를 만드세요.
• 편집은 구조, 경로, 재사용 가능한 자산 및 기본 상호작용 배선에 집중하세요.
• 원래 언어, 제품 용어, 시각적 스타일 및 페이지 계층 구조를 유지하세요.
• 사용자가 특정 프레임워크를 요청하지 않는 한 일반 정적 HTML/CSS/JS를 선호하세요.
• 관련 없는 재설계, 종속성 설치, 빌드 도구 또는 프레임워크 마이그레이션을 피하세요.
• 프로토타입에 분할 페이지와 완전한 미리보기가 모두 필요한 경우, 분할 페이지 파일을 단일 진실 공급원으로 취급하세요. 결합된 항목에 페이지 콘텐츠나 상호작용 로직의 두 번째 발산 복사본을 유지하지 마세요.
• 결합된 항목은 라우팅, 템플릿, 공유 모듈 또는 작은 빌드/동기화 스크립트를 통해 분할 페이지 소스에서 구성, 로드 또는 생성해야 합니다. 신뢰성을 위해 임시 결합 구현이 필요한 경우, 중복을 지적하고 추가 페이지 수준 반복 전에 이를 조정할 것을 권장합니다.
• 이후 페이지 편집의 경우, 특정 분할 페이지와 해당 페이지 수준 스크립트를 먼저 수정한 다음 결합된 미리보기를 새로 고치거나 재생성하여 사용자가 동일한 변경을 두 번 수행할 필요가 없도록 하세요.

트리거 시점

사용자가 다음을 요청할 때 이 스킬을 트리거하세요.

• 대규모 HTML 프로토타입을 별도 페이지로 분할
• 정적 프로토타입을 전달 가능한 폴더로 구성
• 정적 HTML 프로토타입을 컴포넌트화
• 데모 또는 인계를 위해 프로토타입 패키징
• 제품 디자인 프로토타입의 더 깔끔한 버전 생성
• 단일 파일 정적 앱을 다중 페이지 또는 정적 컴포넌트 구조로 변환
• Vue, React, Taro, uni-app, WeChat 미니 프로그램 또는 기타 프론트엔드 스택으로의 추후 마이그레이션을 위한 프로토타입 준비

권장 출력 형태

요청에 따라 하나 이상의 형태를 선택하세요.

분할 파일 버전

사용자가 쉬운 정적 데모 페이지 또는 페이지별 디자인 반복을 필요로 할 때 사용합니다.

권장 구조:

출력_디렉토리_YYYYMMDD-HHMMSS/
├── 분할_파일_버전/
│   ├── index.html
│   ├── page-a.html
│   ├── page-b.html
│   └── assets/
│       ├── styles.css
│       └── app.js
└── README.md

지침:

• 각 주요 뷰는 하나의 HTML 파일이 됩니다.
• 가능한 경우 일반 링크를 통해 페이지 탐색을 유지하세요.
• 공유 CSS 및 간단한 JS는 assets/로 추출하세요.
• 각 페이지는 브라우저에서 독립적으로 열 수 있어야 합니다.
• 페이지 이름은 의미 있고 안정적으로 유지하세요.

컴포넌트화된 정적 버전

프로토타입을 나중에 프론트엔드 프레임워크로 쉽게 마이그레이션할 수 있도록 해야 할 때 사용합니다.

권장 구조:

출력_디렉토리_YYYYMMDD-HHMMSS/
├── 컴포넌트화_버전/
│   ├── index.html
│   └── assets/
│       ├── styles.css
│       ├── components.js
│       ├── data.js
│       └── app.js
└── README.md

지침:

• index.html: 셸, 루트 컨테이너, 스크립트/스타일 참조.
• assets/styles.css: 공유 스타일.
• assets/data.js: 유용할 경우 목업 데이터 및 비즈니스 데이터.
• assets/components.js: 재사용 가능한 HTML 렌더 함수 또는 컴포넌트 템플릿.
• assets/app.js: 라우트 전환, 상태, 이벤트 바인딩 및 간단한 상호작용.
• 사용자가 특정 프레임워크를 요청하지 않는 한 이 버전은 프레임워크가 없어야 합니다.
• 분할 HTML 페이지도 존재하는 경우, 해당 콘텐츠를 app.js 내에 수동으로 복제하지 마세요. 공유 템플릿 가져오기, 페이지 조각 로드 또는 결정적 동기화 단계를 사용하여 분할 페이지가 유지 관리 소스로 남도록 하세요.

분할 페이지로부터의 결합 미리보기

사용자가 각 페이지를 독립적으로 편집 가능하게 하면서도 하나의 완전한 대화형 미리보기를 원할 때 사용합니다.

권장 구조:

prototype/
├── app.html                  # 완전한 미리보기 셸
├── pages/
│   ├── welcome.html
│   ├── templates.html
│   └── ...
├── assets/
│   ├── css/styles.css
│   ├── js/common.js
│   ├── js/router.js          # 미리보기 라우팅/구성 전용
│   └── js/pages/
│       ├── templates.js
│       └── ...
└── README.md

지침:

• 페이지 마크업과 페이지별 동작은 pages/ 및 assets/js/pages/에 유지하세요.
• app.html을 셸로 유지: 장치 프레임, 탐색, 라우트 컨테이너 및 공유 스크립트/스타일 참조.
• router.js는 페이지 로드, 공유 탐색 바인딩, 상태 유지 및 미리보기 전용 문제에 집중하세요.
• 모든 페이지를 수동으로 다시 작성하는 긴 app-combined.js를 피하세요. 단기 해결책으로 존재하는 경우 생성 또는 임시 파일로 표시하고 많은 페이지 편집을 수행하기 전에 분할 페이지와 조정하세요.
• 사용자가 한 페이지 수정을 요청할 때, 미리보기 셸이나 공유 스타일에 실제로 조정이 필요한 경우가 아니라면 해당 페이지만 편집하고 해당 페이지 스크립트를 수정하세요.

패키징된 인계 폴더

사용자가 완전한 패키지 또는 전달 번들을 요청할 때 사용합니다.

권장 구조:

제품_프로토타입_전체_패키지_YYYYMMDD-HHMMSS/
├── 사용_설명서.md
├── 원본_파일/
├── 분할_파일_버전/
└── 컴포넌트화_버전/

지침:

• 데모 및 인계에 필요한 파일만 포함하세요.
• 소스 파일 이름을 알아볼 수 있게 유지하세요.
• 아카이브를 생성하는 경우 타임스탬프가 포함된 이름을 사용하세요.
• 사용자가 확인하지 않는 한 중간 생성 폴더를 삭제하지 마세요.

작업 흐름

1. 프로토타입 파일을 검사합니다.

   • 항목 파일, 주요 뷰, 공유 CSS, 공유 JS, 인라인 이벤트 핸들러, 자산, 외부 CDN 종속성, 대화상자, 서랍, 탭 및 페이지 탐색을 식별합니다.
   • 편집 전에 rg --files 및 대상 읽기를 사용합니다.

2. 출력 형태를 결정합니다.

   • 사용자가 분할만 요청한 경우: 분할_파일_버전을 생성합니다.
   • 사용자가 마이그레이션 준비 또는 컴포넌트화를 요청한 경우: 컴포넌트화_버전을 생성합니다.
   • 사용자가 전달을 요청한 경우: 사용 설명서와 함께 완전한 패키지를 생성합니다.
   • 불확실한 경우, 요청을 충족하는 가장 작은 출력을 선택합니다. 명시된 필요를 충족할 때만 여러 버전을 생성하고, 공유 콘텐츠 및 동작에 대해 하나의 권위 있는 소스를 유지합니다.

3. 타임스탬프가 포함된 출력 폴더를 생성합니다.

   • 권장 타임스탬프 형식: YYYYMMDD-HHMMSS.
   • 원본 파일은 변경하지 않고 보존합니다.

4. 추출 및 구성.

   • 공유 CSS를 공통 스타일시트로 이동합니다.
   • 공유 JS를 공통 스크립트로 이동합니다.
   • 자산 경로를 정규화합니다.
   • 주요 뷰를 별도의 HTML 파일 또는 컴포넌트 템플릿으로 변환합니다.
   • 데모에 중요한 상호작용(탐색, 탭, 서랍, 모달, 토글, 목록-세부 정보 전환, 기본 양식 및 파일 입력)을 유지합니다.

5. 런타임 및 추출 세부 사항을 해결합니다.

   • 구현 전에 열기 모드를 선택합니다: 직접 file:// 페이지 또는 가져온 조각이나 ES 모듈을 사용할 때 HTTP 미리보기. HTTP가 필요한 디자인에 대해 더블 클릭 작동을 약속하지 마세요. 가능하면 기존 미리보기 서버를 재사용하고, 새로 시작하는 것은 사용자의 권한 규칙을 따릅니다.
   • 완전한 HTML 문서와 로드 가능한 조각을 구분하세요. 조각을 셸에 로드할 때, 상대 자산 및 탐색 URL을 셸의 기본 URL에 정규화하세요. 원시 조각 삽입은 소스 문서의 기본 URL을 보존하지 않으며 스크립트를 안정적으로 실행하지 않습니다.
   • 인라인 CSS를 스타일시트로 이동할 때, url(...), 글꼴 및 가져오기 경로를 새 스타일시트 기준으로 다시 기준을 설정하세요. 캐스케이드 순서, 특이성 및 반응형 동작을 유지하세요.
   • 일관된 스크립트 모델을 유지하세요. 클래식 스크립트의 경우 로드 순서와 공유 상태를 유지하고, 모듈의 경우 가져오기/내보내기 경계를 유지하세요. 인라인 핸들러는 명시적인 브리지 없이 모듈 로컬 함수에 액세스할 수 없습니다.
   • 페이지 동작을 명시적으로 마운트하고 뷰를 떠날 때 리스너 또는 타이머를 정리하세요. 페이지를 다시 방문할 때 작업이 두 번 등록되지 않는지 확인하세요.
   • 분할하기 전에 기존 저장소 키 및 상태 전환을 인벤토리하세요. 데모를 작동시키기 위해 저장소를 지우거나 사용자가 만든 데이터를 자동으로 덮어쓰지 마세요.

6. 인계 문서를 작성합니다.

   • 소스 파일, 생성 시간, 항목 페이지, 폴더 용도 및 권장 다음 단계를 포함합니다.
   • 문서를 간결하고 유용하게 유지합니다.

7. 검증.

   • 항목 HTML 파일이 존재하는지 확인합니다.
   • 각 항목 또는 구성된 뷰에서 연결된 CSS/JS 경로, CSS 자산 URL, 조각 자산 및 탐색 대상을 확인합니다.
   • 가능하면 로컬에서 열거나 미리보기를 수행합니다.
   • 시각적 프로토타입의 경우, 브라우저 도구를 사용할 수 있으면 데스크톱/모바일 레이아웃을 확인합니다.
   • 원본과 주요 라우트 및 상호작용(초기 렌더링, 앞으로/뒤로 탐색, 뷰 재방문, 모달 확인/취소 및 해당되는 경우 새로 고침 후 저장된 상태)을 비교합니다.
   • 확인되지 않은 동작이나 외부 CDN 종속성 위험을 언급하세요. 외부 리소스를 확인하지 않고 오프라인 지원을 주장하지 마세요.

README / 사용 설명서 템플릿

사용자 또는 프로젝트 언어로 간결한 README를 사용하세요. 다음 한국어 예제를 참고하여 실제 생성된 항목만 나열하고 HTTP가 필요한지 명시하세요:

# 프로젝트 프로토타입 정리

생성 시간: YYYY-MM-DD HH:mm:ss

원본 파일: 원본_파일명.html

## 권장 오픈

- `분할_파일_버전/index.html`
- `컴포넌트화_버전/index.html`

## 분할 파일 버전

정적 프로토타입 데모 및 페이지별 디자인 조정에 적합합니다. 각 페이지는 독립적인 HTML이며, 파일 링크를 통해 페이지 간 이동합니다.

## 컴포넌트화 버전

Vue, React, Taro, uni-app, WeChat 미니 프로그램 또는 기타 프론트엔드 구조로 계속 발전시키기에 적합합니다.

## 설명

- 원본 파일은 수정되지 않았습니다.
- 공통 스타일과 스크립트는 `assets/`로 정리되었습니다.
- 계속해서 엔지니어링을 진행하려면 `components.js`, `data.js` 및 `app.js`를 우선 마이그레이션할 수 있습니다.

품질 점검 목록

최종 응답 전에 다음을 확인하세요:

• 원본 소스 파일이 보존되었는지 확인.
• 출력 폴더에 타임스탬프가 있는지 확인.
• 항목 파일 이름이 명확한지 확인.
• 각 HTML 파일에 대해 자산 경로가 상대적으로 작동하는지 확인.
• 페이지 간 탐색이 여전히 작동하는지 확인.
• 중요한 상호작용이 손실되지 않았는지 확인.
• README 또는 사용 설명서에 열어야 할 항목이 설명되어 있는지 확인.
• 최종 응답에 저장 경로와 검증 결과가 포함되어 있는지 확인.