my-skills

My Skills Hub

Claude Code를 위한 커스텀 스킬 모음입니다. 개발 생산성을 높이기 위한 다양한 자동화 스킬들을 제공합니다.

---

🎴 카드로 배우는 개발 학습 플랫폼

프로그래밍 언어와 프레임워크를 카드 뉴스 형태로 쉽게 배우세요! Flutter React TypeScript JavaScript Python Dart

👉 CodeDeck 바로가기 📺 YouTube에서 보기

---

빠른 설치

스킬 이름	한줄 설명	마켓 설치 명령어
Flutter Init	Flutter 프로젝트를 Clean Architecture로 자동 생성	/plugin marketplace install suji-father-marketplace@flutter-init
Next.js 15 Init	Next.js 15 프로젝트를 App Router로 자동 생성	/plugin marketplace install suji-father-marketplace@nextjs15-init
Code Changelog	AI 코드 변경사항을 자동 문서화하고 웹에서 실시간 확인	/plugin marketplace install suji-father-marketplace@code-changelog
Codex	OpenAI Codex CLI로 코드 분석, 리팩토링, 자동 편집	/plugin marketplace install suji-father-marketplace@codex
Codex-Claude Loop	Claude + Codex 이중 AI 엔지니어링 루프로 최고 품질 보장	/plugin marketplace install suji-father-marketplace@codex-claude-loop
Meta Prompt Generator	구조화된 커스텀 슬래시 커맨드를 자동 생성	/plugin marketplace install suji-father-marketplace@meta-prompt-generator
Prompt Enhancer	프로젝트 컨텍스트 분석으로 간단한 요청을 상세 요구사항으로 변환	/plugin marketplace install suji-father-marketplace@prompt-enhancer
Web to Markdown	웹페이지를 마크다운으로 변환 (일반/AI 최적화/듀얼 모드)	/plugin marketplace install suji-father-marketplace@web-to-markdown
Card News Generator	600x600 인스타그램 스타일 카드 뉴스 시리즈 자동 생성	/plugin marketplace install suji-father-marketplace@card-news-generator
Card News Generator V2	배경 이미지 지원 카드 뉴스 생성기 (고급 기능)	/plugin marketplace install suji-father-marketplace@card-news-generator-v2
Landing Page Guide V2	아름다운 디자인 + 높은 전환율 랜딩페이지 제작 가이드	/plugin marketplace install suji-father-marketplace@landing-page-guide-v2
Code Prompt Coach	Claude Code 세션 로그 분석으로 프롬프트 품질 향상	/plugin marketplace install suji-father-marketplace@code-prompt-coach
Codex-Claude-Cursor Loop	Claude + Codex + Cursor 3중 AI 엔지니어링 루프	/plugin marketplace install suji-father-marketplace@codex-claude-cursor-loop
Midjourney Card News BG	카드 뉴스용 Midjourney 배경 이미지 프롬프트 생성	/plugin marketplace install suji-father-marketplace@midjourney-cardnews-bg
Workthrough	모든 개발 및 수정 작업을 자동으로 문서화하여 워크스루 형식으로 저장	/plugin marketplace install suji-father-marketplace@workthrough
Workthrough V2	워크스루 문서화 + VitePress 빌드로 5173 포트에서 문서 서비스 제공	/plugin marketplace install suji-father-marketplace@workthrough-v2
Gemini Logo Remover	OpenCV inpainting으로 Gemini 로고/워터마크 제거	/plugin marketplace install suji-father-marketplace@gemini-logo-remover
Design Prompt Generator V2	AI 웹 개발 도구용 7단계 계층적 디자인 프롬프트 생성기	/plugin marketplace install suji-father-marketplace@design-prompt-generator-v2
Web Search	DuckDuckGo 기반 텍스트/뉴스/이미지 검색 (지역/기간 필터 지원)	/plugin marketplace install suji-father-marketplace@web-search

마켓플레이스 추가

/plugin marketplace add bear2u/claude-plugins

스킬 목록

1. Code Changelog

AI가 생성한 모든 코드 변경사항을 자동으로 문서화하고 웹 브라우저에서 실시간으로 확인할 수 있는 스킬입니다.

주요 기능:

