🔧 chore: Update .gitignore to include shrimp_data directory

- Added shrimp_data to .gitignore to prevent tracking of subproject files
2026-04-01 14:00:16 +09:00
parent 2c5cc7605e
commit fac6c6f195
2 changed files with 107 additions and 28 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,5 @@ node_modules/

 # OS specific
 .DS_Store
+
+shrimp_data
--- a/html/nuxt-fe-ai-wiki-report-v1.1_1.html
+++ b/html/nuxt-fe-ai-wiki-report-v1.1_1.html
@@ -189,7 +189,7 @@
    <li><a href="#sec4">Phase 2 — 마크업 &amp; Tailwind 컨벤션</a></li>
    <li><a href="#sec5">Phase 3 — Nuxt 컴포넌트 아키텍처</a></li>
    <li><a href="#sec6">Phase 4 — API 연동 &amp; Pinia 상태관리</a></li>
-    <li><a href="#sec7">Phase 5 — 성능 최적화 (Core Web Vitals)</a></li>
+    <li><a href="#sec7">Phase 5 — 검증 (요구사항 + 성능)</a></li>
    <li><a href="#sec8">Phase 6 — SEO · GEO · AEO 검증</a></li>
    <li><a href="#sec9">Claude Code Skills 통합 체계</a></li>
    <li><a href="#sec10">실행 로드맵 &amp; 일정</a></li>
@@ -270,7 +270,7 @@
    <tr><td><span class="phase-tag dev">FE개발</span></td><td>Phase 4</td><td>API 연동</td><td><code>api-manager/SKILL.md<br>api-manager/references/</code></td></tr>
    <tr><td><span class="phase-tag verify">검증</span></td><td>Phase 5</td><td>검증</td><td><code></code> </td></tr>
    <tr><td><span class="phase-tag"></span></td><td>Phase 5-1</td><td>Phase 1 기획 요구사항 검증</td><td><code>requirement-optimizer/SKILL.md<br>requirement-optimizer/references/</code> </td></tr>
-    <tr><td><span class="phase-tag"></span></td><td>Phase 5-1</td><td>성능 최적화 (CWV)</td><td><code>perf-optimizer/SKILL.md<br>perf-optimizer/references/</code> </td></tr>
+    <tr><td><span class="phase-tag"></span></td><td>Phase 5-2</td><td>성능 최적화 (CWV)</td><td><code>perf-optimizer/SKILL.md<br>perf-optimizer/references/</code> </td></tr>
    <tr><td><span class="phase-tag seo">검증</span></td><td>Phase 6 </td><td>SEO · GEO · AEO 검증</td><td><code>seo-geo/SKILL.md<br>seo-geo/references/</code> </td></tr>
  </tbody>
 </table>
@@ -334,6 +334,29 @@
  <div class="example">"이 디자인을 시멘틱 마크업으로 변환하고 Tailwind 클래스를 적용해줘"</div>
 </div>

+<div class="skill-card">
+  <div class="skill-card-header">
+    <span class="skill-card-name">PSD → Figma 컨버팅</span>
+    <span class="skill-card-trigger">Phase 2-0 · PSD→Figma</span>
+    <span class="new-badge">NEW</span>
+  </div>
+  <p><strong>트리거:</strong> PSD, 피그마 변환, PSD to Figma, 디자인 컨버팅, PSD 임포트</p>
+  <p>PSD 디자인 파일을 Figma로 변환하는 프로세스를 지원합니다. <strong>Codia AI 디자인(PSD to Figma)</strong> 및 <strong>PSD Importer for Figma</strong> 도구를 활용하여 레이어 구조를 유지하며 Figma 포맷으로 컨버팅합니다.</p>
+  <p style="color: var(--amber-600); font-weight: 600;">⚠️ SKILL 검토 중 — 도구 안정성 및 레이어 정합성 평가 진행 중</p>
+  <div class="example">"이 PSD 파일을 Figma로 변환해서 마크업 작업 준비해줘"</div>
+</div>
+
+<div class="skill-card">
+  <div class="skill-card-header">
+    <span class="skill-card-name">markup (Figma)</span>
+    <span class="skill-card-trigger">Phase 2-1 · 피그마→HTML</span>
+    <span class="new-badge">NEW</span>
+  </div>
+  <p><strong>트리거:</strong> 피그마, Figma, 피그마 마크업, 피그마 HTML, 디자인 시안 마크업, Figma to HTML</p>
+  <p>피그마 디자인 시안을 HTML 마크업으로 변환하는 데 특화된 Skill입니다. markup Skill을 기반으로 피그마 레이어 구조 해석, 컴포넌트 매핑, 반응형 브레이크포인트 추출을 포함합니다.</p>
+  <div class="example">"이 피그마 디자인 시안을 HTML 마크업으로 변환해줘"</div>
+</div>
+
 <h3>HTML 시멘틱 태그 가이드</h3>
 <table class="green">
  <thead><tr><th>영역</th><th>시멘틱 태그</th><th>규칙</th></tr></thead>
