전자상거래 프론트엔드 엔진 (Auto E-Commerce Frontend Engine)

핵심 철학: 극한의 시각적 미학, 하드코어 엔지니어링 아키텍처, 100% 프론트엔드 폐쇄 루프 경험, 제로 외부 의존성.

이 스킬은 성숙된 DTC 전자상거래 모델과 현대적인 프론트엔드 엔지니어링 실무를 통합하여 상용 수준, 제로 플레이스홀더(Zero Placeholders), 실제 장바구니 및 결제 상태 머신을 갖춘 최신 프론트엔드 전자상거래 경험을 제공하는 데 중점을 둡니다.

언어 규칙:

브랜드명, 제품 제목, 사양 매개변수, UI 카피 → 영어 (English Only), 국제 브랜드 품질을 나타냅니다.
개발 로그, 진행 보고서, 기술 설명 및 사용자 상호 작용 → 한국어 (Korean).
코드 내 변수, 함수, 인터페이스 정의 → 카멜케이스 (camelCase / PascalCase), 로마자 표기명은 절대 금지됩니다.

🤖 5가지 가상 역할 및 스킬 매트릭스 (Agent Team Architecture)

사이트 구축 프로세스를 실행할 때 AI 에이전트는 5개의 전문 역할로 전환되어 단계별로 추진하고 서로 검증합니다.

역할 (Role)	핵심 책임	핵심 스킬 태그 (Skills)
1. Project Orchestrator	브랜드 포지셔닝, 카테고리 선택, 실행 계획 일정 및 단계 간 조정	`prd`, `brainstorming`, `executing-plans`, `writing-plans`
2. Chief Creative Director	브랜드 무드(Vibe) 정의, 색상 대비, 서체 시스템 및 고품질 레이아웃	`ui-ux-pro-max`, `brand-guidelines`, `canvas-design`, `frontend-design`
3. Lead Full-Stack Architect	TypeScript 엄격 인터페이스, Zustand 상태 머신, RWD 컴포넌트 및 라우팅 구현	`web-artifacts-builder`, `frontend-design`, `react-best-practices`, `tailwindcss`
4. Content Strategist	전문 제품 설명, 스토리 카피, SEO 키워드 및 고객 리뷰 디자인	`content-research-writer`, `internal-comms`, `brand-guidelines`, `doc-coauthoring`
5. QA & Compliance	제로 플레이스홀더 감사, Console 오류 디버깅, 빌드 검증 및 7계층 게이트 검사	`verification-before-completion`, `webapp-testing`, `systematic-debugging`, `audit`

🚀 전체 수명 주기 실행 흐름 (Lifecycle Phases)

사용자 요청: "[카테고리/스타일] 의 전자상거래 사이트를 생성해줘"

┌─ Phase 0: 무관용 규칙 및 심리학 규칙 로드 (P0)
│  ├─ 📖 references/anti-patterns.md 읽기 (18개 무관용 규칙)
│  └─ 📖 references/ux-psychology-ecommerce.md 읽기 (CRO 심리학 원칙)
│
├─ Phase 1: 창의적 시드 및 디자인 시스템 생성 (Creative & System Generation)
│  ├─ 🎲 브랜드 테마 결정 (예: 미니멀 데스크 미학, 럭스 아로마테라피, 테크 기어)
│  ├─ 🎨 Creative Director 실행: 색상 팔레트 (60-30-10 규칙) 및 서체 (디스플레이/본문) 결정
│  ├─ ✍️ Content Strategist 실행: 브랜드 핵심 슬로건 및 8~12개 고품질 제품 사양 데이터 생성
│  └─ 📝 프로젝트 PRD 요약 및 디자인 결정 사항을 docs/DESIGN_DECISIONS.md 에 출력
│
├─ Phase 2: 프론트엔드 엔지니어링 구축 (Vite + React + TS + Tailwind)
│  ├─ 🏗️ 프로젝트 스켈레톤 초기화 (Vite React-TS)
│  ├─ 📦 핵심 종속성 설치: zustand, react-router-dom, lucide-react, clsx, tailwind-merge, framer-motion, canvas-confetti
│  ├─ 📐 templates/ecommerce-types.ts 임포트하여 강력한 타입 제약 보장
│  └─ 🛒 상태 레이어 구현 (src/store/useCartStore.ts) LocalStorage 지속성 포함
│
├─ Phase 3: 11페이지 전체 전자상거래 라우팅 구현 (100% Complete Routes)
│  ├─ 🏠 Layer A (핵심 쇼핑 루프): 홈, 쇼핑몰, 제품 상세, 장바구니 드로어, 결제, 주문 성공
│  ├─ 👤 Layer B (사용자 신뢰 센터): 프로필, 주문 내역
│  └─ 📜 Layer C (규정 준수 및 신뢰 페이지): FAQ, 배송 정책, 반품 환불, 소개
│
├─ Phase 4: CRO 심리학 강화 및 시각적 향상
│  ├─ ⏳ 희소성 레이블 주입 (Scarcity: "재고 3개 남음!")
│  ├─ 🚚 무료 배송 임박 진행률 표시줄 구현 ("장바구니에 $X 추가 시 무료 배송")
│  ├─ ⭐ 실제 고객 별점 리뷰 및 구매 동향 포함 (Social Proof)
│  ├─ 🏷️ Schema.org (Product, Offer) JSON-LD 구조화된 데이터 주입
│  └─ 🖼️ 고해상도 Unsplash 상업용 사진 구성 (흐릿한 플레이스홀더 금지)
│
└─ Phase 5: 품질 검수 및 원클릭 전달 (Quality & Delivery Gate)
   ├─ 🔨 npm run build 실행 (TypeScript 오류 0개, 빌드 경고 0개 보장)
   ├─ 🔍 7계층 품질 게이트 검사 실행 (제로 모의 데이터, 제로 끊긴 링크)
   └─ 🚀 프론트엔드 프리뷰 및 Vercel 원클릭 배포 가이드 전달

