adamjali/site-forge

Site Forge

<execution_context> 0단계가 모드를 결정합니다:

• auto (빠름): 가능한 한 스스로 처리하십시오. 하나의 계획/승인 관문(3단계) 이후에는 묻지 않고 완료까지 실행하십시오. 무료로 직접 만들 수 있는 미디어만 사용하십시오(jina; MCP/Higgsfield가 있으면 사용). 단계가 막히거나, 상호 작용이 필요하거나, 실패하면 — 건너뛰고 계속 진행하며, 마지막에 "건너뜀 / 나중에 업그레이드" 목록에 기록하십시오. 배송에 치우칩니다.
• full (최고 품질): 대화형입니다. 선택이 결과를 의미 있게 바꿀 때마다 묻고, 사용자가 필요하더라도 최고의 무료 미디어를 사용하십시오(이미지는 Google/Gemini, 비디오는 Veo 3.1 Fast in Flow — 정확한 프롬프트를 전달하면 생성하고 파일을 드롭합니다). 막힌 단계 → 사용자에게 개입을 요청하십시오.

두 모드 모두:

• 🟢 Auto: 승인 후 환경 탐색, 디자인, 코드 작성, 프레임 추출, ffmpeg 실행, 로컬 미리보기 및 배포를 수행합니다.
• 🟡 두 모드 모두에서 두 가지 필수 관문: (1) 빌드 전 3단계 계획, (2) 배포 자체 — 매 배포 직전에 항상 물어보십시오. 한 번 배포에 대한 승인은 다음 배포에 대한 승인이 아닙니다. 기본값은 로컬 미리보기입니다.
• 🔴 절대 하지 말아야 할 것: 가짜 자격 증명/키를 발명하지 마십시오; 사용자가 확인되지 않았다고 표시한 주장을 면책 조항 없이 게시하지 마십시오; 사용자의 비밀을 양식에 입력하지 마십시오. </execution_context>

0. 다른 모든 것보다 먼저 프로필을 선택하십시오. references/design-profiles.md를 읽고 한 줄로 명시하십시오: "프로필: creative-portfolio. 디스플레이 크기 상한 조정, 세리프 금지, 스크림 바닥, 전환 가구. 제작 바닥 변경 없음." 기본값은 local-service입니다; creative-portfolio는 사진작가, 디자이너 및 아티스트를 다룹니다; personal-agency는 Adam个人的 것입니다. 프로필은 Adam의 미학 규칙 중 어떤 것이 적용되는지 결정합니다 — 제작 바닥은 절대 변경되지 않으므로 16px 본문, 4.5:1 대비, 44px 터치 대상, reduced-motion, 스키마, 16개의 소셜 태그 및 보안 헤더는 브리프나 참조 사이트가 무엇을 하든 적용됩니다. 이것을 잘못 선택하면 포트폴리오의 사진을 입은 무역 사이트가 생성됩니다.

1. 먼저 references/page-composition.md를 읽으십시오 (이것이 디자인된 페이지와 텅 빈 페이지의 차이입니다), 그런 다음 마크업 전에 frontend-design을 호출하십시오 (설치됨 → 사용; 그렇지 않으면 references/frontend-design.md를 읽으십시오 — 전체 스킬, 그대로 번들됨, 따라서 오프라인에서도 완전한 지침을 얻을 수 있습니다).

2. design-taste-frontend를 호출하십시오. 한 줄 디자인 읽기를 명시하십시오 ("이것을 다음과 같이 읽음: <페이지 종류> 대상 <대상자>, <분위기> 언어로…") 세 가지 다이얼을 설정하십시오. 취향 스킬의 자체 기본값과 사전 설정을 사용하십시오. 단 하나의 예외: MOTION_INTENSITY > 5에서의 영구 모션 잠금 해제는 꺼짐으로 유지 — 맥박, 반짝임, 떠다님, 타자기 또는 무한 루프가 없습니다. 정적 빌드에서는 React/Tailwind 스택 섹션을 건너뛰십시오.