@@ -364,7 +387,7 @@
 <div class="skill-card">
  <div class="skill-card-header">
    <span class="skill-card-name">markup/promotion</span>
-    <span class="skill-card-trigger">Phase 2-1 · 프로모션</span>
+    <span class="skill-card-trigger">Phase 2-2 · 프로모션</span>
    <span class="new-badge">NEW</span>
  </div>
  <p><strong>트리거:</strong> 프로모션, 랜딩페이지, 이벤트 페이지, 프로모션 마크업, 캠페인 페이지</p>
@@ -375,7 +398,7 @@
 <div class="skill-card">
  <div class="skill-card-header">
    <span class="skill-card-name">markup/edm</span>
-    <span class="skill-card-trigger">Phase 2-2 · EDM</span>
+    <span class="skill-card-trigger">Phase 2-3 · EDM</span>
    <span class="new-badge">NEW</span>
  </div>
  <p><strong>트리거:</strong> EDM, 이메일, 뉴스레터, 메일 템플릿, 이메일 마크업</p>
@@ -486,18 +509,33 @@

 <hr />

-<!-- ════════════════════ 07 — PERFORMANCE ════════════════════ -->
+<!-- ════════════════════ 07 — 검증 ════════════════════ -->
 <div class="section-header" id="sec7">
  <div class="section-num">07</div>
-  <h2>Phase 5 — 성능 최적화 <small>Core Web Vitals 달성 및 런타임 퍼포먼스 최적화</small></h2>
+  <h2>Phase 5 — 검증 <small>기획 요구사항 검증 + Core Web Vitals 성능 최적화</small></h2>
 </div>

-<p>기존 Phase 5에서 <strong>성능 최적화</strong> 영역만 분리하여 전담 Skill로 구성합니다. 번들 최적화, 이미지 처리, 캐싱, 렌더링 전략 등 <strong>런타임 퍼포먼스</strong>에 집중합니다.</p>
+<p>Phase 5는 <strong>기획 요구사항 검증(5-1)</strong>과 <strong>성능 최적화(5-2)</strong>를 통합한 검증 단계입니다. Phase 1에서 정의한 요구사항 대비 실제 구현 결과를 비교 검증하고, 런타임 퍼포먼스를 최적화합니다.</p>
+
+<h3>Phase 5-1 — 기획 요구사항 검증</h3>
+
+<div class="skill-card">
+  <div class="skill-card-header">
+    <span class="skill-card-name">nuxt-requirement-optimizer</span>
+    <span class="skill-card-trigger">Phase 5-1 · 요구사항 검증</span>
+    <span class="new-badge">NEW</span>
+  </div>
+  <p><strong>트리거:</strong> 요구사항 검증, 기획 대비 구현 비교, 기능 누락 확인, 스펙 검증, 구현 완성도</p>
+  <p>Phase 1에서 정의한 요구사항 명세와 실제 구현 결과를 비교 검증합니다. 기능 누락, 스펙 불일치, 미구현 항목을 자동으로 식별하고 개선 방안을 제시합니다.</p>
+  <div class="example">"기획서 대비 현재 구현 상태를 검증하고 누락된 기능을 찾아줘"</div>
+</div>
+
+<h3>Phase 5-2 — 성능 최적화 (CWV)</h3>

 <div class="skill-card perf">
  <div class="skill-card-header">
    <span class="skill-card-name">nuxt-perf-optimizer</span>
