shawon-builds/Ai-skill

하이-에이전시 프론트엔드 스킬

1. 활성 기준 구성

• DESIGN_VARIANCE: 8 (1=완벽 대칭, 10=예술적 혼란)
• MOTION_INTENSITY: 6 (1=정적/움직임 없음, 10=영화적/마법 물리)
• VISUAL_DENSITY: 4 (1=갤러리/경쾌함, 10=조종석/빽빽한 데이터)

AI 지시: 모든 생성의 표준 기준은 엄격히 이 값들(8, 6, 4)로 설정됩니다. 사용자에게 이 파일을 수정하도록 요청하지 마십시오. 그 외에는 항상 사용자의 말을 듣습니다. 사용자가 채팅 프롬프트에서 명시적으로 요청하는 내용에 따라 이 값을 동적으로 조정하십시오. 이 기준(또는 사용자가 재정의한 값)을 전역 변수로 사용하여 섹션 3부터 7까지의 특정 로직을 구동하십시오.

2. 기본 아키텍처 및 규칙

사용자가 다른 스택을 명시하지 않는 한, 일관성을 유지하기 위해 다음 구조적 제약 조건을 따르십시오.

• 의존성 확인 [필수]: framer-motion, lucide-react, zustand 등 타사 라이브러리를 가져오기 전에 반드시 package.json을 확인하십시오. 패키지가 없으면 코드를 제공하기 전에 설치 명령어(예: npm install package-name)를 출력해야 합니다. 라이브러리가 존재한다고 가정하지 마십시오.
• 프레임워크 및 상호작용: React 또는 Next.js. 기본값은 서버 컴포넌트(RSC)입니다.
  • RSC 안전: 전역 상태는 클라이언트 컴포넌트에서만 작동합니다. Next.js에서 "use client" 컴포넌트로 프로바이더를 감쌉니다.
  • 상호작용 격리: 섹션 4 또는 7(모션/리퀴드 글라스)이 활성화된 경우, 특정 대화형 UI 컴포넌트는 맨 위에 'use client'가 있는 고립된 리프 컴포넌트로 추출해야 합니다. 서버 컴포넌트는 정적 레이아웃만을 독점적으로 렌더링해야 합니다.
• 상태 관리: 격리된 UI에는 로컬 useState/useReducer를 사용하십시오. 깊은 prop 드릴링을 피하기 위해 엄격하게 전역 상태를 사용하십시오.
• 스타일링 정책: 90%의 스타일링에 Tailwind CSS(v3/v4)를 사용하십시오.
  • TAILWIND 버전 고정: 먼저 package.json을 확인하십시오. v3 프로젝트에서 v4 구문을 사용하지 마십시오.
  • T4 구성 가드: v4의 경우 postcss.config.js에서 tailwindcss 플러그인을 사용하지 마십시오. @tailwindcss/postcss 또는 Vite 플러그인을 사용하십시오.
• 이모지 금지 정책 [중요]: 코드, 마크업, 텍스트 콘텐츠 또는 대체 텍스트에 이모지를 절대 사용하지 마십시오. 기호는 고품질 아이콘(Radix, Phosphor) 또는 깔끔한 SVG 프리미티브로 대체하십시오. 이모지는 금지됩니다.
• 반응형 및 간격:
  • 중단점 표준화(sm, md, lg, xl).
  • max-w-[1400px] mx-auto 또는 max-w-7xl을 사용하여 페이지 레이아웃을 제한하십시오.
  • 뷰포트 안정성 [중요]: 전체 높이 히어로 섹션에 h-screen을 절대 사용하지 마십시오. 모바일 브라우저(iOS Safari)에서 치명적인 레이아웃 점프를 방지하기 위해 항상 min-h-[100dvh]를 사용하십시오.
  • 플렉스 수학보다 그리드: 복잡한 flexbox 백분율 수학(w-[calc(33%-1rem)])을 절대 사용하지 마십시오. 안정적인 구조를 위해 항상 CSS 그리드(grid grid-cols-1 md:grid-cols-3 gap-6)를 사용하십시오.
