{
"markdown": "# My Skills Hub\n\nClaude Code를 위한 커스텀 스킬 모음입니다. 개발 생산성을 높이기 위한 다양한 자동화 스킬들을 제공합니다.\n\n---\n\n\n\n### 🎴 카드로 배우는 개발 학습 플랫폼\n\n[](https://www.codedeck.kr)\n\n프로그래밍 언어와 프레임워크를 **카드 뉴스 형태**로 쉽게 배우세요!\n`Flutter` `React` `TypeScript` `JavaScript` `Python` `Dart`\n\n**👉 [CodeDeck 바로가기](https://www.codedeck.kr)**\n**📺 [YouTube에서 보기](https://youtu.be/6Rayxu3rZOU?si=CG_C5IcpDP_ZzKKV)**\n\n
\n\n---\n\n## 빠른 설치\n\n| 스킬 이름 | 한줄 설명 | 마켓 설치 명령어 |\n|----------|---------|---------------|\n| **Flutter Init** | Flutter 프로젝트를 Clean Architecture로 자동 생성 | `/plugin marketplace install suji-father-marketplace@flutter-init` |\n| **Next.js 15 Init** | Next.js 15 프로젝트를 App Router로 자동 생성 | `/plugin marketplace install suji-father-marketplace@nextjs15-init` |\n| **Code Changelog** | AI 코드 변경사항을 자동 문서화하고 웹에서 실시간 확인 | `/plugin marketplace install suji-father-marketplace@code-changelog` |\n| **Codex** | OpenAI Codex CLI로 코드 분석, 리팩토링, 자동 편집 | `/plugin marketplace install suji-father-marketplace@codex` |\n| **Codex-Claude Loop** | Claude + Codex 이중 AI 엔지니어링 루프로 최고 품질 보장 | `/plugin marketplace install suji-father-marketplace@codex-claude-loop` |\n| **Meta Prompt Generator** | 구조화된 커스텀 슬래시 커맨드를 자동 생성 | `/plugin marketplace install suji-father-marketplace@meta-prompt-generator` |\n| **Prompt Enhancer** | 프로젝트 컨텍스트 분석으로 간단한 요청을 상세 요구사항으로 변환 | `/plugin marketplace install suji-father-marketplace@prompt-enhancer` |\n| **Web to Markdown** | 웹페이지를 마크다운으로 변환 (일반/AI 최적화/듀얼 모드) | `/plugin marketplace install suji-father-marketplace@web-to-markdown` |\n| **Card News Generator** | 600x600 인스타그램 스타일 카드 뉴스 시리즈 자동 생성 | `/plugin marketplace install suji-father-marketplace@card-news-generator` |\n| **Card News Generator V2** | 배경 이미지 지원 카드 뉴스 생성기 (고급 기능) | `/plugin marketplace install suji-father-marketplace@card-news-generator-v2` |\n| **Landing Page Guide V2** | 아름다운 디자인 + 높은 전환율 랜딩페이지 제작 가이드 | `/plugin marketplace install suji-father-marketplace@landing-page-guide-v2` |\n| **Code Prompt Coach** | Claude Code 세션 로그 분석으로 프롬프트 품질 향상 | `/plugin marketplace install suji-father-marketplace@code-prompt-coach` |\n| **Codex-Claude-Cursor Loop** | Claude + Codex + Cursor 3중 AI 엔지니어링 루프 | `/plugin marketplace install suji-father-marketplace@codex-claude-cursor-loop` |\n| **Midjourney Card News BG** | 카드 뉴스용 Midjourney 배경 이미지 프롬프트 생성 | `/plugin marketplace install suji-father-marketplace@midjourney-cardnews-bg` |\n| **Workthrough** | 모든 개발 및 수정 작업을 자동으로 문서화하여 워크스루 형식으로 저장 | `/plugin marketplace install suji-father-marketplace@workthrough` |\n| **Workthrough V2** | 워크스루 문서화 + VitePress 빌드로 5173 포트에서 문서 서비스 제공 | `/plugin marketplace install suji-father-marketplace@workthrough-v2` |\n| **Gemini Logo Remover** | OpenCV inpainting으로 Gemini 로고/워터마크 제거 | `/plugin marketplace install suji-father-marketplace@gemini-logo-remover` |\n| **Design Prompt Generator V2** | AI 웹 개발 도구용 7단계 계층적 디자인 프롬프트 생성기 | `/plugin marketplace install suji-father-marketplace@design-prompt-generator-v2` |\n| **Web Search** | DuckDuckGo 기반 텍스트/뉴스/이미지 검색 (지역/기간 필터 지원) | `/plugin marketplace install suji-father-marketplace@web-search` |\n\n### 마켓플레이스 추가\n\n```bash\n/plugin marketplace add bear2u/claude-plugins\n```\n\n## 스킬 목록\n\n### 1. [Code Changelog](./skills/code-changelog/)\nAI가 생성한 모든 코드 변경사항을 자동으로 문서화하고 웹 브라우저에서 실시간으로 확인할 수 있는 스킬입니다.\n\n**주요 기능:**\n- 자동 문서 생성 (Markdown)\n- HTML 뷰어 (설치 불필요, Python 서버)\n- 다크 모드 UI (GitHub 스타일)\n- 실시간 서버 (http://localhost:4000)\n\n**사용 시나리오:**\n- 코드 리뷰 문서 자동 생성\n- 변경 이력 추적\n- 팀원과 변경사항 공유\n\n### 2. [Meta Prompt Generator](./skills/meta-prompt-generator/)\n간단한 설명을 받아 단계별 병렬 처리가 가능한 구조화된 커스텀 슬래시 커맨드를 자동으로 생성합니다.\n\n**주요 기능:**\n- 지능형 지식 수집 (웹 검색)\n- 단계 기반 워크플로우 설계\n- 포괄적인 테스트 생성\n- 병렬 처리 최적화\n\n**사용 시나리오:**\n- 복잡한 프로젝트 워크플로우 자동화\n- 재사용 가능한 슬래시 커맨드 생성\n- 체계적인 테스트 스위트 작성\n\n### 3. [Prompt Enhancer](./skills/prompt-enhancer/)\n프로젝트 컨텍스트를 분석하여 간단한 개발 요청을 명확하고 상세한 요구사항으로 변환합니다.\n\n**주요 기능:**\n- 프로젝트 구조 자동 분석\n- 기존 패턴 인식\n- 구조화된 요구사항 생성\n- 프레임워크별 최적화\n\n**사용 시나리오:**\n- \"로그인 기능 만들어줘\" → 상세한 구현 요구사항\n- Clean Architecture 기반 설계 제안\n- 프로젝트 컨벤션 자동 적용\n\n**지원 스택:**\n- Flutter (Clean Architecture, Riverpod)\n- Next.js/React (App Router, Zustand)\n- Python (Django, FastAPI)\n\n### 4. [Flutter Init](./skills/flutter-init/)\n도메인 기반 Flutter 프로젝트를 Clean Architecture로 자동 생성합니다.\n\n**주요 기능:**\n- 도메인 선택 (Todo/Habit/Note/Expense/Custom)\n- 스택 프리셋 (Minimal/Essential/Full Stack/Custom)\n- Clean Architecture 자동 생성\n- Riverpod 3.0, Drift, Freezed 설정\n\n**기술 스택:**\n- Riverpod 3.x (상태 관리)\n- Drift (로컬 데이터베이스)\n- Freezed (불변 모델)\n- Easy Localization (다국어)\n- FluentUI Icons\n\n**사용 시나리오:**\n- 새로운 Flutter 앱 빠른 시작\n- Clean Architecture 보일러플레이트\n- 도메인 중심 설계\n\n### 5. [Next.js 15 Init](./skills/nextjs15-init/)\n도메인 기반 Next.js 15 프로젝트를 App Router로 자동 생성합니다.\n\n**주요 기능:**\n- 도메인 선택 (Todo/Blog/Dashboard/E-commerce/Custom)\n- 스택 프리셋 (Minimal/Essential/Full Stack/Custom)\n- App Router 기반 구조\n- TypeScript Strict Mode\n\n**기술 스택:**\n- Next.js 15 (App Router)\n- ShadCN/ui (UI 컴포넌트)\n- Zustand (클라이언트 상태)\n- Tanstack Query (서버 상태)\n- Drizzle ORM (TypeScript ORM)\n- Better Auth (인증)\n\n**사용 시나리오:**\n- 새로운 Next.js 앱 빠른 시작\n- 타입 안전한 풀스택 앱\n- 도메인 중심 설계\n\n### 6. [Codex](./skills/codex/)\nOpenAI Codex CLI를 사용하여 코드 분석, 리팩토링, 자동화된 편집을 수행합니다.\n\n**주요 기능:**\n- 대화형 모델 및 추론 레벨 선택 (gpt-5, gpt-5-codex)\n- 샌드박스 모드 (read-only, workspace-write, danger-full-access)\n- 세션 재개 기능 (codex exec resume --last)\n- 자동화된 코드 편집 (--full-auto)\n\n**사용 시나리오:**\n- 코드 리뷰 및 분석\n- 대규모 리팩토링 자동화\n- 코드베이스 전체 수정 작업\n- 이전 세션 이어서 작업\n\n**샌드박스 모드:**\n- `read-only`: 코드 분석 전용 (읽기만)\n- `workspace-write`: 로컬 파일 수정\n- `danger-full-access`: 네트워크 접근 포함 전체 권한\n\n### 6-1. [Codex-Claude Loop](./skills/codex-claude-loop/) 🔄\nClaude Code와 Codex를 결합한 이중 AI 엔지니어링 루프로 최상의 코드 품질을 보장합니다.\n\n**핵심 워크플로우:**\n- **Claude (계획 + 구현)** → **Codex (검증)** → **피드백** → **Claude (수정)** → **Codex (재검증)** → **반복**\n- Claude가 모든 코드 작성, Codex가 모든 검증 담당\n- 자체 수정 시스템으로 고품질 엔지니어링\n\n**주요 기능:**\n- 계획 단계: Claude가 아키텍처와 구현 계획 수립\n- 검증 단계: Codex가 계획의 로직 에러, 보안 취약점 검토\n- 구현 단계: Claude가 검증된 계획으로 코드 작성 (Edit/Write 도구 사용)\n- 코드 리뷰: Codex가 구현된 코드의 버그, 성능, 보안 검증\n- 수정 반영: Claude가 Codex 피드백 기반으로 코드 수정\n- 재검증: Codex가 수정사항 확인\n\n**언제 사용하나요:**\n- ✅ 복잡한 기능 개발 (여러 단계)\n- ✅ 보안/성능이 중요한 작업\n- ✅ 대규모 리팩토링\n- ✅ 높은 코드 품질이 필요할 때\n- ❌ 간단한 일회성 수정 (과함)\n- ❌ 프로토타입/실험 코드 (과함)\n\n**실전 예시:**\n```bash\n# 1. Claude가 OAuth 2.0 로그인 계획 수립\n# 2. Codex로 계획 검증\necho \"Review this plan...\" | codex exec -m gpt-5-codex --config model_reasoning_effort=\"high\" --sandbox read-only\n\n# 3. Claude가 검증된 계획으로 구현 (Edit/Write 도구 사용)\n# 4. Codex가 구현된 코드 리뷰\necho \"Review implementation...\" | codex exec --sandbox read-only\n\n# 5. Claude가 피드백 반영하여 코드 수정\n# 6. Codex가 재검증\necho \"Verify fixes...\" | codex exec resume --last\n```\n\n**역할 분담:**\n- **Claude**: 모든 코드 작성 및 수정\n- **Codex**: 모든 검증 및 리뷰\n\n**명령어 레퍼런스:**\n- 계획 검증: `codex exec -m gpt-5-codex --sandbox read-only`\n- 코드 리뷰: `codex exec --sandbox read-only`\n- 재검증: `codex exec resume --last` (설정 자동 상속)\n\n**모델 선택 가이드:**\n- `gpt-5`: 빠른 일반 작업\n- `gpt-5-codex`: 복잡한 코드 분석 (권장)\n\n**Reasoning Effort:**\n- `low`: 간단한 검증\n- `medium`: 일반적인 작업 (권장)\n- `high`: 보안/critical 로직\n\n### 7. [Landing Page Guide V2](./skills/landing-page-guide-v2/) ⭐ UPDATED\n\n\n\n**독특하고 아름다운 디자인과 높은 전환율을 동시에 달성하는 랜딩페이지 제작 가이드**\n\n[](./skills/landing-page-guide-v2/landing-page-v2.png)\n\n
\n\n일반적인 AI 생성 템플릿을 벗어나 **전환율과 브랜드 각인을 동시에** 달성하는 랜딩페이지를 만드는 완전 가이드입니다.\n\n**핵심 철학:**\n- 💎 **전환율 + 기억에 남는 브랜드**: 일반적인 템플릿 같은 페이지는 전환도, 브랜드 각인도 실패합니다\n- 🎯 **의도적인 디자인**: 모든 미적 선택은 의도적이어야 하며, 기본값이 아니어야 합니다\n- 🚫 **Generic AI 미학 탈피**: Inter 폰트, 보라색 그라데이션, 예측 가능한 레이아웃 피하기\n\n**V2 주요 개선사항:**\n- ✨ **Design Thinking First**: 코딩 전 미적 방향성 정의 (미니멀, 맥시멀리스트, 레트로, 유기적 등 6가지 방향)\n- ✨ **Typography Excellence**: 독특한 폰트 선택 가이드 (Space Grotesk, Clash Display 등 - Inter/Roboto 금지)\n- ✨ **Advanced Animation**: Staggered reveals, parallax, scroll-triggered animations\n- ✨ **Spatial Composition**: 비대칭, 오버랩, 대각선 흐름으로 예상 밖의 레이아웃 (grid-breaking)\n- ✨ **Rich Backgrounds**: Gradient meshes, noise textures, geometric patterns, layered transparencies\n- ✨ **Component-Level Design Guide**: 11가지 필수 요소 각각에 대한 디자인 우수성 기준과 예제\n\n**11가지 필수 요소 (전환율) + 디자인 우수성 (기억 각인):**\n1. ✅ **키워드 URL** (SEO 최적화)\n2. ✅ **로고 + 애니메이션 헤더** (스크롤 시 backdrop blur 전환)\n3. ✅ **MASSIVE 타이포그래피** (4rem-6rem+, 그라데이션 텍스트, staggered animation)\n4. ✅ **독특한 CTA 디자인** (pill shapes, 마이크로 인터랙션, hover scale)\n5. ✅ **애니메이션된 소셜 프루프** (숫자 count-up effect, 5성급 리뷰, 통계)\n6. ✅ **깊이감 있는 미디어** (3D tilt, 그림자, 반사, parallax, 폰 mockup)\n7. ✅ **비대칭 레이아웃** (커스텀 아이콘, 그라데이션 배경, asymmetric grid)\n8. ✅ **독특한 카드 디자인** (커스텀 아바타, 그라데이션 테두리, glassmorphism)\n9. ✅ **부드러운 아코디언** (커스텀 chevron 회전, 스무스 expand/collapse)\n10. ✅ **드라마틱한 최종 CTA** (전체 폭, 강력한 배경, urgency indicators)\n11. ✅ **세련된 멀티 컬럼 푸터** (소셜 아이콘 hover effects, 뉴스레터 signup)\n\n**기술 스택:**\n- **Next.js 15+** (App Router, RSC)\n- **TypeScript** (Strict Mode)\n- **Tailwind CSS** (완전 커스터마이징 - default config 탈피)\n- **ShadCN UI** (시작점, 반드시 heavy customization!)\n- **Framer Motion** (고급 애니메이션, optional)\n\n**Design System 구축:**\n- CSS Variables로 색상/타이포그래피/spacing/animation 시스템 정의\n- 독특한 Display Font (Space Grotesk, Clash Display, Cabinet Grotesk) + 세련된 Body Font (DM Sans, General Sans, Geist)\n- Dominant (60%) / Accent (10%) / Neutral (30%) 색상 팔레트\n- 일관된 애니메이션 타이밍 (cubic-bezier easing) 및 stagger delays\n\n**구현 워크플로우:**\n1. **Design Thinking First** (코딩 전 필수!)\n - 브랜드 personality 파악\n - Aesthetic direction 선택 (minimalist/maximalist/retro/organic/editorial/brutalist)\n - Typography, color palette, motion strategy 정의\n2. **Setup Design System** (CSS variables in globals.css)\n3. **SEO Metadata** (layout.tsx)\n4. **Component-by-Component** (Header → Hero → Media → Benefits → Testimonials → FAQ → Final CTA → Footer)\n5. **Animations** (Entrance, scroll-triggered, hover states)\n6. **Responsive Design** (Mobile-first)\n7. **Performance & Accessibility**\n\n**검증 체크리스트:**\n- ✅ 11가지 필수 요소 모두 포함\n- ✅ 독특한 폰트 사용 (NOT Inter/Roboto)\n- ✅ 독특한 색상 팔레트 (NOT 보라 그라데이션)\n- ✅ 예상 밖의 레이아웃 (NOT 정중앙 대칭 그리드)\n- ✅ Rich backgrounds (NOT 순백색)\n- ✅ 애니메이션 (staggered, scroll-triggered)\n- ✅ ShadCN heavily customized\n- ✅ 접근성 (WCAG AA, 키보드 네비게이션, reduced motion)\n- ✅ 성능 (Next.js Image, lazy loading, 폰트 최적화)\n\n**사용 시나리오:**\n- 🎨 **일반 템플릿을 벗어나고 싶을 때**\n- 🚀 **SaaS 제품 론칭** (Free trial CTA, feature comparison)\n- 🛍️ **이커머스 제품 페이지** (Product images, urgency, return policy)\n- 💼 **서비스/에이전시** (Portfolio showcase, case studies)\n- 🎫 **이벤트/웨비나** (Countdown timer, speaker profiles)\n- 📱 **모바일 앱 소개** (App Store badges, 디바이스 mockup, 스크린샷)\n- 💡 **브랜드 차별화가 필수인 경우**\n- ⚡ **전환율 + 브랜드 각인 모두 중요한 경우**\n\n**실전 예제:**\n모바일 앱 랜딩페이지 (이 레포의 `landing-page-v2-test/` 폴더)\n- Modern & Sleek aesthetic\n- Space Grotesk + DM Sans\n- Purple-Blue gradient primary + Cyan accent\n- 3개 phone mockups (CSS-only UI)\n- 모든 11가지 필수 요소 구현\n- Staggered animations, scroll effects\n- 완전 반응형 + 접근성\n\n**참고 자료:**\n- [11 Essential Elements 상세 가이드](./skills/landing-page-guide-v2/references/11-essential-elements.md)\n- [Component Examples (ShadCN)](./skills/landing-page-guide-v2/references/component-examples.md)\n- [스킬 전체 문서](./skills/landing-page-guide-v2/SKILL.md)\n\n### 8. [Card News Generator](./skills/card-news-generator/)\n600x600 인스타그램 스타일 카드 뉴스 시리즈를 자동으로 생성합니다.\n\n**주요 기능:**\n- 주제와 색상만 입력하면 자동 생성\n- 5-7장의 카드 시리즈 자동 제작\n- 자동 텍스트 래핑 및 레이아웃\n- RGB to Hex 색상 변환\n- 단일 카드/멀티 카드 모드\n\n**캔버스 사양:**\n- 크기: 600x600 픽셀 (인스타그램 최적화)\n- 자동 텍스트 줄바꿈\n- 번호 배지, 제목, 본문 계층 구조\n- 다양한 색상 프리셋 제공\n\n**권장 색상:**\n- 베이지: `245,243,238`\n- 핑크: `255,229,229`\n- 민트: `224,244,241`\n- 라벤더: `232,224,245`\n- 피치: `255,232,214`\n- 스카이 블루: `227,242,253`\n\n**사용 시나리오:**\n- 소셜 미디어 카드 뉴스 제작\n- 인스타그램 콘텐츠 시리즈\n- 정보 전달용 카드 이미지\n- 교육/마케팅 콘텐츠\n\n### 9. [Card News Generator V2](./skills/card-news-generator/) 🆕\n배경 이미지를 지원하는 향상된 카드 뉴스 생성기입니다.\n\n**V2 새로운 기능:**\n- ✨ **배경 이미지 지원**: 폴더의 이미지를 배경으로 자동 적용\n- ✨ **Cafe24Ssurround 폰트**: 번들 폰트 포함, 별도 설치 불필요\n- ✨ **반투명 박스 + 테두리**: 텍스트 영역에 둥근 박스와 흰색 테두리\n- ✨ **컴팩트 디자인**: 정사각형에 가까운 중앙 정렬 박스\n- ✨ **오버레이 조절**: 텍스트 가독성을 위한 어두운 오버레이 (0.0-1.0)\n- ✨ **자동 텍스트 색상**: 배경 이미지 사용 시 흰색으로 자동 전환\n\n**기술 사양:**\n- 배경 이미지 자동 크롭 및 리사이징 (600x600)\n- 지원 형식: JPG, JPEG, PNG, WebP, BMP\n- macOS/Linux 자동 폰트 감지\n- 텍스트 박스 너비: 캔버스의 65% (양쪽 여백 확보)\n\n**사용 예시:**\n```bash\npython auto_generator.py \\\n --topic \"서울 부동산\" \\\n --image-folder ./my-images \\\n --overlay-opacity 0.6 \\\n --output-dir ./output\n```\n\n**사용 시나리오:**\n- 실제 사진을 배경으로 한 카드 뉴스\n- 여행, 부동산, 음식 등 비주얼이 중요한 콘텐츠\n- 전문적이고 세련된 디자인이 필요한 경우\n- 배경 이미지로 브랜드 아이덴티티 강화\n\n### 10. [Web to Markdown](./skills/web-to-markdown/) 🌐\n웹페이지 URL을 마크다운 형식으로 변환하여 저장하는 스킬입니다.\n\n**주요 기능:**\n- 3가지 변환 모드 지원\n - **일반 모드**: 읽기 좋은 마크다운 변환\n - **AI 최적화 모드**: AI 컨텍스트용 구조화된 형태 (YAML 프론트매터, 핵심 요약 포함)\n - **듀얼 모드**: 원본 + AI 최적화 버전 2개 파일 동시 생성 ⭐\n- **동적 콘텐츠 처리 ⭐ NEW**\n - WebFetch로 가져오지 못한 JavaScript 렌더링 페이지 자동 감지\n - Playwright로 브라우저 실행하여 동적 콘텐츠 가져오기\n - MCP Playwright 또는 Node Playwright 지원\n- 여러 URL 일괄 변환\n- 특정 섹션만 추출\n- 마크다운 포맷 커스터마이징\n- WebFetch 자동 캐싱 (15분)\n\n**변환 모드:**\n```\n# 일반 모드\n웹페이지를 마크다운으로 변환해줘\n\n# AI 최적화 모드\nAI가 읽기 좋게 변환해줘\n컨텍스트로 사용하기 좋게 변환해줘\n\n# 듀얼 모드 (권장)\n원본이랑 AI 최적화 버전 둘 다 만들어줘\n```\n\n**AI 최적화 모드 특징:**\n- YAML 프론트매터 (제목, URL, 주제, 핵심 요약 등)\n- 구조화된 섹션 (핵심 요약, 주요 내용, 인사이트, 실용적 적용)\n- 토큰 30-50% 절감\n- AI가 3초 안에 핵심 파악 가능\n\n**파일명 규칙:**\n- 원본: `article.md`\n- AI 최적화: `article.context.md`\n\n**사용 시나리오:**\n- 기술 문서 아카이빙\n- 블로그 글 백업\n- 학습 자료 구축\n- RAG 시스템용 데이터 준비\n- AI 에이전트 컨텍스트 자료 생성\n\n**사용 예시:**\n```\n# 듀얼 모드\nUser: https://docs.python.org/3/tutorial 원본이랑 AI 최적화 버전 둘 다 만들어줘\n\nClaude: 듀얼 모드로 변환하겠습니다.\n- python-tutorial.md (원본 - 사람이 읽기 좋음)\n- python-tutorial.context.md (AI 최적화 - 컨텍스트용)\n\n# 동적 콘텐츠 (NEW)\nUser: https://www.codedeck.kr/card-news/xxx 마크다운으로 변환해줘\n\nClaude: [WebFetch 시도]\n ⚠️ 내용이 거의 비어있네요. JavaScript 렌더링 페이지인 것 같습니다.\n Playwright로 재시도할까요?\n\nUser: Yes\n\nClaude: ⏳ Playwright로 페이지 로딩...\n ✅ JavaScript 렌더링 완료\n ✅ 마크다운 변환 완료 (1,442줄)\n```\n\n### 11. [Code Prompt Coach](./skills/code-prompt-coach/)\nClaude Code 세션 로그를 분석하여 프롬프트 품질을 향상시키고 AI 네이티브 엔지니어가 되도록 돕는 스킬입니다.\n\n**주요 기능:**\n- 8가지 분석 기능 통합 종합 리포트\n- 프롬프트 품질 분석 (컨텍스트 인식)\n- 토큰 사용량 및 비용 분석 (모델별 요금 적용)\n- 도구 사용 패턴 (MCP 도구 포함)\n- 세션 효율성 및 생산성 시간 패턴\n- 파일 수정 히트맵\n- 에러 및 복구 패턴 분석\n- 프로젝트 전환 오버헤드 측정\n\n**분석 가능 항목:**\n- ✍️ 프롬프트 품질 개선\n- 🛠️ 도구 사용 최적화\n- ⚡ 효율성 향상\n- 🕐 최적의 생산 시간대 파악\n- 🔥 코드 핫스팟 식별\n- 🔄 컨텍스트 전환 비용 절감\n- 🐛 에러 패턴 학습\n\n**사용 시나리오:**\n```\n# 종합 분석 (권장)\n\"Give me a general analysis of my Claude Code usage\"\n\n# 프로젝트별 분석\n\"Analyze my prompt quality for ~/workspaces/my-project\"\n\n# 특정 지표 분석\n\"How much have I spent on Claude Code this month?\"\n\"When am I most productive?\"\n\"What tools do I use most?\"\n```\n\n**특징:**\n- 로컬 로그만 분석 (`~/.claude/projects/`)\n- 컨텍스트 인식 프롬프트 평가 (git commit, run tests 등 효율적 인식)\n- 실제 청구 금액과 일치하는 토큰 중복 제거\n- 모델별 요금 정확 계산 (Opus, Sonnet, Haiku)\n\n### 12. [Codex-Claude-Cursor Loop](./skills/codex-claude-cursor-loop/) 🔄\nClaude Code, Codex, Cursor Agent를 결합한 3중 AI 엔지니어링 루프로 최상의 코드 품질을 보장합니다.\n\n**핵심 워크플로우:**\n1. **Claude (계획)** → 아키텍처 및 구현 계획 수립\n2. **Codex (계획 검증)** → 로직 에러, 보안 취약점 검토\n3. **Cursor (구현)** → 검증된 계획으로 코드 작성\n4. **Codex (코드 리뷰)** → 버그, 성능, 보안 검증\n5. **Claude (최종 리뷰)** → 아키텍처 확인 및 최종 승인\n6. **반복** → 문제 발견 시 수정 후 재검증\n\n**역할 분담:**\n- **Claude Code**: 모든 계획 및 아키텍처, 최종 승인\n- **Codex**: 모든 검증 및 리뷰 (계획 + 코드)\n- **Cursor Agent**: 모든 구현 및 코딩\n\n**언제 사용하나요:**\n- ✅ 복잡한 기능 개발 (여러 단계)\n- ✅ 보안/성능이 중요한 작업\n- ✅ 대규모 리팩토링\n- ✅ 높은 코드 품질이 필요할 때\n- ❌ 간단한 일회성 수정 (과함)\n\n**주요 명령어:**\n```bash\n# 1. 계획 검증 (Codex)\necho \"Review this plan...\" | codex exec -m gpt-5-codex --config model_reasoning_effort=\"high\" --sandbox read-only\n\n# 2. 구현 (Cursor - 새 세션)\ncursor-agent --model \"composer-1\" -p --force \"Implement this plan...\"\n\n# 3. 구현 (Cursor - 세션 재개)\ncursor-agent --resume=\"session-id\" -p --force \"Continue implementation...\"\n\n# 4. 코드 리뷰 (Codex)\necho \"Review implementation...\" | codex exec --sandbox read-only\n\n# 5. 수정 (Cursor - 동일 세션)\ncursor-agent --resume=\"session-id\" -p --force \"Fix these issues...\"\n```\n\n**사용 시나리오:**\n- OAuth 2.0 로그인 구현\n- 결제 시스템 통합\n- 복잡한 상태 관리 로직\n- 대규모 코드 리팩토링\n\n### 13. [Midjourney Card News BG](./skills/midjourney-cardnews-bg/)\n600x600 카드 뉴스용 배경 이미지를 위한 최적화된 Midjourney 프롬프트를 생성합니다.\n\n**주요 기능:**\n- 주제/스타일/분위기 기반 프롬프트 자동 생성\n- 텍스트 오버레이에 최적화된 배경\n- 다양한 스타일 변형 제공 (3-5가지)\n- 1:1 비율 (600x600px) 최적화\n\n**스타일 카테고리:**\n- **비즈니스/테크**: 클린 그라디언트, 블루/퍼플 톤\n- **건강/웰니스**: 소프트 파스텔, 그린/피치 톤\n- **금융/투자**: 볼드 그라디언트, 네이비/골드 톤\n- **교육/학습**: 친근한 컬러, 옐로우/오렌지 톤\n- **음식/라이프스타일**: 따뜻한 톤, 자연 텍스처\n- **크리에이티브/아트**: 대담한 패턴, 다채로운 컬러\n\n**프롬프트 구조:**\n```\n[주제/장면 설명], [스타일 키워드], [색상 팔레트], [텍스처/분위기], [기술 사양] --ar 1:1 --v 6\n```\n\n**사용 예시:**\n```\n주제: 재테크 팁\n\n1. 메인 추천:\nelegant geometric patterns, premium professional style, navy and gold gradient, subtle texture with depth, sophisticated minimal design --ar 1:1 --v 6\n→ 전문적이고 신뢰감 있는 금융 분위기\n\n2. 대안 1:\nfriendly abstract shapes, approachable modern style, soft blue and mint colors, clean and inviting atmosphere --ar 1:1 --v 6\n→ 친근하고 접근하기 쉬운 느낌\n```\n\n**특징:**\n- 텍스트 가독성을 고려한 배경 디자인\n- 중앙 60% 영역 균일하게 유지\n- 복잡한 요소는 모서리 배치\n- 한국어 주제 지원 (영어 프롬프트 생성)\n\n### 14. [Workthrough](./plugins/skills/workthrough/)\n모든 개발 및 수정 작업을 자동으로 문서화하여 구조화된 워크스루 형식으로 저장하는 스킬입니다.\n\n**주요 기능:**\n- 개발 작업 자동 문서화 (버그 수정, 기능 구현, 리팩토링 등)\n- 구조화된 문서 형식 (개요, 변경사항, 코드 예제, 검증 결과)\n- 타임스탬프 기반 파일명\n- 프로젝트 히스토리 추적\n- 팀 지식 공유 촉진\n\n**문서 구조:**\n1. **Title & Overview**: 작업 요약\n2. **Context**: 문제 배경 및 접근 방식\n3. **Changes Made**: 파일별 상세 수정 내역\n4. **Code Examples**: Before/After 코드 스니펫\n5. **Verification Results**: 빌드/테스트 출력\n6. **Next Steps**: 후속 작업\n\n**자동 문서화 대상:**\n- ✨ 새로운 기능 구현\n- 🐛 버그 수정 및 에러 해결\n- ♻️ 코드 리팩토링\n- ⚙️ 설정 변경\n- 📦 의존성 업데이트\n- 🔧 빌드 이슈 해결\n\n**파일 저장:**\n```\nworkthrough/YYYY-MM-DD-brief-description.md\nworkthrough/feature-name/implementation.md\nworkthrough/bugfix/issue-123.md\n```\n\n**사용 시나리오:**\n- 개발 일지 자동 생성\n- 코드 리뷰 준비 자료\n- 온보딩 문서 구축\n- 디버깅 참고 자료\n- 아키텍처 결정 기록\n- 프로젝트 진행 상황 추적\n\n**특징:**\n- 자동화: Claude가 개발 완료 후 자동 생성\n- 일관성: 표준화된 문서 형식\n- 검색 가능: 마크다운 형식으로 쉬운 검색\n- 팀 협업: 명확한 변경 이력 공유\n- 지식 보존: 미래의 자신과 팀을 위한 기록\n\n**예제:**\n- [test.md](./workthrougt-test/test.md) - 실제 워크스루 예제\n- [TEMPLATE.md](./plugins/skills/workthrough/TEMPLATE.md) - 빈 템플릿\n- [EXAMPLES.md](./plugins/skills/workthrough/EXAMPLES.md) - 다양한 시나리오 예제\n\n### 15. [Workthrough V2](./plugins/skills/workthrough-v2/) 🆕\nWorkthrough 스킬의 향상된 버전으로, 문서화와 함께 **VitePress 기반 문서 사이트를 자동으로 빌드**하여 제공합니다.\n\n**V2 새로운 기능:**\n- ✨ **VitePress 자동 빌드**: 워크스루 문서를 VitePress로 자동 빌드\n- ✨ **로컬 문서 서버**: http://localhost:5173 에서 문서 확인\n- ✨ **실시간 업데이트**: 문서 변경 시 자동 리로드\n- ✨ **검색 기능**: VitePress의 강력한 검색 기능 활용\n- ✨ **사이드바 자동 생성**: 타임스탬프 기반 자동 네비게이션\n- ✨ **마크다운 확장**: VitePress의 모든 마크다운 기능 사용 가능\n\n**기본 기능 (V1 동일):**\n- 개발 작업 자동 문서화 (버그 수정, 기능 구현, 리팩토링 등)\n- 구조화된 문서 형식 (개요, 변경사항, 코드 예제, 검증 결과)\n- 타임스탬프 기반 파일명\n- 프로젝트 히스토리 추적\n- 팀 지식 공유 촉진\n\n**VitePress 기능:**\n- **테마**: 깔끔한 기본 테마 및 다크 모드 지원\n- **네비게이션**: 자동 생성된 사이드바로 쉬운 탐색\n- **코드 하이라이팅**: 200+ 언어 지원\n- **반응형 디자인**: 모바일/태블릿/데스크톱 최적화\n- **빠른 로딩**: Vite 기반 번개같은 HMR\n\n**사용 흐름:**\n1. 개발 작업 완료\n2. Claude가 워크스루 문서 자동 생성 (`workthrough/YYYY-MM-DD-description.md`)\n3. VitePress 자동 빌드 및 서버 시작\n4. 브라우저에서 http://localhost:5173 접속\n5. 아름다운 문서 사이트에서 히스토리 확인\n\n**파일 구조:**\n```\nworkthrough/\n├── .vitepress/\n│ ├── config.ts # VitePress 설정\n│ └── theme/\n│ └── index.ts # 커스텀 테마\n├── index.md # 홈페이지\n├── 2025-11-19-feature-1.md\n├── 2025-11-18-bugfix-1.md\n└── ...\n```\n\n**서버 명령어:**\n```bash\n# 개발 서버 시작 (자동)\nnpm run docs:dev\n\n# 수동으로 서버 시작\ncd workthrough && npm run dev\n\n# 정적 사이트 빌드\nnpm run docs:build\n\n# 빌드 프리뷰\nnpm run docs:preview\n```\n\n**V1 vs V2 비교:**\n| 기능 | V1 | V2 |\n|------|----|----|\n| 문서 자동화 | ✅ | ✅ |\n| 마크다운 저장 | ✅ | ✅ |\n| 웹 뷰어 | ❌ | ✅ VitePress |\n| 검색 기능 | ❌ | ✅ |\n| 다크 모드 | ❌ | ✅ |\n| 실시간 업데이트 | ❌ | ✅ HMR |\n| 사이드바 네비게이션 | ❌ | ✅ 자동 생성 |\n| 포트 | - | 5173 |\n\n**언제 V2를 사용하나요:**\n- ✅ 팀과 문서를 웹으로 공유하고 싶을 때\n- ✅ 아름다운 UI로 워크스루를 보고 싶을 때\n- ✅ 검색 기능이 필요할 때\n- ✅ 프로젝트 히스토리를 웹사이트로 만들고 싶을 때\n- ❌ 단순 마크다운 파일만 필요할 때 (V1 사용)\n\n**사용 시나리오:**\n- 개발 일지를 웹사이트로 퍼블리시\n- 팀 내부 지식 베이스 구축\n- 프로젝트 변경 이력 웹 대시보드\n- 온보딩 문서 사이트\n\n**포트:**\n- 기본: http://localhost:5173\n- 커스터마이징: `.vitepress/config.ts`에서 변경 가능\n\n### 17. [Design Prompt Generator V2](./skills/design-prompt-generator-v2/) 🆕\nAI 웹 개발 도구(Lovable, Cursor, Bolt)를 위한 7단계 계층적 디자인 프롬프트 생성기입니다.\n\n**7단계 프레임워크:**\n```\nStep 1: Domain Research → 업종 UX 패턴, 경쟁사 인사이트\nStep 2: User Journey → 핵심 사용자 흐름, 전환 포인트\nStep 3: Emotional Design → 감성 키워드, 무드 컨셉\nStep 4: Identity & Goal → 브랜드 정체성, 목표\nStep 5: Design System → 컬러, 타이포, 컴포넌트\nStep 6: Component Specs → 핵심 컴포넌트 상세 정의\nStep 7: Micro-interactions → 애니메이션, 인터랙션 패턴\n```\n\n**주요 기능:**\n- 도메인별 UX 패턴 매트릭스 (Pet Services, SaaS, E-commerce 등 8개 도메인)\n- 감정 키워드 매트릭스 (Trust, Warmth, Energy 등 7가지 감정)\n- 완전한 디자인 시스템 템플릿 (10가지 컬러, 타이포, 스페이싱)\n- 마이크로 인터랙션 정의 (5가지 카테고리)\n\n**트리거 키워드:**\n- \"디자인 프롬프트\", \"웹 디자인\", \"Lovable 프롬프트\", \"랜딩페이지 만들어줘\"\n\n**사용 시나리오:**\n- Lovable, Cursor, Bolt 등 AI 웹 빌더용 프롬프트 생성\n- 도메인별 맞춤 디자인 프롬프트\n- 감성 디자인 기반 UI/UX 설계\n- 프로덕션 레디 디자인 시스템 구축\n\n**참고 자료:**\n- [SKILL.md](./skills/design-prompt-generator-v2/SKILL.md) - 전체 프레임워크 문서\n- [Sample](./skills/design-prompt-generator-v2/sample/) - 펫시터 서비스 예제\n\n### 19. [Web Search](./skills/web-search/) 🆕\nDuckDuckGo 검색 엔진을 활용한 텍스트, 뉴스, 이미지 검색 스킬입니다.\n\n**주요 기능:**\n- 3가지 검색 유형 (텍스트, 뉴스, 이미지)\n- 지역별 검색 (한국, 미국, 일본 등)\n- 기간 필터 (일/주/월/년)\n- JSON 형식 결과 출력\n- 검색 연산자 지원 (site:, filetype:, \"exact phrase\", -exclude)\n- duckduckgo-search 패키지 자동 설치\n\n**빌트인 WebSearch 대비 장점:**\n- US 외 지역에서도 사용 가능\n- 뉴스 전용 검색\n- 이미지 URL 검색\n- 시간 범위 세밀 지정\n- 특정 지역 기준 결과\n\n**사용 예시:**\n```\n# 텍스트 검색\n\"Claude Code Anthropic 검색해줘\"\n\"React 19 새로운 기능 찾아줘\"\n\n# 뉴스 검색\n\"AI 인공지능 최근 뉴스 검색해줘\"\n\"한국 스타트업 뉴스 이번 주 것만 보여줘\"\n\n# 이미지 검색\n\"modern web design 이미지 검색해줘\"\n\"미니멀 로고 디자인 사진 찾아줘\"\n\n# 지역/기간 필터\n\"일본에서 인기있는 앱 검색해줘\"\n\"최근 한 달간 Flutter 관련 뉴스 찾아줘\"\n\n# 검색 연산자 활용\n\"site:github.com Claude Code 검색해줘\"\n\"filetype:pdf 머신러닝 튜토리얼 찾아줘\"\n```\n\n**사용 시나리오:**\n- 빌트인 WebSearch가 제한적일 때 (US 외 지역)\n- 특정 지역(한국, 일본 등) 기준 검색 결과가 필요할 때\n- 뉴스나 이미지 전용 검색이 필요할 때\n- 시간 범위(일/주/월/년)를 세밀하게 지정할 때\n- 검색 결과를 JSON으로 저장하거나 프로그래밍적으로 처리할 때\n\n### 18. [Gemini Logo Remover](./plugins/skills/gemini-logo-remover/) 🆕\nOpenCV inpainting을 사용하여 AI 생성 이미지에서 Gemini 로고 및 워터마크를 제거하는 스킬입니다.\n\n**주요 기능:**\n- OpenCV inpainting 기반 로고 제거\n- 좌표 기반 영역 지정 제거\n- 코너 기반 자동 제거 (top_left, top_right, bottom_left, bottom_right)\n- 비율 기반 영역 계산 (w_ratio, h_ratio)\n- TELEA 알고리즘으로 자연스러운 복원\n\n**지원 이미지 형식:**\n- PNG, JPG, JPEG, WebP, BMP\n\n**제거 방식:**\n```python\n# 1. 좌표 기반 제거\nremove_region(input_path, output_path, x1=700, y1=650, x2=800, y2=720)\n\n# 2. 코너 기반 제거 (권장)\nremove_corner_logo(input_path, output_path, corner='bottom_right', w_ratio=0.1, h_ratio=0.1)\n```\n\n**사용 시나리오:**\n- Gemini 생성 이미지에서 별 로고 제거\n- AI 워터마크 제거\n- 이미지 모서리 로고 정리\n- 깔끔한 이미지 후처리\n\n**설치 요구사항:**\n```bash\npip install opencv-python numpy pillow --break-system-packages\n```\n\n**특징:**\n- Gemini 로고는 보통 우하단에 위치\n- 균일한 배경에서 최상의 결과\n- 작은 영역 제거에 최적화\n- 자동 마스크 생성 및 inpainting\n\n## 스킬 사용 방법\n\n### 방법 1: 마켓플레이스를 통한 설치 (권장)\n\n#### 1. 마켓플레이스 추가\n\n```bash\n/plugin marketplace add bear2u/claude-plugins\n```\n\n#### 2. 사용 가능한 플러그인 확인\n\n```bash\n/plugin marketplace list\n```\n\n#### 3. 원하는 플러그인 설치\n\n```bash\n# Flutter 프로젝트 초기화\n/plugin marketplace install suji-father-marketplace@flutter-init\n\n# Next.js 15 프로젝트 초기화\n/plugin marketplace install suji-father-marketplace@nextjs15-init\n\n# 코드 변경사항 자동 문서화\n/plugin marketplace install suji-father-marketplace@code-changelog\n\n# Codex CLI 통합\n/plugin marketplace install suji-father-marketplace@codex\n\n# Codex-Claude 이중 AI 루프\n/plugin marketplace install suji-father-marketplace@codex-claude-loop\n\n# 메타 프롬프트 생성기\n/plugin marketplace install suji-father-marketplace@meta-prompt-generator\n\n# 프롬프트 향상기\n/plugin marketplace install suji-father-marketplace@prompt-enhancer\n\n# 웹페이지 마크다운 변환\n/plugin marketplace install suji-father-marketplace@web-to-markdown\n\n# 카드 뉴스 생성기\n/plugin marketplace install suji-father-marketplace@card-news-generator\n\n# 카드 뉴스 생성기 V2 (배경 이미지 지원)\n/plugin marketplace install suji-father-marketplace@card-news-generator-v2\n\n# 랜딩페이지 가이드 V2\n/plugin marketplace install suji-father-marketplace@landing-page-guide-v2\n\n# 코드 프롬프트 코치\n/plugin marketplace install suji-father-marketplace@code-prompt-coach\n\n# Codex-Claude-Cursor 루프\n/plugin marketplace install suji-father-marketplace@codex-claude-cursor-loop\n\n# Midjourney 카드 뉴스 배경\n/plugin marketplace install suji-father-marketplace@midjourney-cardnews-bg\n\n# 워크스루 자동 문서화\n/plugin marketplace install suji-father-marketplace@workthrough\n\n# 워크스루 자동 문서화 V2 (VitePress)\n/plugin marketplace install suji-father-marketplace@workthrough-v2\n\n# Gemini 로고 제거기\n/plugin marketplace install suji-father-marketplace@gemini-logo-remover\n\n# 디자인 프롬프트 생성기 V2\n/plugin marketplace install suji-father-marketplace@design-prompt-generator-v2\n\n# 웹 검색 (DuckDuckGo)\n/plugin marketplace install suji-father-marketplace@web-search\n```\n\n#### 4. 설치된 플러그인 확인\n\n```bash\n/plugin list\n```\n\n#### 5. 플러그인 업데이트\n\n```bash\n# 특정 플러그인 업데이트\n/plugin update suji-father-marketplace@flutter-init\n\n# 또는 모든 플러그인 업데이트\n/plugin update\n```\n\n#### 6. 플러그인 삭제\n\n```bash\n# 특정 플러그인 삭제\n/plugin remove flutter-init\n\n# 또는 마켓플레이스 전체 삭제\n/plugin marketplace remove suji-father-marketplace\n```\n\n### 방법 2: 수동 설치\n\n1. 스킬을 Claude Code 스킬 디렉토리로 복사:\n\n```bash\n# 유저 스킬로 설치 (전역)\ncp -r skills/* ~/.claude/skills/\n\n# 또는 프로젝트 스킬로 설치 (프로젝트별)\ncp -r skills/* ./.claude/skills/\n```\n\n2. Claude Code에서 스킬 확인:\n\n```\n/skills\n```\n\n### 실행\n\n각 스킬은 스킬 이름으로 실행할 수 있습니다:\n\n```\ncode-changelog\nmeta-prompt-generator\nprompt-enhancer\nflutter-init\nnextjs15-init\ncodex\ncodex-claude-loop # Claude + Codex 이중 AI 루프\ncodex-claude-cursor-loop # Claude + Codex + Cursor 3중 AI 루프\nlanding-page-guide-v2 # 아름다운 디자인 + 높은 전환율 랜딩페이지 가이드\ncard-news-generator # 기본 단색 배경 카드 생성\ncard-news-generator (V2) # 배경 이미지 지원 (동일 스킬, 고급 기능)\nweb-to-markdown # 웹페이지를 마크다운으로 변환\ncode-prompt-coach # Claude Code 세션 로그 분석\nmidjourney-cardnews-bg # Midjourney 카드 뉴스 배경 프롬프트 생성\nworkthrough # 개발 작업 자동 문서화\nworkthrough-v2 # 개발 작업 자동 문서화 + VitePress (5173 포트)\ngemini-logo-remover # Gemini 로고/워터마크 제거\ndesign-prompt-generator-v2 # AI 웹 빌더용 디자인 프롬프트 생성\nweb-search # DuckDuckGo 텍스트/뉴스/이미지 검색\n```\n\n## 폴더 구조\n\n```\nmy-skills-hub/\n├── plugins/ # 플러그인 마켓플레이스\n│ ├── .claude-plugin/ # 플러그인 설정\n│ ├── skills/ # 모든 스킬들\n│ │ ├── code-changelog/ # 코드 변경사항 자동 문서화\n│ │ ├── meta-prompt-generator/ # 메타 프롬프트 생성기\n│ │ ├── prompt-enhancer/ # 프롬프트 향상기\n│ │ ├── flutter-init/ # Flutter 프로젝트 생성\n│ │ ├── nextjs15-init/ # Next.js 15 프로젝트 생성\n│ │ ├── codex/ # Codex CLI 코드 리뷰/분석\n│ │ ├── codex-claude-loop/ # Claude + Codex 이중 AI 루프\n│ │ ├── codex-claude-cursor-loop/ # Claude + Codex + Cursor 3중 AI 루프\n│ │ ├── frontend-design/ # 프론트엔드 디자인 생성\n│ │ ├── landing-page-guide/ # 랜딩페이지 가이드\n│ │ ├── landing-page-guide-v2/ # 랜딩페이지 가이드 V2\n│ │ │ ├── SKILL.md\n│ │ │ └── references/\n│ │ │ ├── 11-essential-elements.md\n│ │ │ └── component-examples.md\n│ │ ├── card-news-generator/ # 카드 뉴스 자동 생성\n│ │ ├── card-news-generator-v2/ # 카드 뉴스 V2 (배경 이미지)\n│ │ ├── web-to-markdown/ # 웹페이지 마크다운 변환\n│ │ ├── code-prompt-coach/ # Claude Code 세션 로그 분석\n│ │ ├── midjourney-cardnews-bg/ # Midjourney 카드 뉴스 배경\n│ │ ├── workthrough/ # 개발 작업 자동 문서화\n│ │ │ ├── SKILL.md\n│ │ │ ├── README.md\n│ │ │ ├── TEMPLATE.md\n│ │ │ ├── EXAMPLES.md\n│ │ │ ├── QUICKSTART.md\n│ │ │ └── LICENSE.txt\n│ │ ├── workthrough-v2/ # 개발 작업 자동 문서화 + VitePress\n│ │ │ ├── SKILL.md\n│ │ │ ├── README.md\n│ │ │ ├── .vitepress/\n│ │ │ │ └── config.ts\n│ │ │ └── package.json\n│ │ ├── gemini-logo-remover/ # Gemini 로고/워터마크 제거\n│ │ │ └── SKILL.md\n│ │ ├── design-prompt-generator-v2/ # AI 웹 빌더용 디자인 프롬프트 생성기\n│ │ │ ├── SKILL.md\n│ │ │ └── sample/ # 펫시터 서비스 예제\n│ │ └── web-search/ # DuckDuckGo 웹 검색\n│ │ ├── SKILL.md\n│ │ └── scripts/\n│ │ └── search.py # 검색 CLI 스크립트\n│ └── README.md # 플러그인 마켓플레이스 문서\n├── .claude/ # Claude Code 설정\n│ └── skills/ # 로컬 스킬 (deprecated, plugins/skills 사용 권장)\n└── README.md # 이 파일\n```\n\n## 스킬별 상세 정보\n\n각 스킬 폴더의 `skill.md` 파일에서 더 자세한 정보를 확인할 수 있습니다:\n\n- [Code Changelog 상세 정보](./plugins/skills/code-changelog/skill.md)\n- [Meta Prompt Generator 상세 정보](./plugins/skills/meta-prompt-generator/skill.md)\n- [Prompt Enhancer 상세 정보](./plugins/skills/prompt-enhancer/skill.md)\n- [Flutter Init 상세 정보](./plugins/skills/flutter-init/skill.md)\n- [Next.js 15 Init 상세 정보](./plugins/skills/nextjs15-init/skill.md)\n- [Codex 상세 정보](./plugins/skills/codex/skill.md)\n- [Codex-Claude Loop 상세 정보](./plugins/skills/codex-claude-loop/SKILL.md)\n- [Codex-Claude Loop 사용법](./plugins/skills/codex-claude-loop/README.md)\n- [Frontend Design 상세 정보](./plugins/skills/frontend-design/SKILL.md)\n- [Landing Page Guide V2 상세 정보](./plugins/skills/landing-page-guide-v2/SKILL.md)\n- [Card News Generator 상세 정보](./plugins/skills/card-news-generator/SKILL.md)\n- [Card News Generator V2 상세 정보](./plugins/skills/card-news-generator-v2/V2_FEATURES.md)\n- [Web to Markdown 상세 정보](./plugins/skills/web-to-markdown/SKILL.md)\n- [Code Prompt Coach 상세 정보](./plugins/skills/code-prompt-coach/SKILL.md)\n- [Codex-Claude-Cursor Loop 상세 정보](./plugins/skills/codex-claude-cursor-loop/SKILL.md)\n- [Midjourney Card News BG 상세 정보](./plugins/skills/midjourney-cardnews-bg/SKILL.md)\n- [Workthrough 상세 정보](./plugins/skills/workthrough/SKILL.md)\n- [Workthrough 빠른 시작](./plugins/skills/workthrough/QUICKSTART.md)\n- [Workthrough 예제](./plugins/skills/workthrough/EXAMPLES.md)\n- [Workthrough V2 상세 정보](./plugins/skills/workthrough-v2/SKILL.md)\n- [Workthrough V2 사용법](./plugins/skills/workthrough-v2/README.md)\n- [Gemini Logo Remover 상세 정보](./plugins/skills/gemini-logo-remover/SKILL.md)\n- [Design Prompt Generator V2 상세 정보](./skills/design-prompt-generator-v2/SKILL.md)\n- [Design Prompt Generator V2 샘플](./skills/design-prompt-generator-v2/sample/)\n- [Web Search 상세 정보](./skills/web-search/SKILL.md)\n\n## 기여\n\n새로운 스킬을 추가하거나 기존 스킬을 개선하고 싶으시다면:\n\n1. `plugins/skills/` 폴더에 새로운 스킬 디렉토리 생성\n2. `SKILL.md` 파일 작성 (스킬 메타데이터 및 설명)\n3. 필요한 파일들 추가\n4. README.md에 스킬 정보 추가\n\n## 라이선스\n\nMIT License\n\n## Changelog\n\n### [1.10.0] - 2026-02-08\n\n#### Added\n- **web-search**: DuckDuckGo 기반 웹 검색 스킬 🆕\n - 3가지 검색 유형 (텍스트, 뉴스, 이미지)\n - 지역별 검색 필터 (한국, 미국, 일본 등)\n - 기간 필터 (일/주/월/년)\n - JSON 형식 결과 출력\n - 검색 연산자 지원 (site:, filetype:, \"exact phrase\", -exclude)\n - duckduckgo-search 패키지 자동 설치\n - SafeSearch 설정 (on/moderate/off)\n - 빌트인 WebSearch 보완 (US 외 지역, 뉴스/이미지 전용 검색)\n\n#### Changed\n- **README.md**: web-search 스킬 추가\n - 빠른 설치 테이블에 추가\n - 스킬 목록(19번)에 상세 설명 추가\n - 마켓플레이스 설치 명령어 추가\n - 실행 방법 및 폴더 구조 업데이트\n - 스킬별 상세 정보 링크 추가\n\n### [1.9.0] - 2026-01-09\n\n#### Added\n- **design-prompt-generator-v2**: AI 웹 빌더용 디자인 프롬프트 생성기 🆕\n - 7단계 계층적 프레임워크 (Domain Research → Micro-interactions)\n - 8개 도메인별 UX 패턴 매트릭스 (Pet Services, SaaS, E-commerce 등)\n - 7가지 감정 키워드 매트릭스 (Trust, Warmth, Energy 등)\n - 완전한 디자인 시스템 템플릿 (10가지 컬러, 타이포, 스페이싱)\n - 마이크로 인터랙션 정의 (5가지 카테고리)\n - Lovable, Cursor, Bolt 등 AI 웹 빌더 지원\n - 펫시터 서비스 샘플 HTML 포함\n\n#### Changed\n- **README.md**: design-prompt-generator-v2 스킬 추가\n - 빠른 설치 테이블에 추가\n - 스킬 목록(17번)에 상세 설명 추가\n - 마켓플레이스 설치 명령어 추가\n - 폴더 구조 및 상세 정보 링크 업데이트\n\n### [1.8.0] - 2025-12-10\n\n#### Added\n- **gemini-logo-remover**: Gemini 로고 및 워터마크 제거 스킬 🆕\n - OpenCV inpainting 기반 자연스러운 로고 제거\n - 좌표 기반 영역 지정 제거\n - 코너 기반 자동 제거 (top_left, top_right, bottom_left, bottom_right)\n - 비율 기반 영역 계산 (w_ratio, h_ratio)\n - TELEA 알고리즘으로 배경 복원\n - PNG, JPG, JPEG, WebP, BMP 지원\n\n#### Changed\n- **README.md**: gemini-logo-remover 스킬 추가\n - 빠른 설치 테이블에 추가\n - 스킬 목록(16번)에 상세 설명 추가\n - 마켓플레이스 설치 명령어 추가\n - 실행 방법 및 폴더 구조 업데이트\n - 스킬별 상세 정보 링크 추가\n\n### [1.7.0] - 2025-11-19\n\n#### Added\n- **workthrough**: 개발 작업 자동 문서화 스킬 ⭐\n - 모든 개발 작업을 구조화된 워크스루 형식으로 자동 문서화\n - 버그 수정, 기능 구현, 리팩토링 등 모든 작업 추적\n - 타임스탬프 기반 파일명으로 체계적 관리\n - 코드 예제, 검증 결과, 다음 단계 자동 포함\n - 팀 협업 및 지식 공유 촉진\n - 6개 문서 파일: SKILL.md, README.md, TEMPLATE.md, EXAMPLES.md, QUICKSTART.md, LICENSE.txt\n- **workthrough-v2**: VitePress 기반 워크스루 문서화 스킬 🆕\n - Workthrough 기본 기능 + VitePress 자동 빌드\n - http://localhost:5173 에서 문서 서비스 제공\n - 실시간 업데이트 (HMR)\n - 강력한 검색 기능\n - 자동 생성 사이드바 네비게이션\n - 다크 모드 지원\n - 200+ 언어 코드 하이라이팅\n - 반응형 디자인 (모바일/태블릿/데스크톱)\n\n#### Changed\n- **프로젝트 구조**: skills 폴더를 plugins/skills로 통합 🔄\n - `skills/` → `plugins/skills/`로 모든 스킬 이동\n - 플러그인 마켓플레이스 중앙화\n - `.claude/skills/`는 deprecated, plugins/skills 사용 권장\n - 총 18개 스킬 통합 관리\n- **README.md**: workthrough & workthrough-v2 스킬 추가\n - 빠른 설치 테이블에 workthrough, workthrough-v2 추가\n - 스킬 목록(14, 15번)에 상세 설명 추가\n - V1 vs V2 비교표 추가\n - 마켓플레이스 설치 명령어 추가\n - 실행 방법 및 폴더 구조 업데이트\n - 모든 경로를 plugins/skills로 변경\n - 스킬별 상세 정보 링크 업데이트\n- **plugins/README.md**: 신규 스킬 추가\n - frontend-design, landing-page-guide-v2 추가\n - code-prompt-coach, codex-claude-cursor-loop 추가\n - midjourney-cardnews-bg 추가\n - workthrough, workthrough-v2 추가\n\n### [1.6.0] - 2025-11-12\n\n#### Added\n- **code-prompt-coach**: Claude Code 세션 로그 분석 스킬 ⭐\n - 프롬프트 품질 향상 (컨텍스트 인식)\n - 토큰 사용량 및 비용 분석 (모델별 요금)\n - 8가지 분석 기능 통합 종합 리포트\n - 도구 사용 패턴, 효율성, 생산성, 파일 히트맵 분석\n- **codex-claude-cursor-loop**: Claude + Codex + Cursor 3중 AI 엔지니어링 루프\n - Claude가 계획 및 아키텍처 담당\n - Codex가 계획 검증 및 코드 리뷰 담당\n - Cursor Agent가 모든 구현 담당\n - 순차적 검증으로 최고 품질 보장\n- **midjourney-cardnews-bg**: Midjourney 카드 뉴스 배경 프롬프트 생성기\n - 600x600px 1:1 비율 최적화\n - 텍스트 오버레이 고려 배경 디자인\n - 주제/스타일별 다양한 변형 제공\n - 한국어 주제 지원\n\n#### Changed\n- **README.md**: 새로운 3개 스킬 추가 및 설명 업데이트\n- 빠른 설치 테이블에 신규 스킬 추가\n- 마켓플레이스 설치 명령어 추가\n- 실행 방법 및 폴더 구조 업데이트\n\n### [1.5.0] - 2025-11-07\n\n#### Added\n- **web-to-markdown**: 동적 콘텐츠 처리 기능 추가 ⭐\n - WebFetch 실패 시 Playwright 자동 폴백\n - MCP Playwright 및 Node Playwright 지원\n - JavaScript 렌더링 페이지 자동 감지\n - AskUserQuestion으로 사용자 확인 프로세스\n- **SKILL_DISTRIBUTION_GUIDE.md**: NPM 패키지로 스킬 배포하는 완전 가이드 추가\n - NPM 패키지 구조 만들기\n - 첫 배포 및 업데이트 방법\n - 버전 관리 Best Practices\n - FAQ 및 실전 예제\n\n#### Changed\n- **README.md**: web-to-markdown 스킬 설명에 동적 콘텐츠 처리 기능 추가\n- **README.md**: 동적 콘텐츠 사용 예시 추가\n\n#### Technical Details\n- Playwright를 통한 Chromium 브라우저 자동화\n- Cheerio를 통한 HTML 파싱 및 마크다운 변환\n- React, Vue, Next.js 등 SPA 페이지 완벽 지원\n\n### [1.4.0] - 2025-10-29\n\n#### Added\n- **card-news-generator-v2**: 배경 이미지 지원 기능\n- **landing-page-guide**: 전환율 높은 랜딩페이지 제작 가이드\n- **midjourney-cardnews-bg**: Midjourney 프롬프트 생성 스킬\n\n### [1.3.0] - 2025-10-27\n\n#### Added\n- **codex-claude-cursor-loop**: Claude + Codex + Cursor 3중 AI 루프\n- **codex-claude-loop**: Claude + Codex 이중 AI 엔지니어링 루프\n\n### [1.2.0] - 2025-10-25\n\n#### Added\n- **web-to-markdown**: 웹페이지 마크다운 변환 스킬\n - 일반 모드\n - AI 최적화 모드\n - 듀얼 모드\n- **card-news-generator-v2**: 배경 이미지 지원 버전\n\n### [1.1.0] - 2025-10-23\n\n#### Added\n- **flutter-init**: Flutter Clean Architecture 프로젝트 생성\n- **nextjs15-init**: Next.js 15 App Router 프로젝트 생성\n- **code-changelog**: AI 코드 변경사항 자동 문서화\n- **meta-prompt-generator**: 구조화된 커스텀 슬래시 커맨드 생성\n- **prompt-enhancer**: 프로젝트 컨텍스트 기반 프롬프트 향상\n\n### [1.0.0] - 2025-10-20\n\n#### Added\n- 초기 릴리즈\n- **card-news-generator**: 인스타그램 카드 뉴스 생성\n- **codex**: OpenAI Codex CLI 통합\n- 마켓플레이스 설정 및 배포\n\n---\n\n## 참고\n\n이 스킬들은 Claude Code의 공식 문서를 참고하여 작성되었습니다:\n- [Claude Code Documentation](https://docs.claude.com/en/docs/claude-code)\n- [Keep a Changelog](https://keepachangelog.com/)\n",
"bytes": 35223,
"sha": "2418d290197aea03248dfee321308e76f25ec8eb908873405e38a3ce2219af2c",
"repo_slug": "bear2u/my-skills",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/skl_bear2u_my_skills_landing_page_guide_v2_ab60172f/readme"
}