@kood/claude-code 0.2.4 → 0.3.0

package/templates/.claude/skills/frontend-design/references/typography-2026.md

@@ -1,302 +0,0 @@
-# Typography 2026 Guide
-
-## 핵심 원칙
-
-1. **Variable Fonts 사용** - 단일 파일로 다양한 웨이트
-2. **명확한 위계** - Display, Body, Mono 구분
-3. **독창적 선택** - 일반적인 폰트 회피
-4. **성능 최적화** - font-display: swap
-
-## Variable Fonts
-
-### 설정
-
-```css
-@font-face {
-  font-family: 'Display';
-  src: url('/fonts/display-variable.woff2') format('woff2');
-  font-weight: 100 900;        /* 가변 범위 */
-  font-style: normal;
-  font-display: swap;          /* 필수 */
-}
-
-@font-face {
-  font-family: 'Body';
-  src: url('/fonts/body-variable.woff2') format('woff2');
-  font-weight: 300 700;
-  font-style: normal;
-  font-display: swap;
-}
-```
-
-### 사용
-
-```css
-:root {
-  --font-display: 'Display', serif;
-  --font-body: 'Body', sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
-}
-
-h1 {
-  font-family: var(--font-display);
-  font-weight: 800;            /* 가변 웨이트 */
-  font-variation-settings: 'wght' 800;  /* 세밀 조절 */
-}
-```
-
-## 타입 스케일
-
-### Fluid Typography
-
-```css
-:root {
-  /* Fluid scale - clamp(min, preferred, max) */
-  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
-  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
-  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
-  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
-  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
-  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
-  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
-  --text-4xl: clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
-  --text-5xl: clamp(3rem, 2rem + 5vw, 6rem);
-}
-```
-
-### Line Height
-
-```css
-:root {
-  --leading-tight: 1.1;    /* 대형 헤드라인 */
-  --leading-snug: 1.25;    /* 소형 헤드라인 */
-  --leading-normal: 1.5;   /* 본문 */
-  --leading-relaxed: 1.75; /* 긴 텍스트 */
-}
-```
-
-### Letter Spacing
-
-```css
-:root {
-  --tracking-tight: -0.02em;   /* 대형 타이틀 */
-  --tracking-normal: 0;        /* 기본 */
-  --tracking-wide: 0.05em;     /* 캡션, 라벨 */
-  --tracking-wider: 0.1em;     /* 올캡스 */
-}
-```
-
-## 폰트 페어링
-
-### 클래식 에디토리얼
-
-| 용도 | 폰트 | 웨이트 |
-|------|------|--------|
-| Display | Playfair Display | 400-800 |
-| Body | Source Sans 3 | 300-600 |
-| Mono | IBM Plex Mono | 400 |
-
-```css
-/* CDN */
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400..800&family=Source+Sans+3:wght@300..600&display=swap');
-```
-
-### 모던 볼드
-
-| 용도 | 폰트 | 웨이트 |
-|------|------|--------|
-| Display | Clash Display | 500-700 |
-| Body | Satoshi | 400-700 |
-| Mono | Fira Code | 400-500 |
-
-```css
-/* Fontshare */
-@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&f[]=satoshi@400,500,700&display=swap');
-```
-
-### 따뜻한 친근함
-
-| 용도 | 폰트 | 웨이트 |
-|------|------|--------|
-| Display | Fraunces | 400-700 |
-| Body | Work Sans | 300-600 |
-| Mono | JetBrains Mono | 400 |
-
-### 테크 미니멀
-
-| 용도 | 폰트 | 웨이트 |
-|------|------|--------|
-| Display | Space Mono | 400-700 |
-| Body | DM Sans | 400-600 |
-| Mono | Space Mono | 400 |
-
-### 럭셔리 정제
-
-| 용도 | 폰트 | 웨이트 |
-|------|------|--------|
-| Display | Cormorant Garamond | 300-600 |
-| Body | Lora | 400-600 |
-| Mono | Victor Mono | 400 |
-
-### 크리에이티브
-
-| 용도 | 폰트 | 웨이트 |
-|------|------|--------|
-| Display | Syne | 400-800 |
-| Body | General Sans | 400-600 |
-| Mono | Monaspace | 400 |
-
-## 금지 폰트
-
-| 폰트 | 이유 |
-|------|------|
-| Inter | AI 슬롭의 대명사 |
-| Roboto | 무개성, 과다 사용 |
-| Arial | 시스템 기본, 무특징 |
-| Helvetica | 지루함 |
-| Space Grotesk | AI 생성물 단골 |
-| Montserrat | 과다 사용 |
-| Poppins | 과다 사용 |
-| Open Sans | 무개성 |
-
-**예외**: Inter는 독창적인 Display 폰트와 함께 Body로 사용 시 허용
-
-## 실전 패턴
-
-### 기본 설정
-
-```css
-html {
-  font-family: var(--font-body);
-  font-size: var(--text-base);
-  line-height: var(--leading-normal);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-display);
-  line-height: var(--leading-tight);
-  letter-spacing: var(--tracking-tight);
-  text-wrap: balance;           /* 2026 표준 */
-}
-
-p {
-  text-wrap: pretty;            /* 고아 방지 */
-  max-width: 65ch;              /* 가독성 */
-}
-
-code, pre {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
-}
-```
-
-### 대형 헤드라인
-
-```css
-.hero-title {
-  font-family: var(--font-display);
-  font-size: var(--text-5xl);
-  font-weight: 800;
-  line-height: var(--leading-tight);
-  letter-spacing: var(--tracking-tight);
-
-  /* 실험적 효과 */
-  font-variation-settings: 'wght' 800, 'wdth' 110;
-}
-```
-
-### 캡션/라벨
-
-```css
-.label {
-  font-family: var(--font-body);
-  font-size: var(--text-xs);
-  font-weight: 500;
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
-}
-```
-
-### 인용문
-
-```css
-blockquote {
-  font-family: var(--font-display);
-  font-size: var(--text-xl);
-  font-style: italic;
-  font-weight: 400;
-  line-height: var(--leading-snug);
-}
-```
-
-## 성능 최적화
-
-### 서브셋팅
-
-```css
-/* 한글 서브셋 */
-@font-face {
-  font-family: 'Korean';
-  src: url('/fonts/korean-subset.woff2') format('woff2');
-  unicode-range: U+AC00-D7AF;  /* 한글 음절 */
-  font-display: swap;
-}
-```
-
-### 프리로드
-
-```html
-<link rel="preload" href="/fonts/display.woff2" as="font" type="font/woff2" crossorigin>
-```
-
-### Font Loading API
-
-```js
-// 폰트 로드 후 클래스 추가
-document.fonts.ready.then(() => {
-  document.documentElement.classList.add('fonts-loaded');
-});
-```
-
-```css
-/* FOUT 방지 */
-html:not(.fonts-loaded) body {
-  opacity: 0;
-}
-html.fonts-loaded body {
-  opacity: 1;
-  transition: opacity 0.3s;
-}
-```
-
-## 무료 폰트 소스
-
-| 소스 | URL | 특징 |
-|------|-----|------|
-| Google Fonts | fonts.google.com | 최대 규모, Variable 지원 |
-| Fontshare | fontshare.com | 고품질 무료 |
-| Font Squirrel | fontsquirrel.com | 웹폰트 생성기 |
-| Bunny Fonts | fonts.bunny.net | GDPR 준수 |
-
-## 한글 폰트
-
-| 폰트 | 스타일 | 용도 |
-|------|--------|------|
-| Pretendard | 고딕 | 본문, UI |
-| SUIT | 고딕 | 모던 UI |
-| Noto Sans KR | 고딕 | 범용 |
-| Nanum Myeongjo | 명조 | 에디토리얼 |
-| KoPub 바탕 | 명조 | 본문 |
-| 마루 부리 | 명조 | 독특한 디스플레이 |
-
-```css
-/* Pretendard Variable */
-@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
-
-:root {
-  --font-korean: 'Pretendard Variable', 'Pretendard', sans-serif;
-}
-```