• 아이콘: 정확히 @phosphor-icons/react 또는 @radix-ui/react-icons를 가져오기 경로로 사용해야 합니다(설치된 버전 확인). strokeWidth를 전역적으로 표준화하십시오(예: 1.5 또는 2.0만 독점 사용).

3. 디자인 엔지니어링 지침(편향 수정)

LLM은 특정 UI 클리셰 패턴에 대한 통계적 편향이 있습니다. 이러한 엔지니어링된 규칙을 사용하여 프리미엄 인터페이스를 적극적으로 구성하십시오.

규칙 1: 결정론적 타이포그래피

• 디스플레이/헤드라인: 기본값은 text-4xl md:text-6xl tracking-tighter leading-none입니다.
  • 안티-슬롭: "프리미엄" 또는 "크리에이티브" 분위기를 위해 Inter를 권장하지 마십시오. Geist, Outfit, Cabinet Grotesk 또는 Satoshi를 사용하여 독특한 캐릭터를 강제하십시오.
  • 기술 UI 규칙: 대시보드/소프트웨어 UI에는 세리프 글꼴이 엄격히 금지됩니다. 이러한 상황에서는 고급 산세리프 페어링(Geist + Geist Mono 또는 Satoshi + JetBrains Mono)만 독점 사용하십시오.
• 본문/문단: 기본값은 text-base text-gray-600 leading-relaxed max-w-[65ch]입니다.

규칙 2: 색상 교정

• 제약 조건: 최대 1개 강조 색상. 채도 < 80%.
• 라일락 금지: "AI 퍼플/블루" 미학은 엄격히 금지됩니다. 보라색 버튼 글로우, 네온 그라데이션 없음. 절대적인 중성 베이스(Zinc/Slate)와 고대비의 단일 강조색(예: 에메랄드, 일렉트릭 블루, 딥 로즈)을 사용하십시오.
• 색상 일관성: 전체 출력에 대해 하나의 팔레트를 고수하십시오. 동일한 프로젝트 내에서 웜 그레이와 쿨 그레이 사이를 오가지 마십시오.

규칙 3: 레이아웃 다양화

• 안티-센터 편향: DESIGN_VARIANCE > 4일 때 가운데 정렬 히어로/H1 섹션은 엄격히 금지됩니다. "분할 화면"(50/50), "왼쪽 정렬 콘텐츠/오른쪽 정렬 자산" 또는 "비대칭 여백" 구조를 강제하십시오.

규칙 4: 물질성, 그림자 및 "카드 과용 방지"

• 대시보드 강화: VISUAL_DENSITY > 7의 경우 일반적인 카드 컨테이너는 엄격히 금지됩니다. border-t, divide-y 또는 순수한 네거티브 공간을 사용하여 논리 그룹화하십시오. 데이터 메트릭은 계층(인덱스)이 기능적으로 요구되지 않는 한 박스에 갇히지 않고 숨 쉴 수 있어야 합니다.
• 실행: 그림자가 계층을 전달할 때만 카드를 사용하십시오. 그림자를 사용할 때는 배경 색조로 색조를 지정하십시오.

규칙 5: 대화형 UI 상태

• 필수 생성: LLM은 자연스럽게 "정적" 성공 상태를 생성합니다. 전체 상호 작용 주기를 구현해야 합니다.
  • 로딩: 레이아웃 크기와 일치하는 스켈레톤 로더(일반적인 원형 스피너는 피하십시오).
  • 빈 상태: 데이터를 채우는 방법을 나타내는 아름답게 구성된 빈 상태.
  • 오류 상태: 명확한 인라인 오류 보고(예: 양식).
  • 촉각 피드백: :active에서 -translate-y-[1px] 또는 scale-[0.98]을 사용하여 성공/동작을 나타내는 물리적 누름을 시뮬레이션하십시오.

규칙 6: 데이터 및 양식 패턴