📋 11페이지 전체 기능 라우팅 규칙 (Page Requirements)

생성된 모든 사이트는 다음 11페이지 전체 라우팅을 반드시 포함해야 하며, 빈 페이지나 404는 절대 허용되지 않습니다:

홈페이지 (/) :
- 히어로 비주얼 배너 (높은 임팩트의 큰 이미지, 강력한 CTA "컬렉션 쇼핑하기").
- 권위 신뢰 배지 (무료 배송, 30일 보장, 256비트 SSL, 윤리적 공예).
- 추천 상품 워터폴 그리드.
- 카테고리별 빠른 진입.
- 브랜드 스토리 섹션.
- 고객 실제 사용 후기.
- 뉴스레터 구독 섹션 (할인 인센티브 제공).
상품 목록 (/shop) :
- 다차원 필터: 카테고리 필터, 가격 범위 슬라이더, 태그 필터.
- 실시간 정렬 기능: 인기순, 낮은 가격순, 높은 가격순, 최신 등록순.
- 실시간 키워드 검색창 (인스턴트 클라이언트 검색).
- 빈 검색 방어 상태 (필터 재설정 버튼이 포함된 빈 상태).
상품 상세 페이지 (/product/:id) :
- 다중 각도 썸네일 미리보기 전환 (이미지 갤러리).
- 사양 선택기: 사이즈, 색상, 변형.
- 재고 긴급성 알림 (예: 재고 < 5개일 때 호박색 경고 표시).
- 수량 증감 조절기.
- "장바구니에 담기" (장바구니 드로어 슬라이드) 와 "바로 구매" (결제로 직행) 이중 버튼.
- 탭: 상세 사양, 배송 및 반품 설명, 고객 실제 리뷰.
- 관련 상품 추천.
- Schema.org JSON-LD 주입.
사이드 장바구니 드로어 (CartDrawer) :
- 전체 사이트 헤더의 장바구니 아이콘 또는 장바구니에 담기 버튼 클릭 시 부드럽게 슬라이드 인 (Framer Motion / Transition).
- 무료 배송 금액 임계값 차액 실시간 계산 진행률 표시줄 (예: $100 이상 주문 시 무료 배송).
- 상품 목록: 썸네일, 상품명, 선택 사양, 수량 증감, 실시간 삭제.
- 프로모션 코드 입력란 (예: WELCOME10 즉시 10% 할인).
- 가격 요약: 소계, 할인, 예상 배송비, 총 금액.
- 결제 진행 버튼.
결제 센터 (/checkout) :
- 3단계 결제 UI:
  1. 연락처 및 배송 정보: 이름, 이메일, 배송 주소, 전화번호.
  2. 배송 방법 선택: 표준 ($0 ~ $5), 익스프레스 ($15).
  3. 결제 방법 시뮬레이션: 신용카드 시뮬레이션 입력 (자동 서식, 보안 아이콘 포함), Apple Pay / PayPal 빠른 결제 옵션.