-    <span class="skill-card-trigger perf">Phase 5 · 성능</span>
+    <span class="skill-card-trigger perf">Phase 5-2 · 성능</span>
  </div>
  <p><strong>트리거:</strong> 성능, 최적화, Lighthouse, Core Web Vitals, LCP, CLS, INP, 번들, 로딩 속도, 캐싱, lazy loading</p>
  <p>Nuxt 3 프로젝트의 성능 병목을 분석하고 최적화합니다. 코드 스플리팅, 이미지 최적화, SSR/ISR 렌더링 전략, API 캐싱, Payload 최적화를 포함합니다.</p>
@@ -663,7 +701,51 @@ Layer 3 — GEO 감사:
  <h2>Claude Code Skills 통합 체계 <small>Skills 폴더 구조, 네이밍, 설계 원칙</small></h2>
 </div>

-<h3>전체 Skills 폴더 구조</h3>
+<h3>공식 Skills 폴더 구조 가이드 <a href="https://code.claude.com/docs/ko/skills" target="_blank" style="font-size:13px; font-weight:500; color:var(--blue); text-decoration:none; margin-left:4px;">🔗 공식문서</a></h3>
+
+<p>Claude Code 공식문서에 따르면, Skill을 저장하는 <strong>위치에 따라 적용 범위</strong>가 결정됩니다. 우선순위: Enterprise > Personal > Project 순이며, Plugin Skills는 네임스페이스(<code>plugin-name:skill-name</code>)를 사용하므로 충돌하지 않습니다.</p>
+
+<table>
+  <thead><tr><th>위치</th><th>경로</th><th>적용 대상</th></tr></thead>
+  <tbody>
+    <tr><td><strong>Enterprise</strong></td><td>관리 설정(Managed Settings) 참조</td><td>조직의 모든 사용자</td></tr>
+    <tr><td><strong>Personal</strong></td><td><code>~/.claude/skills/&lt;skill-name&gt;/SKILL.md</code></td><td>모든 프로젝트에서 사용 가능</td></tr>
+    <tr><td><strong>Project</strong></td><td><code>.claude/skills/&lt;skill-name&gt;/SKILL.md</code></td><td>해당 프로젝트에서만 사용</td></tr>
+    <tr><td><strong>Plugin</strong></td><td><code>&lt;plugin&gt;/skills/&lt;skill-name&gt;/SKILL.md</code></td><td>플러그인이 활성화된 위치</td></tr>
+  </tbody>
+</table>
+
+<h4>공식 Skill 디렉토리 구조</h4>
+<p>각 Skill은 <code>SKILL.md</code>를 진입점으로 하는 디렉토리입니다. <code>SKILL.md</code>만 필수이며, 나머지 파일은 선택적입니다.</p>
+
+<div class="code-block">
+  <span class="label">official structure</span>
+<span class="folder">my-skill/</span>
+├── <span class="skill-file">SKILL.md</span>           <span class="comment"># 주요 지침 (필수)</span>
+├── <span class="file">template.md</span>        <span class="comment"># Claude가 채울 템플릿</span>
+├── <span class="folder">examples/</span>
+│   └── <span class="file">sample.md</span>      <span class="comment"># 예상 형식을 보여주는 예제 출력</span>
+└── <span class="folder">scripts/</span>
+    └── <span class="file">validate.sh</span>    <span class="comment"># Claude가 실행할 수 있는 스크립트</span>
+</div>
+
+<h4>공식 네이밍 규칙</h4>
+<table>
+  <thead><tr><th>대상</th><th>규칙</th><th>비고</th></tr></thead>
+  <tbody>
+    <tr><td><strong>name 필드</strong></td><td>소문자, 숫자, 하이픈만 사용 (최대 64자)</td><td><code>/slash-command</code>로 호출 시 사용</td></tr>
+    <tr><td><strong>폴더명</strong></td><td>name 미지정 시 디렉토리 이름이 기본 name</td><td>kebab-case 권장</td></tr>
+    <tr><td><strong>SKILL.md</strong></td><td>대문자 고정, 폴더당 1개 (필수)</td><td>500줄 이내 권장</td></tr>
+    <tr><td><strong>지원 파일</strong></td><td>SKILL.md에서 참조하여 필요 시 로드</td><td>상세 내용은 references/로 분리</td></tr>
+  </tbody>
+</table>
+
+<div class="callout info">
+  <span class="callout-icon">📖</span>
+  <div><strong>공식문서 참조:</strong> <code>.claude/commands/</code>의 기존 파일도 계속 작동하며 동일한 frontmatter를 지원합니다. 단, Skills가 지원 파일 등 추가 기능을 제공하므로 <strong>Skills 형식이 권장</strong>됩니다. Skill과 명령어가 같은 이름을 공유하면 Skill이 우선합니다.</div>
+</div>
+
+<h3>전체 Skills 폴더 구조 (프로젝트 적용)</h3>

 <div class="code-block">
  <span class="label">skill tree · v1.1</span>