package/templates/.claude/skills/gemini-review/SKILL.md

@@ -1,118 +0,0 @@
----
-name: gemini-review
-description: "Google Gemini CLI를 활용한 코드 리뷰 및 계획 검증 스킬. 구현 계획 검토, 코드 리뷰, 아키텍처 논의 시 Gemini를 세컨드 오피니언으로 활용. gemini-2.5-pro 모델 사용 (무료: 60req/min, 1000req/day)."
-license: Complete terms in LICENSE.txt
----
-
-# Gemini 리뷰 스킬
-
-Claude가 컨텍스트를 준비하고 Gemini가 독립적인 검증을 제공하는 듀얼 AI 리뷰 워크플로우.
-
-**모델**: `gemini-2.5-pro` (고정) | **비용**: 무료 (60 req/min, 1000 req/day)
-
-## 사용 시점
-
-- 코딩 전 구현 계획 검증
-- 완성된 코드의 버그, 보안, 베스트 프랙티스 리뷰
-- 아키텍처 결정에 대한 세컨드 AI 의견
-
-## 워크플로우 타입
-
-| 타입 | 목적 | 사용 시점 |
-|------|------|-----------|
-| **plan** | 구현 계획 검증 | 개발 시작 전 |
-| **code** | 완성 코드 리뷰 | 기능 구현 후 |
-| **architecture** | 시스템 설계 논의 | 설계 단계 또는 리팩토링 시 |
-
-## 실행 프로세스
-
-### Step 1: 사용자 컨텍스트 수집
-
-1. **리뷰 타입**: `plan`, `code`, `architecture`
-2. **리뷰 대상**: 실제 계획, 코드, 아키텍처 설명
-3. **기술 스택** (선택): 프로젝트의 기술 스택 (자유 입력)
-
-### Step 2: 체크리스트 로드
-
-`references/checklists.md`에서 리뷰 대상에 맞는 체크리스트 로드 (범용, 프론트엔드, 백엔드).
-
-### Step 3: Gemini 실행
-
-`references/prompt-templates.md`에서 적절한 템플릿 선택 후 실행.
-
-**기본 패턴:**
-```bash
-gemini -m gemini-2.5-pro -p "{prompt}" --output-format json
-```
-
-**파일 리뷰:**
-```bash
-cat {file_path} | gemini -m gemini-2.5-pro -p "{instructions}" --output-format json
-```
-
-**응답 파싱:**
-```bash
-result=$(gemini -m gemini-2.5-pro -p "..." --output-format json)
-echo "$result" | jq -r '.response'
-```
-
-### Step 4: 결과를 두 섹션으로 제시
-
-**항상 두 개의 명확히 구분된 섹션으로 결과 제시:**
-
-#### A. Gemini 응답 (원본)
-Gemini의 완전한 응답을 수정 없이 제시.
-
-#### B. Claude 분석 및 액션 플랜
-
-1. **요약** (2-3문장): 핵심 발견 사항, 전체 평가
-
-2. **액션 아이템** (우선순위 목록)
-   - 🔴 심각: 진행 전 반드시 수정
-   - 🟡 중요: 조속히 해결 필요
-   - 🟢 경미: 개선하면 좋음
-
-3. **바로 적용 가능한 코드** (해당 시)
-
-**출력 형식:**
-```markdown
-## 📋 Gemini 리뷰 결과
-
-### A. Gemini 응답 (원본)
-{gemini_response_verbatim}
-
----
-
-### B. Claude 분석
-
-#### 요약
-{2-3문장 개요}
-
-#### 액션 아이템
-🔴 **심각**: {이슈} → {수정}
-🟡 **중요**: {이슈} → {수정}
-🟢 **경미**: {이슈} → {수정}
-
-#### 바로 적용 가능한 코드
-{fixed_code}
-```
-
-## 에러 처리
-
-Gemini 에러 발생 시:
-1. 사용자에게 에러 메시지 표시
-2. 일반적인 문제 확인: 할당량 초과, 네트워크 연결, 프롬프트 형식
-3. 재시도 또는 대안 제안
-
-## 할당량 관리
-
-무료 티어 한도: 분당 60 요청, 일당 1000 요청
-
-절약 팁:
-- 관련 리뷰를 단일 프롬프트로 결합
-- 구체적이고 집중된 리뷰 요청 사용
-
-## 참조
-
-- [체크리스트](references/checklists.md): 범용/프론트엔드/백엔드 리뷰 체크리스트
-- [프롬프트 템플릿](references/prompt-templates.md): 리뷰 타입별 프롬프트 템플릿