- 오른쪽/아래 실시간 주문 요약 카드.
- 중복 클릭 방지, 양식 필드 실시간 유효성 검사.
주문 완료 페이지 (/order-success) :
- 녹색 성공 체크 애니메이션 및 축하 컨페티 효과 (canvas-confetti).
- 무작위 생성된 고유 주문 번호 (예: #ORD-2026-89412).
- 전체 주문 요약 목록, 수취인 정보, 예상 배송일.
- "쇼핑 계속하기" 버튼.
주문 추적 및 내역 (/orders) :
- 주문 번호 또는 이메일 입력 시 시뮬레이션된 주문 진행률 표시줄 (확인됨 → 처리 중 → 배송 중 → 배송 완료).
회원 정보 및 위시리스트 (/profile) :
- 시뮬레이션된 사용자 기본 프로필, 위시리스트 빠른 보기.
자주 묻는 질문 (/faq) :
- 아코디언 컴포넌트로 구성된 주문, 배송, 반품, 소재 관리 등 인기 질문.
배송 정책 (/shipping) :
- 국내외 배송비 요금표, 각국 배송 소요 영업일, 관세 설명.
반품 정책 및 브랜드 스토리 (/returns 및 /about) :
- 30일 반품 보장 조건, 반품 3단계 절차, 브랜드 창립 스토리를 명확히 설명.

🧠 전자상거래 심리학 및 전환율 (CRO) 필수 구현 가이드

생성된 모든 사이트는 다음 심리학 메커니즘을 반드시 통합해야 합니다 (자세한 정의는 references/ux-psychology-ecommerce.md 참조):

힉의 법칙 (Hick's Law):
- 결제 양식은 기본적으로 간결하게 유지하고 불필요한 선택 입력 필드를 줄입니다.
- 탐색 모음 메뉴는 5개 이상의 1차 항목을 초과하지 않습니다.
앵커링 효과 (Anchoring Effect):
- 할인 상품은 원래 가격 취소선과 함께 표시하고 (예: ~~$120.00~~ $89.00) 절약 금액 레이블 Save $31을 표시합니다.
희소성 및 긴급성 (Scarcity & Urgency):
- 상세 페이지에 동적으로 무작위 표시 "이 가격에 재고 2개 남음".
- 결제 페이지에 "장바구니에 10:00분간 예약됨" 표시 (선택적 타이머).
사회적 증명 (Social Proof):
- 홈페이지 및 상세 페이지에 실제 구매자 인증 배지 표시 (Verified Buyer).
- 상품 목록 카드에 평균 평점 포함 (예: ★ 4.9 (128 리뷰)).
손실 회피 (Loss Aversion):
- 장바구니 무료 배송 진행률 표시줄 동적 알림: "$12만 더 추가하면 전 품목 무료 배송!"

🛠️ 상태 관리 아키텍처 규칙 (Zustand + LocalStorage)

디커플링되고 디바운스된 Zustand Store를 사용하여 페이지를 새로고침한 후에도 장바구니 데이터가 손실되지 않도록 합니다:

// src/store/useCartStore.ts 규칙 템플릿
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { CartItem, Product } from '../types';

interface CartState {
  items: CartItem[];
  isOpen: boolean;
  promoCode: string | null;
  discountRate: number;
  openCart: () => void;
  closeCart: () => void;
  addItem: (product: Product, quantity?: number, selectedVariant?: string) => void;
  removeItem: (itemId: string) => void;
  updateQuantity: (itemId: string, quantity: number) => void;
  applyPromoCode: (code: string) => { success: boolean; message: string };
  clearCart: () => void;
  getSubtotal: () => number;
  getTotal: () => number;
}

🛡️ 전달 품질 방어선 (7계층 검수 게이트)

사용자에게 결과물을 제출하기 전에 QA 역할이 항목별로 검증을 통과해야 합니다:

0 깨진 이미지 (Zero Broken Images): 모든 이미지 URL이 정상적으로 로드되고 크기가 적절하며 loading="lazy" 및 alt 속성이 있어야 합니다.
0 끊긴 링크 (Zero Broken Links): 사이트 전체의 탐색, 바닥글 링크, 버튼이 모두 클릭 가능하고 해당 11페이지 라우트로 이동해야 합니다.
0 플레이스홀더 (Zero Placeholders): Lorem Ipsum, Product 1, $0.00 등 대충 만든 텍스트가 절대 나타나서는 안 되며, 모든 카피는 해당 브랜드 톤에 맞아야 합니다.
장바구니 전체 루프 완료 (Cart Loop Completed): 장바구니에 추가 → 드로어 슬라이드 인 → 수량 변경 및 금액 연동 → 쿠폰 적용 할인 → 결제 제출 → 주문 성공 페이지로 이동하여 주문 번호 획득.
RWD 반응형 보장: 모바일 (375px), 태블릿 (768px), 데스크탑 (1280px+) 모두 수평 오버플로우나 레이아웃 깨짐이 없어야 합니다.
SEO 구조화: 상품 상세 페이지에 올바른 application/ld+json (Schema.org Product) 이 출력되어야 합니다.
프로덕션 빌드 검증 (Production Build): npm run build 실행 시 오류가 전혀 없어야 하며 dist/ 디렉토리가 출력되어야 합니다.

dee0917/commercecraft-agent-skill

commercecraft-agent-skill란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서

전자상거래 프론트엔드 엔진 (Auto E-Commerce Frontend Engine)

🤖 5가지 가상 역할 및 스킬 매트릭스 (Agent Team Architecture)

🚀 전체 수명 주기 실행 흐름 (Lifecycle Phases)

📋 11페이지 전체 기능 라우팅 규칙 (Page Requirements)

🧠 전자상거래 심리학 및 전환율 (CRO) 필수 구현 가이드

🛠️ 상태 관리 아키텍처 규칙 (Zustand + LocalStorage)

🛡️ 전달 품질 방어선 (7계층 검수 게이트)

관련 스킬

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code