@kood/claude-code 0.2.0 → 0.2.1

package/templates/.claude/skills/frontend-design/references/animation-patterns.md

@@ -0,0 +1,446 @@
+# Animation Patterns 2026
+
+## 핵심 원칙
+
+| 원칙 | 설명 |
+|------|------|
+| 목적 | 모든 애니메이션에 이유가 있어야 함 |
+| 속도 | 트랜지션 300ms 이하 |
+| 성능 | transform, opacity만 애니메이트 |
+| 접근성 | prefers-reduced-motion 존중 |
+
+## CSS 애니메이션
+
+### 기본 Easing
+
+```css
+:root {
+  /* 표준 이징 */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* 빠른 시작, 부드러운 끝 */
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* 균형잡힌 */
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 스프링 효과 */
+
+  /* 기본 duration */
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-enter: 400ms;   /* 진입 애니메이션 */
+}
+```
+
+### 호버 효과
+
+```css
+/* 버튼 리프트 */
+.button {
+  transition:
+    transform var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+.button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.15);
+}
+.button:active {
+  transform: translateY(0);
+}
+
+/* 카드 틸트 */
+.card {
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+.card:hover {
+  transform: perspective(1000px) rotateX(-2deg) rotateY(2deg);
+}
+
+/* 링크 언더라인 */
+.link {
+  position: relative;
+}
+.link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: currentColor;
+  transform: scaleX(0);
+  transform-origin: right;
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+.link:hover::after {
+  transform: scaleX(1);
+  transform-origin: left;
+}
+```
+
+### 진입 애니메이션
+
+```css
+/* Fade In Up */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp var(--duration-enter) var(--ease-out) backwards;
+}
+
+/* Fade In Scale */
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Slide In */
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+```
+
+### 스태거 애니메이션
+
+```css
+/* CSS만으로 스태거 */
+.stagger > * {
+  animation: fadeInUp var(--duration-enter) var(--ease-out) backwards;
+}
+.stagger > *:nth-child(1) { animation-delay: 0ms; }
+.stagger > *:nth-child(2) { animation-delay: 50ms; }
+.stagger > *:nth-child(3) { animation-delay: 100ms; }
+.stagger > *:nth-child(4) { animation-delay: 150ms; }
+.stagger > *:nth-child(5) { animation-delay: 200ms; }
+.stagger > *:nth-child(6) { animation-delay: 250ms; }
+
+/* CSS 커스텀 프로퍼티 활용 */
+.stagger-item {
+  animation: fadeInUp var(--duration-enter) var(--ease-out) backwards;
+  animation-delay: calc(var(--index, 0) * 50ms);
+}
+```
+
+```html
+<ul class="stagger">
+  <li style="--index: 0">Item 1</li>
+  <li style="--index: 1">Item 2</li>
+  <li style="--index: 2">Item 3</li>
+</ul>
+```
+
+### 스크롤 트리거
+
+```css
+/* Intersection Observer와 함께 사용 */
+.reveal {
+  opacity: 0;
+  transform: translateY(30px);
+  transition:
+    opacity var(--duration-slow) var(--ease-out),
+    transform var(--duration-slow) var(--ease-out);
+}
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+```
+
+```js
+const observer = new IntersectionObserver(
+  (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('visible');
+      }
+    });
+  },
+  { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
+);
+
+document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
+```
+
+## 접근성
+
+### 필수: Reduced Motion
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+### 선택적 대체
+
+```css
+.animated-element {
+  transition: transform 300ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-element {
+    transition: opacity 150ms ease;  /* 움직임 대신 페이드 */
+  }
+}
+```
+
+### JS에서 확인
+
+```js
+const prefersReducedMotion = window.matchMedia(
+  '(prefers-reduced-motion: reduce)'
+).matches;
+
+if (!prefersReducedMotion) {
+  // 애니메이션 실행
+}
+```
+
+## React: Motion (Framer Motion)
+
+### 설치
+
+```bash
+npm install motion
+```
+
+### 기본 패턴
+
+```tsx
+import { motion } from 'motion/react';
+
+// 진입 애니메이션
+const FadeIn = ({ children }) => (
+  <motion.div
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+  >
+    {children}
+  </motion.div>
+);
+
+// 호버 효과
+const HoverCard = ({ children }) => (
+  <motion.div
+    whileHover={{ scale: 1.02, y: -4 }}
+    whileTap={{ scale: 0.98 }}
+    transition={{ duration: 0.15 }}
+  >
+    {children}
+  </motion.div>
+);
+```
+
+### 스태거 리스트
+
+```tsx
+import { motion, stagger, useAnimate } from 'motion/react';
+
+const StaggerList = ({ items }) => (
+  <motion.ul
+    initial="hidden"
+    animate="visible"
+    variants={{
+      visible: {
+        transition: {
+          staggerChildren: 0.05,
+        },
+      },
+    }}
+  >
+    {items.map((item) => (
+      <motion.li
+        key={item.id}
+        variants={{
+          hidden: { opacity: 0, x: -20 },
+          visible: { opacity: 1, x: 0 },
+        }}
+        transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+      >
+        {item.name}
+      </motion.li>
+    ))}
+  </motion.ul>
+);
+```
+
+### 페이지 트랜지션
+
+```tsx
+import { AnimatePresence, motion } from 'motion/react';
+
+const PageTransition = ({ children, key }) => (
+  <AnimatePresence mode="wait">
+    <motion.div
+      key={key}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -10 }}
+      transition={{ duration: 0.2 }}
+    >
+      {children}
+    </motion.div>
+  </AnimatePresence>
+);
+```
+
+### 레이아웃 애니메이션
+
+```tsx
+// 자동 레이아웃 애니메이션
+<motion.div layout>
+  {isExpanded && <p>추가 콘텐츠</p>}
+</motion.div>
+
+// 공유 레이아웃
+<motion.div layoutId="shared-element">
+  {/* 같은 layoutId를 가진 요소 간 애니메이션 */}
+</motion.div>
+```
+
+### Reduced Motion 지원
+
+```tsx
+import { useReducedMotion } from 'motion/react';
+
+const AnimatedComponent = () => {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: shouldReduceMotion ? 0 : 0.3 }}
+    >
+      Content
+    </motion.div>
+  );
+};
+```
+
+## GSAP (복잡한 애니메이션)
+
+### 설치
+
+```bash
+npm install gsap
+```
+
+### 기본 사용
+
+```js
+import gsap from 'gsap';
+
+// 단일 애니메이션
+gsap.to('.element', {
+  x: 100,
+  opacity: 1,
+  duration: 0.3,
+  ease: 'power3.out',
+});
+
+// 타임라인
+const tl = gsap.timeline();
+tl.from('.title', { y: 50, opacity: 0, duration: 0.5 })
+  .from('.subtitle', { y: 30, opacity: 0, duration: 0.4 }, '-=0.3')
+  .from('.cta', { scale: 0.9, opacity: 0, duration: 0.3 }, '-=0.2');
+```
+
+### ScrollTrigger
+
+```js
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+gsap.from('.reveal', {
+  scrollTrigger: {
+    trigger: '.reveal',
+    start: 'top 80%',
+    toggleActions: 'play none none reverse',
+  },
+  y: 50,
+  opacity: 0,
+  duration: 0.6,
+  ease: 'power3.out',
+});
+```
+
+## 금지 패턴
+
+| 패턴 | 이유 | 대안 |
+|------|------|------|
+| `transition: all` | 성능 저하, 예측 불가 | 개별 속성 명시 |
+| `width/height` 애니메이트 | 레이아웃 리플로우 | transform: scale |
+| `margin/padding` 애니메이트 | 레이아웃 리플로우 | transform: translate |
+| 1초+ 트랜지션 | 느린 UX | 300ms 이하 |
+| 무한 회전 | 주의 분산, 접근성 | 필요시만, 정지 옵션 |
+| `animation-delay` 과다 | 느린 인지 | 50-100ms 간격 |
+
+```css
+/* ❌ 금지 */
+transition: all 0.5s;
+transition: width 0.3s, height 0.3s;
+animation: spin 2s infinite linear;
+
+/* ✅ 권장 */
+transition: transform 0.2s ease-out, opacity 0.15s ease;
+```
+
+## 성능 체크리스트
+
+| 항목 | 확인 |
+|------|------|
+| transform/opacity만 애니메이트 | [ ] |
+| will-change 적절히 사용 | [ ] |
+| 레이아웃 속성 애니메이트 안함 | [ ] |
+| 60fps 유지 (DevTools 확인) | [ ] |
+| 모바일에서 테스트 | [ ] |
+| prefers-reduced-motion 처리 | [ ] |
+
+### will-change 사용
+
+```css
+/* 애니메이션 시작 직전에만 */
+.card {
+  will-change: auto;
+}
+.card:hover {
+  will-change: transform;
+}
+
+/* 또는 JS로 관리 */
+element.addEventListener('mouseenter', () => {
+  element.style.willChange = 'transform';
+});
+element.addEventListener('animationend', () => {
+  element.style.willChange = 'auto';
+});
+```

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