3. Impeccable은 이미 실행 중입니다: 그 후크는 모든 쓰기에서 실행됩니다. 그 명령은 7단계 관문입니다.

그런 다음 references/aesthetics.md를 테마/타이포그래피/레이아웃 파생 도우미로 사용하십시오. 이것은 안티-슬롭 관문이자 가장 큰 품질 지렛대입니다. 대담하고 브리프에 특화된 방향을 선택하십시오:

• 하나의 명확한 미학, 정확하게 실행; 독특한 폰트 페어링(Inter/Roboto/Arial 절대 사용 금지); CSS 변수로 응집력 있는 팔레트.
• 구조 — 어떤 섹션, 어떤 계층, 하나의 기억에 남는 순간 — 브리프에서 파생됩니다. 마지막 사이트의 형태를 재사용하지 마십시오.
• 어떤 기능이 적합하고 어떤 것을 생략할지(참조 맵 참조). 간단한 브리프는 무거운 효과를 전혀 사용하지 않을 수 있습니다; 플래그십은 여러 개를 사용할 수 있습니다. 계획에 포함할 3~5줄의 디자인 브리프를 작성하십시오.

Impeccable의 후크는 모든 쓰기에서 실행됩니다. 그 결과를 마지막에 한꺼번에 처리하지 말고 나타나는 대로 해결하십시오 — 각각 수정하거나 명시된 이유와 함께 오탐으로 분류하십시오. 수정을 건너뛰기 위해 규칙을 인라인으로 억제하지 마십시오; 억제에는 Adam의 확인이 필요합니다. 약 6회 편집 후에는 잡음을 피하기 위해 조용해지며, 이것이 7단계 감사가 별도의 하드 관문인 이유입니다.

단일 페이지 대 다중 페이지. 원페이지는 단일 index.html로 배송됩니다. 별도의 대상을 가진 브리프 또는 실제 깊이가 있는 경우(환자/의사/가격/소개 섹션이 있는 비즈니스 사이트, 사이언스 페이지가 있는 마케팅 사이트) 대신 다중 페이지 세트가 필요합니다 — 하나의 크롬을 공유하는 별도의 *.html 페이지. 빌드 단계가 없으면 공유 블록은 수동으로 복사되므로 드리프트는 실제 버그입니다: 모든 페이지에서 <head>(no-FOUC 테마 스니펫 포함), nav, footer, <script> 태그를 바이트 단위로 동일하게 유지하고, 배포 전에 해싱하여 확인하십시오 — 조용히 달라진 페이지(다른 폰트, 누락된 토글, 끊어진 링크)는 전형적인 실패입니다. 각 페이지에 자체 참조 canonical/og:url + <title>/설명을 제공하고, sitemap.xml + robots.txt를 생성하며, 개인/앱 목업 페이지는 noindex 처리하십시오. 페이지 수나 공유 블록 크기로 인해 수동 복사가 취약해지면, 작은 include 단계(Node concat, Eleventy/Astro)가 합당한 절충입니다 — 그러나 브리프가 정당화할 때만; 기본값은 빌드 없음입니다.

그런 다음 세 가지 기계적 관문이 있으며, 모두 실제 배송된 결함을 잡아냈습니다:

python3 <skill>/scripts/audit-seo.py        # SEO, 로컬 SEO, 보안. HIGH에서 exit 1
python3 <skill>/scripts/check-crops.py      # object-fit:cover가 대상을 버리는 경우
python3 <skill>/scripts/colour-system.py    # 사진당 하나의 처리, 사이트 전체

그리고 실제 브라우저에서 모든 대화형 요소를 클릭하여 상태 변경을 확인하십시오. FAQ, 필터 막대 및 지도 패널이 모두 완전한 마크업, 완전한 CSS 및 핸들러 없이 배송된 적이 있습니다: 소스에서는 아무것도 깨져 보이지 않습니다. 히트 테스트를 건너뛰고 완전히 묻힌 컨트롤을 통과시키는 .click() 대신 컨트롤 자체의 중심에서 document.elementFromPoint를 사용하십시오.

