AdityaPratamaS18/website-skill

웹사이트 스킬: 절차

이 스킬은 하나의 요약서로부터 하나의 클라이언트 웹사이트를 만듭니다. 각 클라이언트는 승인된 계획 하나, 코드 베이스 하나, 그리고 체크 스크립트 하나를 받습니다. 승인된 계획은 라우트, 제목, 설명, 헤딩, 그리고 사이트맵을 통제합니다.

이 문서에서 <skill-dir>는 이 파일이 들어 있는 폴더이고, <client-folder>는 이 클라이언트를 위한 폴더입니다. 사용자에게 폴더 규칙이 없으면 clients/<client>/를 사용하세요.

사전 요구사항

1. 이 클라이언트의 메모가 있으면 읽으십시오. 적용되는 규칙을 2-3줄로 사용자에게 알려주십시오.
2. 요약서, 회사 프로필, 로고, 사진을 찾으십시오.
3. Node.js, Python 3, rsync가 설치되어 있는지 확인하십시오.

경고: 요약서에 없는 사실을 사이트에 넣지 마십시오. 발명된 인증서, 클라이언트 이름, 숫자 또는 추천사는 클라이언트에게 법적 및 신뢰 위험이 됩니다.

1단계: 사실

1. references/brief-intake.md를 읽으십시오.
2. 각 소스 파일을 전부 읽으십시오.
3. <client-folder>/site-brief/facts.md를 작성하십시오.
4. 클라이언트가 기존 사이트를 가지고 있다면 현재 사이트를 크롤링하십시오. 리디렉션 맵을 위해 각 URL을 기록하십시오.
5. 사실이 누락된 경우 <client-folder>/site-brief/questions-for-client.md를 작성하십시오.

게이트 1. 사용자에게 사실 시트 요약과 누락된 항목 목록을 보여주십시오. 사용자가 응답할 때까지 멈추십시오. 사용자가 동의하는 경우에만 누락된 항목을 계속 진행하십시오. 누락된 사실이 필요한 페이지는 계획에서 제외되거나, 그 사실 없이 남습니다.

2단계: 사이트 계획

1. references/site-plan.md를 읽으십시오.
2. 클라이언트 시장에 대한 키워드 연구를 수행하십시오.
3. <skill-dir>/assets/site-plan.template.json을 <client-folder>/site-brief/site-plan.json으로 복사하십시오.
4. 각 페이지에 대한 항목을 하나씩 채우십시오.
5. 제안서가 있다면 계획과 비교하십시오. 범위 내 각 항목에는 페이지나 기능이 있어야 합니다. 범위에 폼이 있으면 server 호스팅 또는 합의된 대체 방안이 필요합니다.
6. 계획 게이트를 실행하십시오. 각 FAIL을 수정하십시오.

python3 <skill-dir>/scripts/site_gate.py plan <client-folder>/site-brief/site-plan.json

게이트 2. 사용자에게 URL, 주요 키워드, 월간 검색량, 제목의 열이 있는 표를 보여주십시오. 또한 호스팅 선택 사항을 명시하십시오. 사용자가 승인할 때까지 멈추십시오. 그런 다음 계획에 "approved_by"와 "approved_on" 필드로 승인을 기록하십시오. 이 필드가 없으면 빌드 게이트가 실패합니다.

3단계: 스캐폴드

1. <client-folder>/website/ 폴더를 선택하십시오.
2. 스캐폴드 스크립트를 실행하십시오. 이 스크립트는 경로에 공백과 대문자가 있어도 작동합니다.

bash <skill-dir>/scripts/scaffold.sh "<client-folder>/website" static

3. 계획이 서버 기능을 필요로 하는 경우에만 static 대신 server를 사용하십시오 (references/launch.md 참조).
4. 승인된 site-plan.json을 src/lib/site-plan.json으로 복사하십시오.
5. src/lib/site.ts의 각 __FILL 값을 사실 시트의 값으로 대체하십시오.
6. node_modules/next/dist/docs/01-app/에서 메타데이터, 이미지, 폰트, 정적 내보내기 가이드를 읽으십시오.

참고: Next.js는 메이저 버전 간에 변경됩니다. node_modules의 가이드는 설치된 버전과 일치합니다. 당신의 학습 데이터는 그렇지 않습니다.

4단계: 디자인 방향

