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)

packages/cli/src/commands/doctor.ts

@@ -0,0 +1,55 @@
+import { inspectDrift, pruneDeadInstalls, readManifest, tildify } from "@designpaca/core";
+import { getVersion } from "../skill.ts";
+import { bad, dim, heading, info, ok, table, warn } from "../ui.ts";
+
+export async function runDoctor(): Promise<number> {
+  const version = await getVersion();
+  const pruned = await pruneDeadInstalls();
+  const manifest = await readManifest();
+
+  console.log(heading("designpaca 진단"));
+  console.log(
+    table([
+      ["CLI 버전", version],
+      ["Node", process.version],
+      ["설치 기록", `${manifest.installs.length}건`],
+    ]),
+  );
+  if (pruned > 0) console.log(info(`사라진 설치 기록 ${pruned}건을 정리했다`));
+
+  if (manifest.installs.length === 0) {
+    console.log(warn("설치된 곳이 없다. `npx designpaca install` 로 설치해라."));
+    return 0;
+  }
+
+  let problems = 0;
+  for (const rec of manifest.installs) {
+    const drift = await inspectDrift(rec);
+    const missing = drift.files.filter((f) => f.status === "missing");
+    const modified = drift.files.filter((f) => f.status === "modified");
+
+    console.log(heading(`${rec.target} (${rec.scope})`));
+    console.log(
+      table([
+        ["위치", tildify(rec.root)],
+        ["버전", rec.version === version ? rec.version : `${rec.version} → ${version} 업데이트 가능`],
+        ["파일", `${rec.files.length}개`],
+      ]),
+    );
+
+    if (rec.version !== version) problems++;
+    if (missing.length > 0) {
+      problems++;
+      console.log(bad(`파일 ${missing.length}개가 사라졌다 — \`designpaca update --force\` 로 복구해라`));
+      for (const m of missing.slice(0, 5)) console.log(dim(`    ${tildify(m.path)}`));
+    }
+    if (modified.length > 0) {
+      console.log(warn(`직접 수정한 파일 ${modified.length}개 — 업데이트가 이 파일들을 건너뛴다`));
+      for (const m of modified.slice(0, 5)) console.log(dim(`    ${tildify(m.path)}`));
+    }
+    if (missing.length === 0 && modified.length === 0 && rec.version === version) {
+      console.log(ok("정상"));
+    }
+  }
+  return problems > 0 ? 1 : 0;
+}

packages/cli/src/commands/install.ts

@@ -0,0 +1,90 @@
+import {
+  applyPlan,
+  planInstall,
+  tildify,
+  type Scope,
+  type TargetId,
+} from "@designpaca/core";
+import { getSkill } from "../skill.ts";
+import { bad, dim, fold, heading, info, ok, warn } from "../ui.ts";
+
+export interface InstallOptions {
+  targets: TargetId[];
+  scope: Scope;
+  force?: boolean;
+  /** 실제로 쓰지 않고 계획만 출력 */
+  dryRun?: boolean;
+}
+
+export interface InstallOutcome {
+  target: TargetId;
+  root: string;
+  written: number;
+  skipped: string[];
+  blocked?: string;
+}
+
+/** install/update/TUI 가 공유하는 실제 설치 실행부 */
+export async function runInstall(opts: InstallOptions): Promise<InstallOutcome[]> {
+  const skill = await getSkill();
+  const outcomes: InstallOutcome[] = [];
+
+  for (const target of opts.targets) {
+    const plan = await planInstall(target, opts.scope, skill);
+    if (plan.blocked) {
+      outcomes.push({ target, root: "", written: 0, skipped: [], blocked: plan.blocked });
+      continue;
+    }
+    if (opts.dryRun) {
+      outcomes.push({ target, root: plan.root, written: plan.actions.length, skipped: [] });
+      continue;
+    }
+    const res = await applyPlan(plan, skill.version, { force: opts.force });
+    outcomes.push({
+      target,
+      root: plan.root,
+      written: res.written.length,
+      skipped: res.skipped,
+    });
+  }
+  return outcomes;
+}
+
+export function printOutcomes(outcomes: InstallOutcome[], dryRun = false): void {
+  console.log(heading(dryRun ? "설치 계획" : "설치 결과"));
+  for (const o of outcomes) {
+    if (o.blocked) {
+      console.log(bad(`${o.target}: ${o.blocked}`));
+      continue;
+    }
+    const verb = dryRun ? "쓸 파일" : "설치됨";
+    console.log(ok(`${o.target} — ${verb} ${o.written}개  ${dim(tildify(o.root))}`));
+    if (o.skipped.length > 0) {
+      console.log(warn(`  직접 수정한 파일이라 건드리지 않았다 (--force 로 덮어쓴다):`));
+      for (const s of fold(o.skipped)) console.log(dim(`    ${tildify(s)}`));
+    }
+  }
+}
+
+/** 설치 후 안내 — 여기서 끝내지 말고 다음 행동을 알려준다 */
+export function printNextSteps(targets: TargetId[]): void {
+  console.log(heading("다음 단계"));
+  if (targets.includes("claude-code")) {
+    console.log(info(`Claude Code 를 새로 열고 ${dim("/designpaca")} 를 실행해라`));
+  }
+  if (targets.includes("codex")) {
+    console.log(info(`Codex CLI 에서 designpaca 스킬이 자동으로 잡힌다`));
+  }
+  if (targets.includes("cursor")) {
+    console.log(info(`Cursor 는 ${dim(".cursor/rules/designpaca.mdc")} 를 프로젝트 열 때 읽는다`));
+  }
+  if (targets.includes("windsurf")) {
+    console.log(info(`Windsurf 는 ${dim(".windsurf/rules/designpaca.md")} 를 읽는다`));
+  }
+  if (targets.includes("agents-md")) {
+    console.log(
+      info(`AGENTS.md 에는 포인터만 넣었다 — 본문은 ${dim(".designpaca/SKILL.md")} 에 있다`),
+    );
+  }
+  console.log(info(`문서: ${dim("https://designpaca.chanpaca.net")}`));
+}

