designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인

웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포.

스킬 (packages/skill)
- SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로
  본문은 절차와 인덱스만, 지식은 references/ 로 분리
- 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기
- 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외
- 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙,
  SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침

설치 CLI (packages/cli, packages/core)
- npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md
- 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다
- 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성
- AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입
- Windsurf 는 12,000자 상한 초과 시 설치를 차단

배포 (build/ci, .forgejo/workflows)
- 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러
  → draft 릴리스 → Cloudflare Pages. 재실행 멱등

근거 (research/)
- 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다

테스트 22개 통과 (core 16 · cli 6)

research/dogfood-saas/tools/contrast.mjs

@@ -0,0 +1,52 @@
+// WCAG 2.x 상대 명도 대비 검사. node tools/contrast.mjs
+const hex = h => h.replace('#','').match(/../g).map(x => parseInt(x,16)/255)
+const lin = c => c <= 0.03928 ? c/12.92 : Math.pow((c+0.055)/1.055, 2.4)
+const L = h => { const [r,g,b] = hex(h).map(lin); return 0.2126*r + 0.7152*g + 0.0722*b }
+const ratio = (a,b) => { const l1 = L(a), l2 = L(b); const [hi,lo] = l1>l2 ? [l1,l2] : [l2,l1]; return (hi+0.05)/(lo+0.05) }
+
+const themes = {
+  dark: {
+    surface: '#0D0F12', raised: '#151A20', line: '#262E37',
+    ink: '#E6E8E6', inkMuted: '#9BA6B2', accent: '#7FA6FF',
+    ctaBg: '#E6E8E6', ctaInk: '#0D0F12',
+    ok: '#4FA97A', warn: '#C9A227', fail: '#D46A55',
+  },
+  light: {
+    surface: '#F7F5F0', raised: '#FDFCF9', line: '#DCD8CF',
+    ink: '#16181A', inkMuted: '#5C646E', accent: '#1B4FD8',
+    ctaBg: '#16181A', ctaInk: '#FAF9F6',
+    ok: '#2F7D57', warn: '#8A6D14', fail: '#A8432E',
+  },
+}
+
+// [라벨, 전경, 배경키, 최소요구]
+const checks = [
+  ['본문 ink / surface',        'ink',      'surface', 4.5],
+  ['본문 ink / raised',         'ink',      'raised',  4.5],
+  ['보조 inkMuted / surface',   'inkMuted', 'surface', 4.5],
+  ['보조 inkMuted / raised',    'inkMuted', 'raised',  4.5],
+  ['링크 accent / surface',     'accent',   'surface', 4.5],
+  ['링크 accent / raised',      'accent',   'raised',  4.5],
+  ['상태 ok / raised',          'ok',       'raised',  4.5],
+  ['상태 warn / raised',        'warn',     'raised',  4.5],
+  ['상태 fail / raised',        'fail',     'raised',  4.5],
+]
+
+let fail = 0
+for (const [name, t] of Object.entries(themes)) {
+  console.log(`\n=== ${name} ===`)
+  for (const [label, fg, bg, min] of checks) {
+    const r = ratio(t[fg], t[bg])
+    const ok = r >= min
+    if (!ok) fail++
+    console.log(`${ok ? 'PASS' : 'FAIL'}  ${r.toFixed(2)}:1  (min ${min})  ${label}  ${t[fg]} on ${t[bg]}`)
+  }
+  const r = ratio(t.ctaInk, t.ctaBg)
+  const ok = r >= 4.5
+  if (!ok) fail++
+  console.log(`${ok ? 'PASS' : 'FAIL'}  ${r.toFixed(2)}:1  (min 4.5)  CTA 글자/버튼  ${t.ctaInk} on ${t.ctaBg}`)
+  // 하드게이트 #7: 버튼 텍스트/배경 대비
+  const rb = ratio(t.line, t.surface)
+  console.log(`INFO  ${rb.toFixed(2)}:1            경계선 line / surface (3:1 미만이면 비필수 장식으로만)`)
+}
+console.log(fail === 0 ? '\n전부 통과' : `\n${fail}건 실패`)