@@ -683,10 +765,10 @@ Layer 3 — GEO 감사:
 │   │   ├── <span class="file">tailwind-convention.md</span>
 │   │   ├── <span class="file">accessibility.md</span>
 │   │   └── <span class="file">nuxt-sfc-pattern.md</span>
-│   ├── <span class="folder">promotion/</span>                       <span class="comment"># Phase 2-1: 프로모션 마크업 🆕 NEW</span>
+│   ├── <span class="folder">promotion/</span>                       <span class="comment"># Phase 2-2: 프로모션 마크업 🆕 NEW</span>
 │   │   ├── <span class="skill-file">SKILL.md</span>
 │   │   └── <span class="folder">references/</span>
-│   └── <span class="folder">edm/</span>                             <span class="comment"># Phase 2-2: EDM 마크업 🆕 NEW</span>
+│   └── <span class="folder">edm/</span>                             <span class="comment"># Phase 2-3: EDM 마크업 🆕 NEW</span>
 │       ├── <span class="skill-file">SKILL.md</span>
 │       └── <span class="folder">references/</span>
 │
@@ -711,7 +793,12 @@ Layer 3 — GEO 감사:
 │       ├── <span class="file">pinia-patterns.md</span>
 │       └── <span class="file">api-error-handling.md</span>
 │
-├── <span class="folder">nuxt-perf-optimizer/</span>              <span class="comment"># Phase 5: 성능 최적화 ⚡ CHANGED</span>
+├── <span class="folder">nuxt-requirement-optimizer/</span>       <span class="comment"># Phase 5-1: 요구사항 검증 🆕 NEW</span>
+│   ├── <span class="skill-file">SKILL.md</span>
+│   └── <span class="folder">references/</span>
+│       └── <span class="file">requirement-checklist.md</span>
+│
+├── <span class="folder">nuxt-perf-optimizer/</span>              <span class="comment"># Phase 5-2: 성능 최적화 ⚡ CHANGED</span>
 │   ├── <span class="skill-file">SKILL.md</span>
 │   ├── <span class="folder">scripts/</span>
 │   │   └── <span class="file">lighthouse-runner.js</span>       <span class="comment"># Lighthouse CI 자동 실행</span>
@@ -734,17 +821,6 @@ Layer 3 — GEO 감사:
        └── <span class="file">og-image-generation.md</span>     <span class="comment"># 동적 OG 이미지 자동 생성</span>
 </div>

-<h3>파일 네이밍 컨벤션</h3>
-<table>
-  <thead><tr><th>대상</th><th>컨벤션</th><th>예시</th></tr></thead>
-  <tbody>
-    <tr><td>Skill 폴더명</td><td><code>{도메인}</code> 또는 <code>nuxt-{도메인}-{역할}</code> kebab-case</td><td><code>markup</code>, <code>nuxt</code>, <code>nuxt-seo-geo</code></td></tr>
-    <tr><td>SKILL.md</td><td>대문자 고정, 폴더당 1개</td><td><code>SKILL.md</code></td></tr>
-    <tr><td>참조 문서</td><td><code>{도메인}-{주제}.md</code> kebab-case</td><td><code>geo-optimization.md</code></td></tr>
-    <tr><td>스크립트</td><td><code>{동사}-{대상}.js</code> kebab-case</td><td><code>schema-validator.js</code></td></tr>
-  </tbody>
-</table>
-
 <h3>Skill 설계 3원칙</h3>

 <div class="callout tip">