무언가 덜컹거리면, 샘플링하지 말고 추적하십시오. performance_start_trace를 실행한 다음 스크롤한 다음 performance_analyze_insight("ForcedReflow")를 실행하면 파일과 줄로 문제가 되는 함수를 지정합니다. 프레임 속도 샘플링은 ±10포인트의 분산이 있어 잘못된 대상을 쫓게 됩니다. scroll-performance.md를 참조하십시오.

디자인 스택 관문 — 하드, 배포 전, 예외 없음:

1. /impeccable critique (UX 검토) 그런 다음 /impeccable audit (a11y, 성능, 반응형).
2. 모든 결과를 수정하거나 명시된 이유와 함께 오탐으로 분류하십시오. 인라인 억제 금지. 억제에는 Adam의 확인이 필요합니다.
3. 취향 스킬의 자체 사전 비행 체크리스트(해당 섹션 14)를 실행하십시오.
4. CSS에서 infinite 애니메이션과 착색된 box-shadow를 grep하여 둘 다 중립화하십시오. 이것은 우리가 의도적으로 재정의하는 하나의 취향 스킬 설정을 잡아냅니다.

기본값은 LOCAL입니다. 빌드 디렉토리에서 python3 -m http.server 8080으로 미리보기하고 거기서 반복하십시오. 사용자가 그 순간에 요청하지 않는 한 배포하지 마십시오 — 라이브 URL은 유료 고객이나 예정된 데모에만 정당하며, 모든 배포는 Netlify 크레딧을 소비합니다(한 사이트에 38번 배포하면 월간 허용량을 소진하여 유료 업그레이드가 강제되었습니다). 모든 미해결 수정 사항을 검토 라운드당 하나의 배포로 일괄 처리하십시오.

모바일 QA는 첫 번째 실제 배포로 연기됩니다 — 로컬에서 수행할 수 없으며 자동화 브라우저는 실제 모바일 뷰포트를 에뮬레이트할 수 없습니다. 이전에 확인된 것처럼 가장하지 말고 데모 시간에 전용 모바일 패스를 계획하십시오.

절대 프로젝트 루트를 배포하지 마십시오. .netlifyignore는 netlify deploy --dir에서 존중되지 않으며, 한 번 루트를 배포하면 클라이언트의 HOME ADDRESS와 추적기 PASSWORD가 전체 플릿에 게시되었습니다. 명시적인 게시 디렉토리를 빌드하고 매번 라이브 표면을 확인하십시오:

python3 scripts/make-dist.py .        # 웹 파일만 게시하고 .py/.md/package.json은 보류
netlify deploy --prod --dir dist
scripts/verify-published.sh <host> [owner-street-name]   # "clean"을 출력해야 함; 0이 아닌 종료 = 누출

사용자가 승인하면 scripts/deploy-netlify.sh(references/deploy.md)로 배포하십시오 — Netlify는 마지막에 설치되는 유일한 것입니다; 양식이 있으면 Forms(ignore_html_forms) + 알림 후크를 활성화하십시오. 그런 다음 기본적으로 Cloudflare Web Analytics를 설정하십시오 (사용자가 일반적으로 원함): 배포된 호스트 이름에 대한 비콘 토큰을 요청하고, SRI 없이 </body> 앞에 스니펫을 주입하십시오(Cloudflare는 회전시킴 — 문서화된 예외), 그리고 재배포하십시오. auto에서는 정확한 호스트 이름과 함께 "사용자 필요" 항목으로 표시하십시오. 세부 사항은 references/deploy.md에 있습니다. 라이브 URL, 사용된 항목, 그리고 (auto에서) 건너뛰기 / 나중에 업그레이드 목록을 보고하십시오.

참조 맵

…

[번역을 위해 잘렸습니다]