メニュー
스튜디오 코크핏 — 04_studio의 모든 시각 산출물·레퍼런스를 스캔해 studio-manifest.js를 생성/갱신하고, studio.html에서 라이브 갤러리·나란히 비교로 본다. "갤러리 갱신", "코크핏", "산출물 모아봐", "결과물 한눈에", 디자인 산출물 만든 직후 사용.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/River-181/org-ops-workspace --skill studio-galleryコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | studio-gallery |
| description | 스튜디오 코크핏 — 04_studio의 모든 시각 산출물·레퍼런스를 스캔해 studio-manifest.js를 생성/갱신하고, studio.html에서 라이브 갤러리·나란히 비교로 본다. "갤러리 갱신", "코크핏", "산출물 모아봐", "결과물 한눈에", 디자인 산출물 만든 직후 사용. |
04_studio 전체를 스캔해 HTML·이미지 산출물의 매니페스트를 생성하고, 서버 없이 브라우저 한 탭에서 라이브로 보고 나란히 비교한다.
# 1. 매니페스트 생성/갱신
python3 04_studio/_cockpit/gen-manifest.py
# 2. 갤러리 열기 (파일 직접 열기)
open 04_studio/studio.html
04_studio/ 스캔
↓
_cockpit/gen-manifest.py
↓ (stdlib만 사용, 서버 불필요)
studio-manifest.js ← window.STUDIO_MANIFEST 전역 변수
↓
studio.html <script src="studio-manifest.js">
↓ (fetch 없이 전역 변수로 읽음 — file:// CORS 우회)
iframe / img 타일 렌더
fetch()가 아닌 전역 변수 .js 파일을 쓰는 이유: file:// 프로토콜에서는 fetch가 CORS 오류를 일으키므로 <script src> 방식으로 우회한다.
| 필터 | 값 |
|---|---|
| 유형 | 전체 / HTML / 이미지 |
| 모드 | 전체 / Light / Dark (HTML의 data-mode 속성 기준) |
| 상태 | 전체 / Final / Iteration / Standalone |
| 프로젝트 | 경로 기반 자동 추출 |
| 텍스트 | 이름·제목·경로 일치 |
iframe이 file://에서 차단될 때 (브라우저 보안 정책):
cd 04_studio && python3 -m http.server 8800
# 그 다음 브라우저에서:
# http://localhost:8800/studio.html
매니페스트가 없을 때: studio.html이 안내 메시지와 함께 생성 명령을 표시한다.