@@ -773,13 +849,14 @@ Layer 3 — GEO 감사:
  <thead><tr><th>주차</th><th>Phase</th><th>핵심 활동</th><th>산출물</th></tr></thead>
  <tbody>
    <tr><td><strong>W1–W2</strong></td><td>Phase 1</td><td>요구사항 분석 Skill 개발 및 테스트</td><td><code>nuxt-requirement-analyzer</code></td></tr>
-    <tr><td><strong>W2–W3</strong></td><td>Phase 2 / 2-1 / 2-2</td><td>마크업 컨벤션 + 프로모션·EDM Skill 개발</td><td><code>markup</code>, <code>markup/promotion</code>, <code>markup/edm</code></td></tr>
+    <tr><td><strong>W2–W3</strong></td><td>Phase 2 / 2-0 / 2-1 / 2-2 / 2-3</td><td>마크업 컨벤션 + PSD→Figma·피그마 마크업·프로모션·EDM Skill 개발</td><td><code>markup</code>, <code>markup/promotion</code>, <code>markup/edm</code></td></tr>
    <tr><td><strong>W3–W5</strong></td><td>Phase 3 / 3-1</td><td>Nuxt 컴포넌트 아키텍처 + 공식문서 참조 Skill 개발</td><td><code>nuxt-component-architect</code>, <code>nuxt</code></td></tr>
    <tr><td><strong>W5–W7</strong></td><td>Phase 4</td><td>API/Pinia 패턴 표준화 및 Skill 개발</td><td><code>nuxt-api-state-manager</code></td></tr>
-    <tr><td><strong>W7–W8</strong></td><td>Phase 5</td><td>성능 최적화 Skill 개발 및 파일럿</td><td><code>nuxt-perf-optimizer</code> <span class="changed">CHANGED</span></td></tr>
-    <tr><td><strong>W8–W10</strong></td><td>Phase 6 <span class="new-badge">NEW</span></td><td>SEO·GEO·AEO 감사 Skill 개발</td><td><code>nuxt-seo-geo</code></td></tr>
-    <tr><td><strong>W10–W11</strong></td><td>통합</td><td>전체 Skill 통합 테스트 및 팀 교육</td><td>교육 자료, 온보딩 가이드</td></tr>
-    <tr><td><strong>W12–</strong></td><td>운영</td><td>실 프로젝트 적용 및 피드백 기반 개선</td><td>Skill 버전 업데이트 로그</td></tr>
+    <tr><td><strong>W7–W8</strong></td><td>Phase 5 검증 (5-1)</td><td>요구사항 검증 Skill 개발</td><td><code>nuxt-requirement-optimizer</code> <span class="new-badge">NEW</span></td></tr>
+    <tr><td><strong>W8–W9</strong></td><td>Phase 5-2</td><td>성능 최적화 Skill 개발 및 파일럿</td><td><code>nuxt-perf-optimizer</code> <span class="changed">CHANGED</span></td></tr>
+    <tr><td><strong>W9–W10</strong></td><td>Phase 6 <span class="new-badge">NEW</span></td><td>SEO·GEO·AEO 감사 Skill 개발</td><td><code>nuxt-seo-geo</code></td></tr>
+    <tr><td><strong>W11–W12</strong></td><td>통합</td><td>전체 Skill 통합 테스트 및 팀 교육</td><td>교육 자료, 온보딩 가이드</td></tr>
+    <tr><td><strong>W13–</strong></td><td>운영</td><td>실 프로젝트 적용 및 피드백 기반 개선</td><td>Skill 버전 업데이트 로그</td></tr>
  </tbody>
 </table>