• 자동 문서 생성 (Markdown)
• HTML 뷰어 (설치 불필요, Python 서버)
• 다크 모드 UI (GitHub 스타일)
• 실시간 서버 (http://localhost:4000)

사용 시나리오:

• 코드 리뷰 문서 자동 생성
• 변경 이력 추적
• 팀원과 변경사항 공유

2. Meta Prompt Generator

간단한 설명을 받아 단계별 병렬 처리가 가능한 구조화된 커스텀 슬래시 커맨드를 자동으로 생성합니다.

주요 기능:

• 지능형 지식 수집 (웹 검색)
• 단계 기반 워크플로우 설계
• 포괄적인 테스트 생성
• 병렬 처리 최적화

사용 시나리오:

• 복잡한 프로젝트 워크플로우 자동화
• 재사용 가능한 슬래시 커맨드 생성
• 체계적인 테스트 스위트 작성

3. Prompt Enhancer

프로젝트 컨텍스트를 분석하여 간단한 개발 요청을 명확하고 상세한 요구사항으로 변환합니다.

주요 기능:

• 프로젝트 구조 자동 분석
• 기존 패턴 인식
• 구조화된 요구사항 생성
• 프레임워크별 최적화

사용 시나리오:

• "로그인 기능 만들어줘" → 상세한 구현 요구사항
• Clean Architecture 기반 설계 제안
• 프로젝트 컨벤션 자동 적용

지원 스택:

• Flutter (Clean Architecture, Riverpod)
• Next.js/React (App Router, Zustand)
• Python (Django, FastAPI)

4. Flutter Init

도메인 기반 Flutter 프로젝트를 Clean Architecture로 자동 생성합니다.

주요 기능:

• 도메인 선택 (Todo/Habit/Note/Expense/Custom)
• 스택 프리셋 (Minimal/Essential/Full Stack/Custom)
• Clean Architecture 자동 생성
• Riverpod 3.0, Drift, Freezed 설정

기술 스택:

• Riverpod 3.x (상태 관리)
• Drift (로컬 데이터베이스)
• Freezed (불변 모델)
• Easy Localization (다국어)
• FluentUI Icons

사용 시나리오:

• 새로운 Flutter 앱 빠른 시작
• Clean Architecture 보일러플레이트
• 도메인 중심 설계

5. Next.js 15 Init

도메인 기반 Next.js 15 프로젝트를 App Router로 자동 생성합니다.

주요 기능:

• 도메인 선택 (Todo/Blog/Dashboard/E-commerce/Custom)
• 스택 프리셋 (Minimal/Essential/Full Stack/Custom)
• App Router 기반 구조
• TypeScript Strict Mode

기술 스택:

• Next.js 15 (App Router)
• ShadCN/ui (UI 컴포넌트)
• Zustand (클라이언트 상태)
• Tanstack Query (서버 상태)
• Drizzle ORM (TypeScript ORM)
• Better Auth (인증)

사용 시나리오:

• 새로운 Next.js 앱 빠른 시작
• 타입 안전한 풀스택 앱
• 도메인 중심 설계

6. Codex

OpenAI Codex CLI를 사용하여 코드 분석, 리팩토링, 자동화된 편집을 수행합니다.

주요 기능:

• 대화형 모델 및 추론 레벨 선택 (gpt-5, gpt-5-codex)
• 샌드박스 모드 (read-only, workspace-write, danger-full-access)
• 세션 재개 기능 (codex exec resume --last)
• 자동화된 코드 편집 (--full-auto)

사용 시나리오:

• 코드 리뷰 및 분석
• 대규모 리팩토링 자동화
• 코드베이스 전체 수정 작업
• 이전 세션 이어서 작업

샌드박스 모드:

• read-only: 코드 분석 전용 (읽기만)
• workspace-write: 로컬 파일 수정
• danger-full-access: 네트워크 접근 포함 전체 권한

6-1. Codex-Claude Loop 🔄

Claude Code와 Codex를 결합한 이중 AI 엔지니어링 루프로 최상의 코드 품질을 보장합니다.

핵심 워크플로우:

• Claude (계획 + 구현) → Codex (검증) → 피드백 → Claude (수정) → Codex (재검증) → 반복
• Claude가 모든 코드 작성, Codex가 모든 검증 담당
• 자체 수정 시스템으로 고품질 엔지니어링

주요 기능:

• 계획 단계: Claude가 아키텍처와 구현 계획 수립
• 검증 단계: Codex가 계획의 로직 에러, 보안 취약점 검토
• 구현 단계: Claude가 검증된 계획으로 코드 작성 (Edit/Write 도구 사용)
• 코드 리뷰: Codex가 구현된 코드의 버그, 성능, 보안 검증
• 수정 반영: Claude가 Codex 피드백 기반으로 코드 수정
• 재검증: Codex가 수정사항 확인

언제 사용하나요:

• ✅ 복잡한 기능 개발 (여러 단계)
• ✅ 보안/성능이 중요한 작업
• ✅ 대규모 리팩토링
• ✅ 높은 코드 품질이 필요할 때
• ❌ 간단한 일회성 수정 (과함)
• ❌ 프로토타입/실험 코드 (과함)

실전 예시:

# 1. Claude가 OAuth 2.0 로그인 계획 수립
# 2. Codex로 계획 검증
echo "Review this plan..." | codex exec -m gpt-5-codex --config model_reasoning_effort="high" --sandbox read-only

# 3. Claude가 검증된 계획으로 구현 (Edit/Write 도구 사용)
# 4. Codex가 구현된 코드 리뷰
echo "Review implementation..." | codex exec --sandbox read-only

# 5. Claude가 피드백 반영하여 코드 수정
# 6. Codex가 재검증
echo "Verify fixes..." | codex exec resume --last

역할 분담:

• Claude: 모든 코드 작성 및 수정
• Codex: 모든 검증 및 리뷰

명령어 레퍼런스:

• 계획 검증: codex exec -m gpt-5-codex --sandbox read-only
• 코드 리뷰: codex exec --sandbox read-only
• 재검증: codex exec resume --last (설정 자동 상속)

모델 선택 가이드:

• gpt-5: 빠른 일반 작업
• gpt-5-codex: 복잡한 코드 분석 (권장)

Reasoning Effort:

• low: 간단한 검증
• medium: 일반적인 작업 (권장)
• high: 보안/critical 로직

7. Landing Page Guide V2 ⭐ UPDATED

독특하고 아름다운 디자인과 높은 전환율을 동시에 달성하는 랜딩페이지 제작 가이드

일반적인 AI 생성 템플릿을 벗어나 전환율과 브랜드 각인을 동시에 달성하는 랜딩페이지를 만드는 완전 가이드입니다.

핵심 철학:

• 💎 전환율 + 기억에 남는 브랜드: 일반적인 템플릿 같은 페이지는 전환도, 브랜드 각인도 실패합니다
• 🎯 의도적인 디자인: 모든 미적 선택은 의도적이어야 하며, 기본값이 아니어야 합니다
• 🚫 Generic AI 미학 탈피: Inter 폰트, 보라색 그라데이션, 예측 가능한 레이아웃 피하기

V2 주요 개선사항:

• ✨ Design Thinking First: 코딩 전 미적 방향성 정의 (미니멀, 맥시멀리스트, 레트로, 유기적 등 6가지 방향)
• ✨ Typography Excellence: 독특한 폰트 선택 가이드 (Space Grotesk, Clash Display 등 - Inter/Roboto 금지)
• ✨ Advanced Animation: Staggered reveals, parallax, scroll-triggered animations
• ✨ Spatial Composition: 비대칭, 오버랩, 대각선 흐름으로 예상 밖의 레이아웃 (grid-breaking)
• ✨ Rich Backgrounds: Gradient meshes, noise textures, geometric patterns, layered transparencies
• ✨ Component-Level Design Guide: 11가지 필수 요소 각각에 대한 디자인 우수성 기준과 예제

11가지 필수 요소 (전환율) + 디자인 우수성 (기억 각인):

1. ✅ 키워드 URL (SEO 최적화)
2. ✅ 로고 + 애니메이션 헤더 (스크롤 시 backdrop blur 전환)
3. ✅ MASSIVE 타이포그래피 (4rem-6rem+, 그라데이션 텍스트, staggered animation)
4. ✅ 독특한 CTA 디자인 (pill shapes, 마이크로 인터랙션, hover scale)
5. ✅ 애니메이션된 소셜 프루프 (숫자 count-up effect, 5성급 리뷰, 통계)
6. ✅ 깊이감 있는 미디어 (3D tilt, 그림자, 반사, parallax, 폰 mockup)
7. ✅ 비대칭 레이아웃 (커스텀 아이콘, 그라데이션 배경, asymmetric grid)
8. ✅ 독특한 카드 디자인 (커스텀 아바타, 그라데이션 테두리, glassmorphism)
9. ✅ 부드러운 아코디언 (커스텀 chevron 회전, 스무스 expand/collapse)
10. ✅ 드라마틱한 최종 CTA (전체 폭, 강력한 배경, urgency indicators)
11. ✅ 세련된 멀티 컬럼 푸터 (소셜 아이콘 hover effects, 뉴스레터 signup)

기술 스택:

• Next.js 15+ (App Router, RSC)
• TypeScript (Strict Mode)
• Tailwind CSS (완전 커스터마이징 - default config 탈피)
• ShadCN UI (시작점, 반드시 heavy customization!)
• Framer Motion (고급 애니메이션, optional)

Design System 구축:

• CSS Variables로 색상/타이포그래피/spacing/animation 시스템 정의
• 독특한 Display Font (Space Grotesk, Clash Display, Cabinet Grotesk) + 세련된 Body Font (DM Sans, General Sans, Geist)
• Dominant (60%) / Accent (10%) / Neutral (30%) 색상 팔레트
• 일관된 애니메이션 타이밍 (cubic-bezier easing) 및 stagger delays

구현 워크플로우:

1. Design Thinking First (코딩 전 필수!)
   • 브랜드 personality 파악
   • Aesthetic direction 선택 (minimalist/maximalist/retro/organic/editorial/brutalist)
   • Typography, color palette, motion strategy 정의
2. Setup Design System (CSS variables in globals.css)
3. SEO Metadata (layout.tsx)
4. Component-by-Component (Header → Hero → Media → Benefits → Testimonials → FAQ → Final CTA → Footer)
5. Animations (Entrance, scroll-triggered, hover states)
6. Responsive Design (Mobile-first)
7. Performance & Accessibility

검증 체크리스트:

• ✅ 11가지 필수 요소 모두 포함
• ✅ 독특한 폰트 사용 (NOT Inter/Roboto)
• ✅ 독특한 색상 팔레트 (NOT 보라 그라데이션)
• ✅ 예상 밖의 레이아웃 (NOT 정중앙 대칭 그리드)
• ✅ Rich backgrounds (NOT 순백색)
• ✅ 애니메이션 (staggered, scroll-triggered)
• ✅ ShadCN heavily customized
• ✅ 접근성 (WCAG AA, 키보드 네비게이션, reduced motion)
• ✅ 성능 (Next.js Image, lazy loading, 폰트 최적화)

사용 시나리오:

• 🎨 일반 템플릿을 벗어나고 싶을 때
• 🚀 SaaS 제품 론칭 (Free trial CTA, feature comparison)
• 🛍️ 이커머스 제품 페이지 (Product images, urgency, return policy)
• 💼 서비스/에이전시 (Portfolio showcase, case studies)
• 🎫 이벤트/웨비나 (Countdown timer, speaker profiles)
• 📱 모바일 앱 소개 (App Store badges, 디바이스 mockup, 스크린샷)
• 💡 브랜드 차별화가 필수인 경우
• ⚡ 전환율 + 브랜드 각인 모두 중요한 경우

실전 예제: 모바일 앱 랜딩페이지 (이 레포의 landing-page-v2-test/ 폴더)

• Modern & Sleek aesthetic
• Space Grotesk + DM Sans
• Purple-Blue gradient primary + Cyan accent
• 3개 phone mockups (CSS-only UI)
• 모든 11가지 필수 요소 구현
• Staggered animations, scroll effects
• 완전 반응형 + 접근성

참고 자료:

• 11 Essential Elements 상세 가이드
• Component Examples (ShadCN)
• 스킬 전체 문서

8. Card News Generator

600x600 인스타그램 스타일 카드 뉴스 시리즈를 자동으로 생성합니다.

주요 기능:

• 주제와 색상만 입력하면 자동 생성
• 5-7장의 카드 시리즈 자동 제작
• 자동 텍스트 래핑 및 레이아웃
• RGB to Hex 색상 변환
• 단일 카드/멀티 카드 모드

캔버스 사양:

• 크기: 600x600 픽셀 (인스타그램 최적화)
• 자동 텍스트 줄바꿈
• 번호 배지, 제목, 본문 계층 구조
• 다양한 색상 프리셋 제공

권장 색상:

• 베이지: 245,243,238
• 핑크: 255,229,229
• 민트: 224,244,241
• 라벤더: 232,224,245
• 피치: 255,232,214
• 스카이 블루: 227,242,253

사용 시나리오:

• 소셜 미디어 카드 뉴스 제작
• 인스타그램 콘텐츠 시리즈
• 정보 전달용 카드 이미지
• 교육/마케팅 콘텐츠

9. Card News Generator V2 🆕

배경 이미지를 지원하는 향상된 카드 뉴스 생성기입니다.

V2 새로운 기능: