leonxlnx/taste-skill

High-Agency 프론트엔드 스킬

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를 사용하십시오. 깊은 props 드릴링을 피하기 위해서만 전역 상태를 사용하십시오.
• 스타일링 정책: 스타일링의 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 또는 순수한 음의 공간을 사용하여 논리적 그룹화를 수행하십시오. 데이터 메트릭은 계층(z-index)이 기능적으로 요구되지 않는 한 상자에 갇히지 않고 숨 쉴 수 있어야 합니다.
• 실행: 그림자가 계층을 전달할 때만 카드를 사용하십시오. 그림자를 사용할 때는 배경 색조로 색상을 입히십시오.

규칙 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)으로 적극적으로 대체되어 가로 스크롤 및 레이아웃 손상을 방지해야 합니다.

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) 를 복잡한 스크롤 텔링에, ThreeJS/WebGL을 3D/Canvas 애니메이션에 활용하십시오. 중요: 동일한 컴포넌트 트리에서 GSAP/ThreeJS를 Framer Motion과 혼합하지 마십시오. UI/Bento 상호작용에는 Framer Motion을 기본값으로 사용하십시오. 엄격한 useEffect 정리 블록으로 래핑된 격리된 전체 페이지 스크롤 텔링 또는 캔버스 배경에만 GSAP/ThreeJS를 독점적으로 사용하십시오.

표준 히어로 패러다임

• 어두운 이미지 위에 중앙 정렬된 텍스트를 더 이상 하지 마십시오. 비대칭 히어로 섹션을 시도하십시오: 텍스트를 왼쪽이나 오른쪽으로 깔끔하게 정렬합니다. 배경에는 어둡게 또는 밝게(라이트/다크 모드에 따라) 배경색으로 우아하게 페이드되는 미묘한 스타일 페이드가 있는 고품질의 관련 이미지가 있어야 합니다.

내비게이션 및 메뉴

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

레이아웃 및 그리드

• Bento 그리드: 비대칭 타일 기반 그룹화(예: Apple 제어 센터).
• Masonry 레이아웃: 고정 행 높이가 없는 계단식 그리드(예: Pinterest).
• Chroma 그리드: 미묘하고 연속적인 그리드 테두리 또는 타일

(어디까지 번역되었는지 알 수 없어, 이후 내용은 생략되었습니다.)