1. references/design-and-copy.md를 읽으십시오.
2. 로고로부터 색상과 타이포그래피 토큰을 만들어 globals.css에 넣으십시오.
3. 로고로부터 public/logo.webp, public/og.webp (1200x630 픽셀), src/app/icon.png를 만드십시오.
4. 헤더, 푸터, 홈 페이지만 구축하십시오.
5. 미리보기를 시작하십시오. 정적 사이트의 경우 빌드 후 npx serve out -l 3210을 사용하십시오. 서버 사이트의 경우 npm run dev를 사용하십시오.
6. 브라우저에서 http://127.0.0.1:3210을 여십시오. 375, 768, 1280 픽셀에서 페이지를 확인하십시오.

참고: 내장 브라우저는 localhost에 대해 HTTP 431을 반환할 수 있습니다. 127.0.0.1 주소에는 이 문제가 없습니다.

게이트 3. 사용자에게 홈 페이지를 보여주십시오. 사용자가 디자인을 승인할 때까지 멈추십시오. 다른 모든 페이지는 이 디자인을 사용합니다.

주의: 게이트 3 이전에 다른 페이지를 구축하지 마십시오. 늦은 디자인 변경은 모든 페이지의 마이그레이션을 초래합니다.

5단계: 페이지

1. references/seo-build-spec.md를 읽으십시오.
2. 콘텐츠를 src/lib/ 안의 타입이 지정된 데이터 파일(예: services.ts)에 넣으십시오. 페이지 파일은 얇게 유지하십시오.
3. 반복되는 각 페이지 유형에 대해 generateStaticParams를 사용하는 동적 라우트를 하나 사용하십시오.
4. pageMetadata()와 getPage()를 사용하여 계획에서 각 제목, 설명, H1을 가져오십시오.
5. 클라이언트의 목소리로 구매자를 위한 카피를 작성하십시오. facts.md의 사실만 사용하십시오.
6. 사양에 따라 내부 링크를 추가하십시오.
7. 사이트를 빌드하십시오.

npm run build

8. 빌드 게이트를 실행하십시오. 각 FAIL을 그 원인에서 수정하십시오. 게이트를 통과시키기 위해 게이트를 변경하지 마십시오.

python3 <skill-dir>/scripts/site_gate.py build <client-folder>/website

9. npx tsc --noEmit과 npm run lint를 실행하십시오.

6단계: 검토

1. 브라우저에서 각 페이지 유형을 375, 768, 1280 픽셀에서 확인하십시오.
2. 각 CTA(전화, WhatsApp, 이메일, 폼)를 확인하십시오.
3. 사용자가 요청하는 경우, 클라이언트를 위한 페이지 카피를 하나의 문서로 준비하십시오. references/design-and-copy.md를 따르십시오.
4. 사용자가 지시할 때만 미리보기를 배포하십시오. 미리보기 빌드는 색인되지 않습니다.

게이트 4. 사용자에게 미리보기 URL과 게이트 결과를 제공하십시오. 사용자가 런칭을 승인할 때까지 멈추십시오.

7단계: 런칭

1. references/launch.md를 읽으십시오.
2. SITE_INDEXABLE=1로 빌드하십시오.
3. --release 플래그로 빌드 게이트를 실행하십시오. 게이트가 통과해야 합니다.
4. references/launch.md의 런칭 단계를 수행하십시오.

경고: 현재 세션에서 승인 없이 도메인을 연결하거나 프로덕션에 푸시하지 마십시오. 라이브 도메인은 클라이언트의 비즈니스에 영향을 미칩니다.

마무리

1. 사용자에게 남은 클라이언트 조치 목록을 제공하십시오.
2. 이 클라이언트의 메모에 경로, 결정, 교훈을 기록하십시오.
3. 사이트가 SEO 콘텐츠 작업 준비가 되었음을 사용자에게 알리십시오.

고정 규칙

규칙	이유
각 서비스에 하나의 URL	한 페이지 사이트는 서비스에 순위를 매길 URL을 제공하지 않음
각 URL에 하나의 주요 키워드	한 키워드에 두 페이지가 경쟁함
계획만이 제목과 라우트의 유일한 출처	게이트가 빌드된 HTML을 계획과 비교함
애니메이션 통계 카운터 없음	스크립트가 실행되기 전에 HTML에 0이 표시됨
게이트는 스크립트	스크립트가 잡아내는 각 결함은 이전에 사람이 놓친 것임

참고 자료

파일	읽을 단계
references/brief-intake.md	1단계
references/site-plan.md	2단계
references/design-and-copy.md	4단계 및 6단계
references/seo-build-spec.md	5단계
references/launch.md	2단계 (호스팅) 및 7단계