웹사이트, 데모, README 업데이트은(는) 무엇을 하나요?

웹사이트는 site/에 있습니다. .github/workflows/pages.yml이 main 브랜치에서 CI 통과 후 https://sumonta056.github.io/claude-storehouse/에 배포합니다.

라이브 데모는 실제 public/ 코드입니다. site/build.js는 public/을 _site/demo/에 복사하고, app.js 앞에 site/demo/demo-api.js를 추가하며, demo-data.json을 작성합니다. 이 파일을 만들기 위해 빌드는 scripts/demo-home.js에서 가짜 홈 디렉토리를 생성하고, 실제 서버를 그 위에서 시작한 후 모든 GET 응답을 기록합니다. 홈 경로는 /Users/demo가 됩니다.

따라서 UI 변경은 추가 작업 없이 데모에 반영됩니다. 이 스킬은 자동으로 업데이트되지 않는 부분(샘플 데이터, 가짜 쓰기 라우트, 스크린샷, 텍스트)을 다룹니다.

편집을 계획하고 파일을 변경하기 전에 승인을 받으세요. 커밋하기 전에 물어보세요.

1. 변경 사항 찾기

git log --oneline <마지막 사이트 또는 README 커밋>..HEAD 및 CHANGELOG.md → [Unreleased] 목록에 사용자에게 보이는 변경 사항이 표시됩니다.
git diff <해당 커밋>..HEAD -- .claude/rules/business-logic.md .claude/rules/ui.md public/은 새로운 동작을 보여줍니다.
테스트, 리팩터링, CI는 무시하세요. 사이트와 README는 사용자가 보는 내용을 설명합니다.

2. 각 변경 사항을 표시되는 위치에 매핑

변경된 영역	웹사이트 (`site/index.html`)	스크린샷	README.md 섹션
대시보드, 사용량 대역	기능 "Dashboard and usage"	`dashboard.png`	Features › Dashboard and usage
스킬, 에이전트, 포크	기능 "Skills and agents"	`skills.png`	Features › Skills and agents
즐겨찾기, 카테고리	기능 "Favorites"	`favorites.png`	Features › Favorites
플러그인, 모드, 제거	기능 "Plugins and mods"	`plugins.png`	Features › Plugins and mods
훅, MCP 서버	기능 "Hooks and MCP servers"	`mcp.png`	Features › Hooks and MCP servers
Drawer, 편집기, 활동, 백업	기능 "Edit in place, undo anything"	`editor.png`	Features › Edit in place
스위치 메커니즘	섹션 "How on / off works" 행	—	How on/off works 테이블
새 페이지	새로운 `.feature` 블록 (대체 `flip`), `.demo-tabs`의 데모 탭, `site/site.js`의 `PAGE_NAMES`에 이름	새 `<page>.png`	새로운 Features 하위 섹션
CLI 플래그	"CLI options" 패널	—	CLI options
키보드 단축키	"Keyboard shortcuts" 테이블	—	Keyboard shortcuts
안전 규칙	"Safety and privacy" 패널	—	Safety and privacy
파일 레이아웃	—	—	How it works 트리
버전	`<head>`의 JSON-LD `softwareVersion`	—	Changelog (`/release-tag` 소유)

#demo의 "Things to try" 칩은 데모 데이터에 존재하는 항목을 지정해야 합니다.

3. 데모에 필요한 것 제공

샘플 데이터. 데이터가 필요한 기능(새 항목 유형, 모드, 보류 중인 훅)은 scripts/demo-home.js에 데이터를 추가합니다. 스크린샷도 동일한 데이터를 사용합니다. 키나 토큰처럼 보이는 문자열을 절대 넣지 마세요. 보안 훅이 쓰기를 차단합니다.
새 GET 라우트. public/app.js가 새 GET /api/...을 호출하면, site/build.js의 record()에 기록하고 site/demo/demo-api.js의 route()에서 제공합니다.
새 쓰기 라우트. 서버가 파일을 변경하는 방식과 동일하게 메모리의 db를 변경하는 route()에 case를 추가하고, src/api*.js의 핸들러와 동일한 JSON 형태를 반환합니다. 실제 앱에서 실행 취소가 가능한 경우 활동 항목에 undo 함수를 추가합니다. 브라우저에서 작동할 수 없는 쓰기(편집기 열기, 제거, 삭제)는 default case로 처리되어 501과 "라이브 데모에서 사용할 수 없음" 메시지를 반환합니다. 그러면 UI가 해당 메시지를 토스트로 표시합니다.
변경된 응답 형태. demo-api.js의 일치하는 함수를 업데이트합니다. test/site.test.js는 각 라우트가 아닌 빌드를 확인하므로, Chrome에서 라우트를 테스트하세요(4단계).