packages/cli/src/commands/list.ts

@@ -0,0 +1,30 @@
+import { ADAPTERS, readManifest, tildify } from "@designpaca/core";
+import { getVersion } from "../skill.ts";
+import { dim, heading, info, ok, padDisplay, table } from "../ui.ts";
+
+export async function runList(): Promise<number> {
+  const version = await getVersion();
+  const manifest = await readManifest();
+
+  console.log(heading("설치 가능한 대상"));
+  for (const a of ADAPTERS) {
+    console.log(`  ${padDisplay(a.label, 18)} ${dim(a.hint)}  ${dim(`[${a.scopes.join("|")}]`)}`);
+  }
+
+  console.log(heading(`현재 설치 (CLI v${version})`));
+  if (manifest.installs.length === 0) {
+    console.log(info("없음"));
+    return 0;
+  }
+  for (const rec of manifest.installs) {
+    console.log(ok(`${rec.target} (${rec.scope})`));
+    console.log(
+      table([
+        ["위치", tildify(rec.root)],
+        ["버전", rec.version],
+        ["설치 시각", new Date(rec.installedAt).toLocaleString("ko-KR")],
+      ]),
+    );
+  }
+  return 0;
+}

packages/cli/src/commands/uninstall.ts

@@ -0,0 +1,30 @@
+import { readManifest, removeInstall, tildify, type TargetId } from "@designpaca/core";
+import { dim, heading, ok, warn } from "../ui.ts";
+
+export async function runUninstall(opts: {
+  targets?: TargetId[];
+  force?: boolean;
+}): Promise<number> {
+  const manifest = await readManifest();
+  const targets = manifest.installs.filter(
+    (i) => !opts.targets || opts.targets.length === 0 || opts.targets.includes(i.target),
+  );
+
+  if (targets.length === 0) {
+    console.log(warn("제거할 설치 기록이 없다"));
+    return 0;
+  }
+
+  console.log(heading("제거"));
+  for (const rec of targets) {
+    const res = await removeInstall(rec, { force: opts.force });
+    console.log(ok(`${rec.target} (${rec.scope}) — ${res.removed.length}개 제거  ${dim(tildify(rec.root))}`));
+    if (res.keptModified.length > 0) {
+      console.log(
+        warn(`  직접 수정한 파일 ${res.keptModified.length}개는 남겼다 (--force 로 함께 지운다)`),
+      );
+      for (const p of res.keptModified.slice(0, 5)) console.log(dim(`    ${tildify(p)}`));
+    }
+  }
+  return 0;
+}

packages/cli/src/commands/update.ts

@@ -0,0 +1,55 @@
+import { inspectDrift, readManifest, tildify } from "@designpaca/core";
+import { getVersion } from "../skill.ts";
+import { runInstall, printOutcomes } from "./install.ts";
+import { dim, heading, info, ok, warn } from "../ui.ts";
+
+/**
+ * 설치 기록을 그대로 따라가며 재설치한다.
+ * 사용자가 고친 파일은 기본적으로 보존된다(applyPlan 이 판단) — 강제로 맞추려면 --force.
+ */
+export async function runUpdate(opts: { force?: boolean } = {}): Promise<number> {
+  const version = await getVersion();
+  const manifest = await readManifest();
+
+  if (manifest.installs.length === 0) {
+    console.log(warn("설치 기록이 없다. `npx designpaca install` 을 먼저 실행해라."));
+    return 1;
+  }
+
+  console.log(heading(`업데이트 → v${version}`));
+  const stale = manifest.installs.filter((i) => i.version !== version);
+
+  if (stale.length === 0) {
+    console.log(ok("모든 설치가 이미 최신이다"));
+
+    // 버전이 같아도 파일이 사라졌거나 수정됐을 수 있다. 조용히 넘기면 사용자가 모른다.
+    let broken = 0;
+    for (const rec of manifest.installs) {
+      const drift = await inspectDrift(rec);
+      const missing = drift.files.filter((f) => f.status === "missing");
+      if (missing.length > 0) {
+        broken += missing.length;
+        console.log(warn(`${rec.target}: 파일 ${missing.length}개가 사라졌다 ${dim(tildify(rec.root))}`));
+      }
+      if (drift.modified.length > 0) {
+        console.log(info(`${rec.target}: 직접 수정한 파일 ${drift.modified.length}개는 그대로 둔다`));
+      }
+    }
+
+    if (!opts.force) {
+      console.log(dim(broken > 0 ? "  사라진 파일을 복구하려면 --force" : "  강제로 다시 쓰려면 --force"));
+      return broken > 0 ? 1 : 0;
+    }
+  }
+
+  for (const rec of manifest.installs) {
+    console.log(info(`${rec.target} (${rec.scope}) ${dim(tildify(rec.root))} — ${rec.version} → ${version}`));
+    const outcomes = await runInstall({
+      targets: [rec.target],
+      scope: rec.scope,
+      force: opts.force,
+    });
+    printOutcomes(outcomes);
+  }
+  return 0;
+}