@@ -0,0 +1,244 @@
+# Colors 2026 Guide
+
+## OKLCH 컬러 시스템
+
+2026년 표준. 인간 지각에 맞춰 설계된 컬러 모델.
+
+### 구조
+
+```
+oklch(L% C H)
+L = Lightness (0-100%)
+C = Chroma (0-0.4, 채도)
+H = Hue (0-360, 색상)
+```
+
+### 장점
+
+| 기존 방식 | OKLCH |
+|-----------|-------|
+| 밝기 변경 시 채도 왜곡 | 일관된 밝기 조절 |
+| 다크모드 팔레트 별도 제작 | L값만 변경 |
+| 접근성 대비 계산 복잡 | L값으로 직관적 대비 |
+
+## 팔레트 구성
+
+### 기본 구조
+
+```css
+:root {
+  /* === Base === */
+  --bg-primary: oklch(98% 0.005 90);    /* 웜 오프화이트 */
+  --bg-secondary: oklch(95% 0.01 90);   /* 린넨 */
+  --bg-tertiary: oklch(92% 0.015 90);   /* 샌드 */
+  --bg-elevated: oklch(100% 0 0);       /* 카드, 모달 */
+
+  /* === Text === */
+  --text-primary: oklch(20% 0.01 90);   /* 헤드라인 */
+  --text-secondary: oklch(40% 0.02 90); /* 본문 */
+  --text-tertiary: oklch(55% 0.02 90);  /* 보조 텍스트 */
+  --text-muted: oklch(65% 0.01 90);     /* 플레이스홀더 */
+
+  /* === Accent === */
+  --accent: oklch(65% 0.2 180);         /* 프라이머리 */
+  --accent-hover: oklch(60% 0.22 180);
+  --accent-active: oklch(55% 0.24 180);
+  --accent-subtle: oklch(95% 0.05 180); /* 배경용 */
+
+  /* === Semantic === */
+  --success: oklch(70% 0.18 145);
+  --success-bg: oklch(95% 0.05 145);
+  --warning: oklch(75% 0.15 85);
+  --warning-bg: oklch(95% 0.05 85);
+  --error: oklch(60% 0.22 25);
+  --error-bg: oklch(95% 0.05 25);
+  --info: oklch(65% 0.15 240);
+  --info-bg: oklch(95% 0.04 240);
+
+  /* === Border === */
+  --border-default: oklch(88% 0.01 90);
+  --border-subtle: oklch(92% 0.005 90);
+  --border-strong: oklch(75% 0.02 90);
+}
+```
+
+### 다크 모드
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* L값 반전 패턴 */
+    --bg-primary: oklch(12% 0.01 90);
+    --bg-secondary: oklch(16% 0.015 90);
+    --bg-tertiary: oklch(20% 0.02 90);
+    --bg-elevated: oklch(18% 0.015 90);
+
+    --text-primary: oklch(92% 0.01 90);
+    --text-secondary: oklch(75% 0.02 90);
+    --text-tertiary: oklch(60% 0.02 90);
+    --text-muted: oklch(50% 0.01 90);
+
+    /* 액센트는 밝기만 조절 */
+    --accent: oklch(70% 0.18 180);
+    --accent-hover: oklch(75% 0.16 180);
+    --accent-subtle: oklch(25% 0.08 180);
+
+    --border-default: oklch(25% 0.02 90);
+    --border-subtle: oklch(20% 0.01 90);
+    --border-strong: oklch(35% 0.02 90);
+  }
+}
+```
+
+## 2026 트렌드 컬러
+
+### Pantone 2026
+
+| 이름 | OKLCH | HEX | 용도 |
+|------|-------|-----|------|
+| Cloud Dancer | oklch(97% 0.005 90) | #F5F5F5 | 배경 베이스 |
+| Mocha Mousse | oklch(55% 0.08 55) | #A47764 | 어시 액센트 |
+
+### 주요 액센트
+
+| 이름 | OKLCH | HEX | 무드 |
+|------|-------|-----|------|
+| Transformative Teal | oklch(65% 0.15 180) | #2D9CCA | 신뢰, 성장 |
+| Neo Mint | oklch(85% 0.1 160) | #AAF0D1 | 프레시, 테크 |
+| Soft Coral | oklch(75% 0.12 30) | #FFB5A7 | 따뜻함 |
+| Electric Blue | oklch(60% 0.2 250) | #3366FF | 에너지 |
+| Muted Purple | oklch(55% 0.12 300) | #8B7BA5 | 크리에이티브 |
+| Pastel Orange | oklch(80% 0.1 60) | #FFD4A3 | 친근함 |
+
+## 테마별 팔레트
+
+### Calm Minimal
+
+```css
+:root {
+  --bg-primary: oklch(98% 0.003 60);    /* 아이보리 */
+  --text-primary: oklch(25% 0.01 60);
+  --accent: oklch(45% 0.08 180);        /* 딥 틸 */
+}
+```
+
+### Bold Maximalist
+
+```css
+:root {
+  --bg-primary: oklch(15% 0.02 280);    /* 딥 네이비 */
+  --text-primary: oklch(95% 0.01 60);
+  --accent: oklch(70% 0.25 30);         /* 비비드 오렌지 */
+  --accent-secondary: oklch(75% 0.2 320); /* 핑크 */
+}
+```
+
+### Organic Natural
+
+```css
+:root {
+  --bg-primary: oklch(95% 0.02 80);     /* 크림 */
+  --text-primary: oklch(30% 0.04 80);   /* 브라운 */
+  --accent: oklch(50% 0.12 140);        /* 포레스트 */
+}
+```
+
+### Liquid Glass
+
+```css
+:root {
+  --bg-primary: oklch(98% 0.01 240 / 0.9);  /* 반투명 */
+  --glass: oklch(100% 0 0 / 0.6);
+  --glass-border: oklch(100% 0 0 / 0.2);
+  --accent: oklch(65% 0.18 200);
+}
+
+.glass-card {
+  background: var(--glass);
+  backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid var(--glass-border);
+}
+```
+
+## 접근성
+
+### 대비 계산
+
+```
+WCAG AA 기준:
+- 일반 텍스트: 4.5:1
+- 큰 텍스트 (18px+): 3:1
+- UI 컴포넌트: 3:1
+
+OKLCH에서 대비 확보:
+- L값 차이 최소 50% 권장 (텍스트 vs 배경)
+```
+
+### 안전한 조합
+
+| 배경 L값 | 텍스트 L값 | 대비 |
+|----------|-----------|------|
+| 95%+ | 30% 이하 | AA 충족 |
+| 15% 이하 | 85%+ | AA 충족 |
+
+## 금지 패턴
+
+```css
+/* ❌ 순백색 배경 */
+background: #ffffff;
+background: oklch(100% 0 0);
+
+/* ❌ AI 슬롭 퍼플 그라디언트 */
+background: linear-gradient(135deg, #667eea, #764ba2);
+
+/* ❌ 너무 채도 높은 배경 */
+background: oklch(50% 0.3 180);  /* C값 0.2 이하 권장 */
+
+/* ❌ 대비 부족 */
+color: oklch(60% 0.1 90);       /* on 80% 배경 = 실패 */
+```
+
+## 실용 팁
+
+### 그라디언트
+
+```css
+/* OKLCH 그라디언트 (더 자연스러운 중간색) */
+background: linear-gradient(
+  135deg,
+  oklch(65% 0.15 180),
+  oklch(55% 0.18 220)
+);
+
+/* 색상 공간 명시 */
+background: linear-gradient(
+  in oklch,
+  oklch(70% 0.2 30),
+  oklch(65% 0.18 60)
+);
+```
+
+### 투명도
+
+```css
+/* 알파 채널 */
+background: oklch(65% 0.15 180 / 0.8);
+border: 1px solid oklch(65% 0.15 180 / 0.3);
+```
+
+### 동적 밝기
+
+```css
+/* CSS 변수로 밝기 조절 */
+:root {
+  --accent-h: 180;
+  --accent-c: 0.15;
+}
+
+.accent {
+  background: oklch(65% var(--accent-c) var(--accent-h));
+}
+.accent:hover {
+  background: oklch(60% var(--accent-c) var(--accent-h));
+}
+```