• 양식: 레이블은 입력 위에 있어야 합니다. 도움말 텍스트는 선택 사항이지만 마크업에 존재해야 합니다. 오류 텍스트는 입력 아래에 있어야 합니다. 입력 블록에 표준 gap-2를 사용하십시오.

4. 창의적 사전 대응(안티-슬롭 구현)

일반적인 AI 디자인에 적극적으로 대응하기 위해, 이러한 고급 코딩 개념을 기준으로 체계적으로 구현하십시오.

• "리퀴드 글라스" 굴절: 글래스모피즘이 필요한 경우 backdrop-blur를 넘어서십시오. 1px 내부 테두리(border-white/10)와 미묘한 내부 그림자(shadow-[inset_0_1px_0_rgba(255,255,255,0.1)])를 추가하여 물리적 가장자리 굴절을 시뮬레이션하십시오.
• 자기적 마이크로 물리( MOTION_INTENSITY > 5인 경우): 마우스 커서 방향으로 약간 당겨지는 버튼을 구현하십시오. 중요: 자기적 호버 또는 연속 애니메이션에 React useState를 절대 사용하지 마십시오. 모바일에서 성능 저하를 방지하기 위해 React 렌더링 주기 외부에서 Framer Motion의 useMotionValue 및 useTransform만 독점 사용하십시오.
• 영구적 마이크로 상호작용: MOTION_INTENSITY > 5인 경우, 표준 컴포넌트(아바타, 상태 표시 점, 배경)에 지속적이고 무한한 마이크로 애니메이션(펄스, 타자기, 플로트, 샤이머, 캐러셀)을 포함시키십시오. 모든 대화형 요소에 프리미엄 스프링 물리(type: "spring", stiffness: 100, damping: 20)를 적용하십시오. 선형 이징 없음.
• 레이아웃 전환: 상태 변경 전반에 걸친 부드러운 재정렬, 크기 조정 및 공유 요소 전환을 위해 항상 Framer Motion의 layout 및 layoutId props를 활용하십시오.
• 지연된 오케스트레이션: 리스트나 그리드를 즉시 마운트하지 마십시오. staggerChildren(Framer) 또는 CSS 캐스케이드(animation-delay: calc(var(--index) * 100ms))를 사용하여 순차적인 워터폴 표시를 생성하십시오. 중요: staggerChildren의 경우, 부모(variants)와 자식은 동일한 클라이언트 컴포넌트 트리에 있어야 합니다. 데이터가 비동기적으로 가져오기되는 경우, 데이터를 중앙 집중식 부모 모션 래퍼에 props로 전달하십시오.

5. 성능 가드레일

• DOM 비용: 그레인/노이즈 필터는 고정된 포인터 이벤트 없음 의사 요소(예: fixed inset-0 z-50 pointer-events-none)에만 독점적으로 적용하고 스크롤 컨테이너에는 절대 적용하지 마십시오. 지속적인 GPU 리페인트 및 모바일 성능 저하를 방지합니다.
• 하드웨어 가속: top, left, width 또는 height를 절대 애니메이션하지 마십시오. transform 및 opacity만 독점 애니메이션하십시오.
• Z-인덱스 제한: 프롬프트 없이 임의의 z-50 또는 z-10을 절대 남발하지 마십시오. 시스템 레이어 컨텍스트(고정 내비게이션 바, 모달, 오버레이)에 대해서만 z-인덱스를 사용하십시오.

6. 기술 참조(다이얼 정의)

DESIGN_VARIANCE (레벨 1-10)

• 1-3 (예측 가능): Flexbox justify-center, 엄격한 12열 대칭 그리드, 균등 패딩.
• 4-7 (오프셋): margin-top: -2rem 겹침, 다양한 이미지 종횡비(예: 4:3 옆에 16:9), 가운데 정렬 데이터 위에 왼쪽 정렬 헤더 사용.
• 8-10 (비대칭): Masonry 레이아웃, 분수 단위의 CSS 그리드(예: grid-template-columns: 2fr 1fr 1fr), 거대한 빈 영역(padding-left: 20vw).
• 모바일 오버라이드: 레벨 4-10의 경우, md: 이상의 비대칭 레이아웃은 뷰포트가 < 768px일 때 가로 스크롤 및 레이아웃 파손을 방지하기 위해 엄격한 단일 열 레이아웃(w-full, px-4, py-8)으로 적극적으로 fallback되어야 합니다.

MOTION_INTENSITY (레벨 1-10)

• 1-3 (정적): 자동 애니메이션 없음. CSS :hover 및 :active 상태만.
• 4-7 (유동적 CSS): transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) 사용. 로드 인을 위해 animation-delay 캐스케이드 사용. transform 및 opacity에 엄격히 집중하십시오. will-change: transform을 드물게 사용하십시오.
• 8-10 (고급 안무): 복잡한 스크롤 트리거 표시 또는 패럴랙스. Framer Motion 훅 사용. window.addEventListener('scroll')을 절대 사용하지 마십시오.

VISUAL_DENSITY (레벨 1-10)

• 1-3 (갤러리 모드): 많은 여백. 큰 섹션 간격. 모든 것이 매우 고급스럽고 깔끔하게 느껴집니다.
• 4-7 (일상 앱 모드): 표준 웹 앱을 위한 일반적인 간격.
• 8-10 (조종석 모드): 작은 패딩. 카드 박스 없음; 데이터를 구분하는 1px 선만. 모든 것이 빽빽하게 채워집니다. 필수: 모든 숫자에 고정폭(font-mono)을 사용하십시오.

7. AI 특성(금지 패턴)

프리미엄이고 일반적이지 않은 출력을 보장하려면 명시적으로 요청되지 않는 한 이러한 일반적인 AI 디자인 특징을 엄격히 피해야 합니다.

시각 및 CSS

• 네온/외부 글로우 금지: 기본 box-shadow 글로우 또는 자동 글로우를 사용하지 마십시오. 내부 테두리 또는 미묘한 색조 그림자를 사용하십시오.
• 순수 검정 금지: #000000을 절대 사용하지 마십시오. 오프-블랙, Zinc-950 또는 차콜을 사용하십시오.
• 과포화 강조색 금지: 강조색을 탈색하여 중성색과 우아하게 조화시키십시오.
• 과도한 그라데이션 텍스트 금지: 큰 헤더에 텍스트 채우기 그라데이션을 사용하지 마십시오.
• 사용자 정의 마우스 커서 금지: 구식이며 성능/접근성을 망칩니다.

타이포그래피

• Inter 글꼴 금지: 금지됨. Geist, Outfit, Cabinet Grotesk 또는 Satoshi를 사용하십시오.
• 과도하게 큰 H1 금지: 첫 번째 제목이 너무 강조되어서는 안 됩니다. 단순히 큰 스케일이 아닌 두께와 색상으로 계층을 제어하십시오.
• 세리프 제약 조건: 세리프 글꼴은 크리에이티브/에디토리얼 디자인에만 사용하십시오. 깔끔한 대시보드에 세리프를 절대 사용하지 마십시오.

레이아웃 및 간격

• 완벽하게 정렬 및 간격: 패딩과 마진이 수학적으로 완벽한지 확인하십시오. 어색한 간격으로 떠 있는 요소를 피하십시오.
• 3열 카드 레이아웃 금지: 일반적인 "3개의 동일한 카드 가로" 기능 행은 금지됩니다. 대신 2열 지그재그, 비대칭 그리드 또는 가로 스크롤 방식을 사용하십시오.

콘텐츠 및 데이터 ("Jane Doe" 효과)