4. 빌드 및 확인

npm run site
python3 -I -m http.server 8811 --bind 127.0.0.1 -d _site

Chrome DevTools MCP를 사용하세요. 자신의 탭을 열고 마지막에 닫으세요.

각 변경된 페이지에 대해 http://127.0.0.1:8811/demo/#<page>를 여세요. 콘솔에 오류가 없어야 합니다.
클릭하여 새로운 기능을 사용해보세요. 각 쓰기는 토스트를 표시하고, 페이지가 업데이트되며, 활동에 나열되고 실제 앱에 실행 취소가 있는 경우 실행 취소도 표시되어야 합니다.
http://127.0.0.1:8811/를 여세요. 데모 탭이 페이지를 전환하고, Reset demo가 다시 로드되며, 각 "Try it in the demo" 링크가 올바른 페이지를 열어야 합니다.

5. 변경된 스크린샷 다시 캡처

실제 ~/.claude를 절대 스크린샷하지 마세요. 모든 샷은 1440 × 900, 스케일 2인 데모에서 촬영하세요. 결과는 2880 × 1800이며, <img> 태그가 선언한 크기입니다.

클릭이 필요 없는 페이지의 경우 헤드리스 Chrome을 사용하세요. 각 샷에 대해 새 프로필 폴더를 사용하세요:

P=$(mktemp -d <scratchpad>/chrome.XXXXXX)
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --disable-gpu --user-data-dir="$P" \
  --hide-scrollbars --force-device-scale-factor=2 --window-size=1440,900 --virtual-time-budget=4000 \
  --screenshot="$PWD/docs/images/<name>.png" "http://127.0.0.1:8811/demo/#<page>"

클릭이 필요한 상태(Drawer, 편집 탭, 토글)의 경우 MCP 탭을 사용하세요: 뷰포트 1440x900x2로 emulate하고, evaluate_script로 상태를 조작한 후 filePath = docs/images/<name>.png로 take_screenshot을 호출하세요. resize_page를 사용하지 마세요. 높이가 1612px로 설정됩니다.

각 새 이미지를 확인하세요. 기능이 표시되고, 우연한 호버 표시나 포커스 링이 없으며, 반쯤 로드된 부분이 없어야 합니다. docs/images/icon.png는 public/icon.svg의 256px 렌더링입니다. 아이콘이 변경된 경우에만 다시 만드세요.

6. 텍스트 작성

사이트와 README는 동일한 내용에 동일한 단어를 사용합니다. 문장 케이스, 평이한 동사, 짧은 문장.
사이트의 각 기능 블록: 1개의 <h3>, 1~2개의 문장, 최대 4개의 목록 항목, 1개의 "Try it in the demo →" 링크 (data-demo="<page>" 포함).
README: 기능을 해당 Features 하위 섹션에 추가하며, 최대 5개의 글머리 기호로 구성합니다. 스크린샷이 있는 하위 섹션은 글머리 기호 뒤에 스크린샷을 배치합니다. Changelog 섹션은 편집하지 마세요. /release-tag가 소유합니다.
모든 README 이미지와 저장소 링크는 절대 URL입니다 (https://raw.githubusercontent.com/Sumonta056/claude-storehouse/main/... 또는 https://github.com/Sumonta056/claude-storehouse/blob/main/...). npm은 상대 경로를 해석하지 않습니다.
새 스크린샷에는 그림이 무엇을 보여주는지 설명하는 실제 alt 텍스트가 있어야 합니다.
기능이 제품의 정의를 변경하는 경우, site/index.html의 <meta name="description">, og:description, twitter:description, JSON-LD description을 업데이트하세요.
모든 주장을 코드 및 .claude/rules/business-logic.md와 대조 확인하세요. 제거된 기능을 절대 나열하지 마세요.

7. 확인

npm run format, 이어서 npm run check를 실행합니다. 출력을 보여주세요.
npm run site가 성공합니다. test/site.test.js는 npm test의 일부입니다.
사이트를 1440px와 390px에서 엽니다: 가로 스크롤이 없고, 모든 이미지가 로드되며, 콘솔에 오류가 없어야 합니다.
변경된 데모 페이지 또는 사이트를 사용자에게 Artifact 링크로 게시하고, 변경된 스크린샷과 확인할 수 없었던 내용을 알려주세요.

커밋하기 전에 물어보세요. 텍스트와 스크린샷 변경에는 docs(site): ..., 새로운 사이트 또는 데모 동작에는 feat(site): ..., README 전용 변경에는 docs(readme): ...를 사용하세요.

웹사이트, 데모, README 업데이트