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 |

마켓플레이스 추가

/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