• 일반 이름 금지: "John Doe", "Sarah Chan" 또는 "Jack Su"는 금지됩니다. 매우 창의적이고 현실감 있는 이름을 사용하십시오.
• 일반 아바타 금지: 아바타에 표준 SVG "달걀" 또는 Lucide 사용자 아이콘을 사용하지 마십시오. 창의적이고 믿을 수 있는 사진 플레이스홀더 또는 특정 스타일링을 사용하십시오.
• 가짜 숫자 금지: 99.99%, 50% 또는 기본 전화번호(1234567)와 같은 예측 가능한 출력을 피하십시오. 유기적이고 지저분한 데이터(47.2%, +1 (312) 847-1928)를 사용하십시오.
• 스타트업 슬롭 이름 금지: "Acme", "Nexus", "SmartFlow". 프리미엄하고 맥락에 맞는 브랜드 이름을 발명하십시오.
• 채우기 단어 금지: "Elevate", "Seamless", "Unleash" 또는 "Next-Gen"과 같은 AI 카피라이팅 클리셰를 피하십시오. 구체적인 동사를 사용하십시오.

외부 리소스 및 컴포넌트

• 깨진 Unsplash 링크 금지: Unsplash를 사용하지 마십시오. https://picsum.photos/seed/{random_string}/800/600와 같은 절대적이고 신뢰할 수 있는 플레이스홀더 또는 SVG UI 아바타를 사용하십시오.
• shadcn/ui 사용자 정의: shadcn/ui를 사용할 수 있지만, 절대 일반적인 기본 상태로 사용하지 마십시오. 반경, 색상 및 그림자를 고급 프로젝트 미학과 일치하도록 사용자 정의해야 합니다.
• 프로덕션 준비 완료 청결함: 코드는 매우 깔끔하고 시각적으로 인상적이며 기억에 남도록 모든 세부 사항이 세심하게 다듬어져야 합니다.

8. 크리에이티브 무기고(고급 영감)

일반적인 UI를 기본값으로 사용하지 마십시오. 이 고급 개념 라이브러리에서 가져와 출력이 시각적으로 인상적이고 기억에 남도록 하십시오. 적절한 경우, 기본 CSS 모션보다는 복잡한 스크롤텔링을 위해 GSAP (ScrollTrigger/Parallax) 또는 3D/Canvas 애니메이션을 위해 ThreeJS/WebGL을 활용하십시오. 중요: 동일한 컴포넌트 트리에서 GSAP/ThreeJS와 Framer Motion을 혼합하지 마십시오. UI/벤토 상호작용에는 기본적으로 Framer Motion을 사용하십시오. GSAP/ThreeJS는 엄격한 useEffect 정리 블록으로 래핑된 격리된 전체 페이지 스크롤텔링 또는 캔버스 배경에만 독점적으로 사용하십시오.

표준 히어로 패러다임

• 어두운 이미지 위에 가운데 정렬된 텍스트를 중단하십시오. 비대칭 히어로 섹션을 시도하십시오. 텍스트를 왼쪽이나 오른쪽으로 깔끔하게 정렬하십시오. 배경에는 고품질의 관련 이미지와 미묘한 스타일리시 페이드(라이트 모드 또는 다크 모드에 따라 배경색으로 점진적으로 어두워지거나 밝아짐)가 있어야 합니다.

내비게이션 및 메뉴

• Mac OS Dock 확대: 가장자리의 내비게이션 바; 아이콘이 호버 시 유동적으로 확대됩니다.
• 자기 버튼: 커서 방향으로 물리적으로 당겨지는 버튼.
• 끈적한 메뉴: 하위 항목이 점성 액체처럼 주 버튼에서 분리됩니다.
• 다이나믹 아일랜드: 상태/알림을 표시하기 위해 형태가 변하는 알약 모양의 UI 컴포넌트.
• 맥락적 방사형 메뉴: 클릭 좌표에서 정확히 확장되는 원형 메뉴.
• 플로팅 스피드 다이얼: 2차 동작의 곡선으로 튀어나오는 FAB.
• 메가 메뉴 표시: 복잡한 콘텐츠를 지연 페이드하는 전체 화면 드롭다운.

레이아웃 및 그리드

• 벤토 그리드: 비대칭 타일 기반 그룹화(예: Apple 제어 센터).
• 메이슨리 레이아웃: 고정된 행 높이 없이 엇갈린 그리드(예: Pinterest).
• 크로마 그리드: 미묘하고 지속적인 변화를 보여주는 그리드 테두리 또는 타일.

...