respect

Core Goal

--mode brief:

• 화면 코딩 전에 RESPECT.md 생성 — "respect before design" 원칙
• 5개 핵심 의도 commit: three_second_rule / next_action / social_proof / hierarchy_rules / motion_language
• 결정론 검증 가능한 YAML 스키마 (craft-lint가 픽셀 분석 없이 정합성 검증)
• DESIGN.md (Google 표준 토큰)와 cross-reference 강제

--mode checkpoint:

• 화면 ship 직전 사용자 존중 게이트 mechanical enforcement
• AI 책임: 화면 분류 (screen_type / traffic_level) — Rule 5 허용 영역
• 결정론 책임: 분류 결과 → α/β/γ 게이트 조합 lookup (정책은 사용자 yaml)
• 게이트별 실행은 각각 다른 메커니즘 (인간 / 데이터 / 합성)

---

Trigger Gate

Use This Skill When

• 새 화면 디자인 시작 (라우팅 추가 직전) → --mode brief
• 기존 화면 리디자인 — RESPECT.md 갱신 → --mode brief
• 사용자 인터페이스가 있는 LLM 에이전트의 PRD Section 11 보강 → --mode brief
• 화면 ship 직전 (deploy / release 이전 마지막 게이트) → --mode checkpoint
• craft-lint 통과 후 (디자인 정합성 확인 후 사용자 존중 게이트) → --mode checkpoint

Route to Other Skills When

• 표준 토큰 (색·폰트·간격) 정의 → Google DESIGN.md (npx @google/design.md)
• 픽셀 분석 (fold density / contrast) → deliver/ui-validate --check hierarchy (Playwright)
• 디자인 토큰·hierarchy 위반 → scripts/validate-craft-lint.py (정적) 또는 deliver/ui-validate --check hierarchy (런타임)
• 게이트 통과의 자연어 보고 → operate/ops-review

Boundary Checks

• DESIGN.md 부재 시 → "먼저 npx @google/design.md init 권유"
• 백엔드 only 에이전트 → "RESPECT.md 불필요, PRD Section 11 N/A 표기"
• 매트릭스 yaml 누락 → default 매트릭스 + warning
• β 게이트 + analytics_endpoint 부재 → β 자동 skip + warning

---

Mode: brief

RESPECT.md 스키마 (필수 5 섹션)

screen: "<화면 이름>"
references_design_md: ./DESIGN.md     # 표준 파일 cross-ref 강제

three_second_rule:
  what_is_this: "한 문장. 3초 안에 답이 나와야 한다 (≤20 단어, 금지어 없음)"
  # 예: "교사가 강의 슬라이드를 5분에 만드는 AI 도구"
  # 실패 예: "차세대 AI 기반 교육 콘텐츠 플랫폼" ← 의미 0

scan_test:
  if_user_only_reads_headlines: "핵심 가치를 잡을 수 있는가?"
  required_headlines: 3

next_action:
  primary_cta: "<단 1개 CTA 문구>"      # craft-lint: != null + ≤ 6 단어
  secondary_cta: null                   # 처음엔 None. 2개 이상이면 fail
  placement: "0.05초 룰 — fold 안"

social_proof:
  type: "logo_strip | testimonial | usage_number"
  evidence: "<구체 데이터>"              # 예: "26M ALTools 사용자"
  position: "fold 직후"

emotional_tone:
  hero_image_face: "smiling | neutral | candid"
  rationale: "<왜 이 표정이 적합한가>"

hierarchy_rules:
  max_elements_above_fold: 7
  max_type_scale_per_screen: 4
  color_ratio: [60, 30, 10]              # 합 100 강제 (craft-lint 검증)
  whitespace_to_content_min: 0.4
  cta_count_above_fold: 1                # 1 강제

motion_language:
  hover_transition_ms: 200
  page_transition_easing: "cubic-bezier(0.4, 0, 0.2, 1)"
  scroll_reveal: "stagger 80ms"

forbidden:
  - "차세대, 혁신, 솔루션 같은 추상명사"
  - "기능 나열 (이 단계에선 결과만)"
  - "fold 안에 4개 이상의 element"
  - "Inter / Roboto / Arial / system-ui 폰트 (generic AI aesthetics)"

analytics_endpoint: "<PostHog/Plausible/GA4 URL>"   # checkpoint β 게이트