@kood/claude-code 0.2.4 → 0.3.0

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

@@ -1,446 +0,0 @@
-# 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

@@ -1,244 +0,0 @@
-# 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));
-}
-```