diff --git a/.gitignore b/.gitignore index f270674..691b57a 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ node_modules/ # OS specific .DS_Store + +shrimp_data diff --git a/html/nuxt-fe-ai-wiki-report-v1.1_1.html b/html/nuxt-fe-ai-wiki-report-v1.1_1.html index 78fd8dd..cf0847d 100644 --- 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 @@
  • Phase 2 — 마크업 & Tailwind 컨벤션
  • Phase 3 — Nuxt 컴포넌트 아키텍처
  • Phase 4 — API 연동 & Pinia 상태관리
    • -
  • Phase 5 — 성능 최적화 (Core Web Vitals)
    • +
  • Phase 5 — 검증 (요구사항 + 성능)
  • Phase 6 — SEO · GEO · AEO 검증
  • Claude Code Skills 통합 체계
  • 실행 로드맵 & 일정
    • @@ -270,7 +270,7 @@ FE개발Phase 4API 연동api-manager/SKILL.md
    api-manager/references/     검증Phase 5검증 Phase 5-1Phase 1 기획 요구사항 검증requirement-optimizer/SKILL.md
    requirement-optimizer/references/     - Phase 5-1성능 최적화 (CWV)perf-optimizer/SKILL.md
    perf-optimizer/references/     + Phase 5-2성능 최적화 (CWV)perf-optimizer/SKILL.md
    perf-optimizer/references/     검증Phase 6 SEO · GEO · AEO 검증seo-geo/SKILL.md
    seo-geo/references/     @@ -334,6 +334,29 @@
    "이 디자인을 시멘틱 마크업으로 변환하고 Tailwind 클래스를 적용해줘"
    +
    +
    + PSD → Figma 컨버팅 + Phase 2-0 · PSD→Figma + NEW +
    +

    트리거: PSD, 피그마 변환, PSD to Figma, 디자인 컨버팅, PSD 임포트

    +

    PSD 디자인 파일을 Figma로 변환하는 프로세스를 지원합니다. Codia AI 디자인(PSD to Figma) 및 PSD Importer for Figma 도구를 활용하여 레이어 구조를 유지하며 Figma 포맷으로 컨버팅합니다.

    +

    ⚠️ SKILL 검토 중 — 도구 안정성 및 레이어 정합성 평가 진행 중

    +
    "이 PSD 파일을 Figma로 변환해서 마크업 작업 준비해줘"
    +
    + +
    +
    + markup (Figma) + Phase 2-1 · 피그마→HTML + NEW +
    +

    트리거: 피그마, Figma, 피그마 마크업, 피그마 HTML, 디자인 시안 마크업, Figma to HTML

    +

    피그마 디자인 시안을 HTML 마크업으로 변환하는 데 특화된 Skill입니다. markup Skill을 기반으로 피그마 레이어 구조 해석, 컴포넌트 매핑, 반응형 브레이크포인트 추출을 포함합니다.

    +
    "이 피그마 디자인 시안을 HTML 마크업으로 변환해줘"
    +
    +

    HTML 시멘틱 태그 가이드

    @@ -364,7 +387,7 @@
    markup/promotion - Phase 2-1 · 프로모션 + Phase 2-2 · 프로모션 NEW

    트리거: 프로모션, 랜딩페이지, 이벤트 페이지, 프로모션 마크업, 캠페인 페이지

    @@ -375,7 +398,7 @@
    markup/edm - Phase 2-2 · EDM + Phase 2-3 · EDM NEW

    트리거: EDM, 이메일, 뉴스레터, 메일 템플릿, 이메일 마크업

    @@ -486,18 +509,33 @@
    - +
    07
    -

    Phase 5 — 성능 최적화 Core Web Vitals 달성 및 런타임 퍼포먼스 최적화

    +

    Phase 5 — 검증 기획 요구사항 검증 + Core Web Vitals 성능 최적화

    -

    기존 Phase 5에서 성능 최적화 영역만 분리하여 전담 Skill로 구성합니다. 번들 최적화, 이미지 처리, 캐싱, 렌더링 전략 등 런타임 퍼포먼스에 집중합니다.

    +

    Phase 5는 기획 요구사항 검증(5-1)과 성능 최적화(5-2)를 통합한 검증 단계입니다. Phase 1에서 정의한 요구사항 대비 실제 구현 결과를 비교 검증하고, 런타임 퍼포먼스를 최적화합니다.

    + +

    Phase 5-1 — 기획 요구사항 검증

    + +
    +
    + nuxt-requirement-optimizer + Phase 5-1 · 요구사항 검증 + NEW +
    +

    트리거: 요구사항 검증, 기획 대비 구현 비교, 기능 누락 확인, 스펙 검증, 구현 완성도

    +

    Phase 1에서 정의한 요구사항 명세와 실제 구현 결과를 비교 검증합니다. 기능 누락, 스펙 불일치, 미구현 항목을 자동으로 식별하고 개선 방안을 제시합니다.

    +
    "기획서 대비 현재 구현 상태를 검증하고 누락된 기능을 찾아줘"
    +
    + +

    Phase 5-2 — 성능 최적화 (CWV)

    nuxt-perf-optimizer - Phase 5 · 성능 + Phase 5-2 · 성능

    트리거: 성능, 최적화, Lighthouse, Core Web Vitals, LCP, CLS, INP, 번들, 로딩 속도, 캐싱, lazy loading

    Nuxt 3 프로젝트의 성능 병목을 분석하고 최적화합니다. 코드 스플리팅, 이미지 최적화, SSR/ISR 렌더링 전략, API 캐싱, Payload 최적화를 포함합니다.

    @@ -663,7 +701,51 @@ Layer 3 — GEO 감사:

    Claude Code Skills 통합 체계 Skills 폴더 구조, 네이밍, 설계 원칙

    -

    전체 Skills 폴더 구조

    +

    공식 Skills 폴더 구조 가이드 🔗 공식문서

    + +

    Claude Code 공식문서에 따르면, Skill을 저장하는 위치에 따라 적용 범위가 결정됩니다. 우선순위: Enterprise > Personal > Project 순이며, Plugin Skills는 네임스페이스(plugin-name:skill-name)를 사용하므로 충돌하지 않습니다.

    + +
    영역시멘틱 태그규칙
    + + + + + + + +
    위치경로적용 대상
    Enterprise관리 설정(Managed Settings) 참조조직의 모든 사용자
    Personal~/.claude/skills/<skill-name>/SKILL.md모든 프로젝트에서 사용 가능
    Project.claude/skills/<skill-name>/SKILL.md해당 프로젝트에서만 사용
    Plugin<plugin>/skills/<skill-name>/SKILL.md플러그인이 활성화된 위치
    + +

    공식 Skill 디렉토리 구조

    +

    각 Skill은 SKILL.md를 진입점으로 하는 디렉토리입니다. SKILL.md만 필수이며, 나머지 파일은 선택적입니다.

    + +
    + official structure +my-skill/ +├── SKILL.md # 주요 지침 (필수) +├── template.md # Claude가 채울 템플릿 +├── examples/ +│ └── sample.md # 예상 형식을 보여주는 예제 출력 +└── scripts/ + └── validate.sh # Claude가 실행할 수 있는 스크립트 +
    + +

    공식 네이밍 규칙

    + + + + + + + + +
    대상규칙비고
    name 필드소문자, 숫자, 하이픈만 사용 (최대 64자)/slash-command로 호출 시 사용
    폴더명name 미지정 시 디렉토리 이름이 기본 namekebab-case 권장
    SKILL.md대문자 고정, 폴더당 1개 (필수)500줄 이내 권장
    지원 파일SKILL.md에서 참조하여 필요 시 로드상세 내용은 references/로 분리
    + +
    + 📖 +
    공식문서 참조: .claude/commands/의 기존 파일도 계속 작동하며 동일한 frontmatter를 지원합니다. 단, Skills가 지원 파일 등 추가 기능을 제공하므로 Skills 형식이 권장됩니다. Skill과 명령어가 같은 이름을 공유하면 Skill이 우선합니다.
    +
    + +

    전체 Skills 폴더 구조 (프로젝트 적용)

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

    파일 네이밍 컨벤션

    - - - - - - - - -
    대상컨벤션예시
    Skill 폴더명{도메인} 또는 nuxt-{도메인}-{역할} kebab-casemarkup, nuxt, nuxt-seo-geo
    SKILL.md대문자 고정, 폴더당 1개SKILL.md
    참조 문서{도메인}-{주제}.md kebab-casegeo-optimization.md
    스크립트{동사}-{대상}.js kebab-caseschema-validator.js
    -

    Skill 설계 3원칙

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