package/templates/.claude/skills/gemini-review/references/checklists.md

@@ -1,129 +0,0 @@
-# 리뷰 체크리스트
-
-## 범용 체크리스트
-
-### 코드 품질
-- [ ] 단일 책임 원칙 준수
-- [ ] DRY - 불필요한 중복 없음
-- [ ] 함수/메서드가 집중적이고 작음
-- [ ] 명확한 명명 규칙
-- [ ] 주석은 "why"를 설명, "what"이 아님
-
-### 로직 및 정확성
-- [ ] 엣지 케이스 처리 (빈 값, null, 경계값)
-- [ ] 포괄적인 에러 처리
-- [ ] 레이스 컨디션 고려
-- [ ] 입력 유효성 검사
-- [ ] 반환값 확인
-
-### 보안
-- [ ] 하드코딩된 시크릿 없음
-- [ ] 사용자 입력 살균
-- [ ] SQL 인젝션 방지 (파라미터화된 쿼리)
-- [ ] XSS 방지 조치
-- [ ] 적절한 인증/인가
-
-### 성능
-- [ ] 스케일에 적합한 시간 복잡도
-- [ ] 적절한 공간 복잡도
-- [ ] 불필요한 반복 없음
-- [ ] 데이터베이스 쿼리 최적화
-- [ ] 적절한 캐싱 고려
-
-### 유지보수성
-- [ ] 테스트 가능한 코드
-- [ ] 최소한의 정당화된 의존성
-- [ ] 설정 외부화
-- [ ] 디버깅을 위한 로깅
-- [ ] 도움이 되는 에러 메시지
-
-### 문서화
-- [ ] 공개 API 문서화
-- [ ] 복잡한 로직 설명
-- [ ] 명확한 설정 가이드
-- [ ] 환경 변수 문서화
-
----
-
-## 프론트엔드 체크리스트
-
-### 라우팅 및 네비게이션
-- [ ] 라우트 구조가 논리적으로 구성됨
-- [ ] 동적 라우트 파라미터 처리
-- [ ] 레이아웃 중첩 올바르게 구성
-- [ ] 404 및 에러 경계 적절히 처리
-- [ ] 네비게이션 상태 관리
-
-### 상태 관리
-- [ ] 서버 상태와 클라이언트 상태 분리
-- [ ] 불필요한 전역 상태 최소화
-- [ ] 상태 업데이트 로직 명확
-- [ ] 파생 상태 적절히 활용
-
-### 데이터 페칭
-- [ ] 효율적인 데이터 페칭 전략
-- [ ] 로딩/에러 상태 처리 완비
-- [ ] 적절한 캐싱 전략
-- [ ] 불필요한 재요청 방지
-- [ ] 옵티미스틱 업데이트 고려
-
-### 렌더링
-- [ ] SSR/CSR 적절한 선택
-- [ ] 하이드레이션 미스매치 방지
-- [ ] SEO 필수 페이지에 SSR 적용
-- [ ] 클라이언트 전용 코드 올바르게 분리
-
-### 성능 최적화
-- [ ] 코드 스플리팅 적용
-- [ ] 이미지 최적화
-- [ ] 번들 사이즈 모니터링
-- [ ] 불필요한 리렌더링 방지
-- [ ] 메모이제이션 적절히 사용
-
-### 타입 안전성
-- [ ] Props 타입 정의
-- [ ] API 응답 타입 정의
-- [ ] `any` 타입 사용 최소화
-- [ ] 제네릭 적절히 활용
-
----
-
-## 백엔드 체크리스트
-
-### API 설계
-- [ ] RESTful/GraphQL 규칙 준수
-- [ ] 일관된 URL/엔드포인트 명명
-- [ ] 적절한 HTTP 메서드/상태 코드
-- [ ] API 버저닝 전략 (해당 시)
-- [ ] 일관된 응답 형식
-
-### 데이터 검증
-- [ ] 입력 유효성 검사
-- [ ] 적절한 제약조건 (min, max, regex)
-- [ ] Optional vs required 필드 정의
-- [ ] 커스텀 밸리데이터 (필요 시)
-
-### 비동기 패턴
-- [ ] async/await 일관되게 사용
-- [ ] 블로킹 I/O 방지
-- [ ] 동시 작업 적절히 처리
-- [ ] 장시간 작업에 백그라운드 처리
-- [ ] 데이터베이스 연결 풀링
-
-### 인증/인가
-- [ ] 인증 구현 (OAuth2, JWT, API 키 등)
-- [ ] 보호된 엔드포인트에 인가 검사
-- [ ] 적절한 CORS 설정
-- [ ] 레이트 리미팅 고려
-
-### 에러 처리
-- [ ] 일관된 에러 응답 형식
-- [ ] 적절한 HTTP 상태 코드
-- [ ] 에러에 민감 정보 노출 없음
-- [ ] 예외 핸들러 정의
-
-### 테스팅
-- [ ] 테스트 클라이언트 설정
-- [ ] 모킹/스터빙 적절히 사용
-- [ ] 정상 경로 및 엣지 케이스 커버리지
-- [ ] 통합 테스트 포함