oh-my-design-cli 1.7.1 → 1.8.0

package/.claude/hooks/session-state-loader.cjs

@@ -7,11 +7,13 @@
 
 const fs = require('node:fs');
 const path = require('node:path');
+const { countPending } = require('./lib/preferences-parser.cjs');
 
 const projectDir = process.env.CLAUDE_PROJECT_DIR || process.cwd();
 const stateMd = path.join(projectDir, '.omd', 'state.md');
 const timelineMd = path.join(projectDir, '.omd', 'timeline.md');
 const preferencesMd = path.join(projectDir, '.omd', 'preferences.md');
+const proposalJson = path.join(projectDir, '.omd', 'foldin-proposal.json');
 
 function safeRead(p) {
   try {
@@ -32,9 +34,9 @@ if (fs.existsSync(stateMd)) {
     lines.push('');
   }
 } else if (fs.existsSync(preferencesMd)) {
-  // Best-effort fallback — count pending entries
+  // Best-effort fallback — count pending entries (canonical omd:remember format).
   const text = safeRead(preferencesMd) || '';
-  const pendingCount = (text.match(/^- status:\s*pending\b/gm) || []).length;
+  const pendingCount = countPending(text);
   if (pendingCount > 0) {
     lines.push('## OMD ENVIRONMENT STATE');
     lines.push('');
@@ -43,6 +45,43 @@ if (fs.existsSync(stateMd)) {
   }
 }
 
+// Auto-fold gate (issue #23): a "proposed" fold-in proposal instructs the
+// agent to ask the user via AskUserQuestion — hooks can't render UI, the
+// agent executes the question at session start. Snoozed/applied → silent.
+let proposal = null;
+try {
+  proposal = JSON.parse(fs.readFileSync(proposalJson, 'utf8'));
+} catch {
+  // missing / malformed → no proposal
+}
+if (
+  proposal &&
+  proposal.status === 'proposed' &&
+  Array.isArray(proposal.scopes) &&
+  proposal.scopes.length > 0
+) {
+  const items = proposal.scopes
+    .map((s) => `${s.scope}: ${s.summary || '(no summary)'} (${s.count}×)`)
+    .join('; ');
+  const perScope =
+    proposal.scopes.length <= 3
+      ? ` / per-scope picks (${proposal.scopes.map((s) => s.scope).join(', ')})`
+      : '';
+  lines.push('## OMD FOLD-IN PROPOSAL');
+  lines.push('');
+  lines.push(`${proposal.scopes.length} scope(s) recurred: ${items}.`);
+  lines.push(
+    `Ask the user via AskUserQuestion (one question, options: '전부 반영'${perScope} / '나중에') whether to fold these into DESIGN.md.`,
+  );
+  lines.push(
+    "On approve: run the omd:learn skill for the approved scopes, then set .omd/foldin-proposal.json status to 'applied'.",
+  );
+  lines.push(
+    "On decline: set status to 'snoozed' and add snoozed_at (ISO timestamp).",
+  );
+  lines.push('');
+}
+
 if (fs.existsSync(timelineMd)) {
   const text = safeRead(timelineMd) || '';
   const blocks = text.split(/^## /m).slice(1).slice(-3);
@@ -59,6 +98,16 @@ if (fs.existsSync(timelineMd)) {
 }
 
 if (lines.length > 0) {
-  process.stdout.write(JSON.stringify({ additionalContext: lines.join('\n') }));
+  // SessionStart contract: structured context must sit under hookSpecificOutput
+  // — a top-level { additionalContext } parses as JSON and is silently dropped
+  // (same class as the post-edit-watch / skill-activation fixes).
+  process.stdout.write(
+    JSON.stringify({
+      hookSpecificOutput: {
+        hookEventName: 'SessionStart',
+        additionalContext: lines.join('\n'),
+      },
+    }),
+  );
 }
 

package/.claude/hooks/skill-activation.cjs

@@ -35,9 +35,11 @@ const projectDir = process.env.CLAUDE_PROJECT_DIR || process.cwd();
 // "is the user asking for UI work?" sniff test, not a full taxonomy.
 // If you find yourself wanting to add 50 entries here, that's a sign
 // the description on the relevant SKILL.md should grow instead.
+// `색` → `색상`: the bare `색` substring-matched 검색("search"), 검색창, etc.,
+// firing the gate on non-UI prompts. `색상` ("color") is the real cue.
 const UI_CUES = [
   // Korean
-  '디자인', '레이아웃', '화면', '컴포넌트', '버튼', '카드', '색', '색상',
+  '디자인', '레이아웃', '화면', '컴포넌트', '버튼', '카드', '색상',
   '폰트', '스타일', '브랜드', '리팩토링', '랜딩', '페이지',
   // English
   'design', 'layout', 'component', 'button', 'card', 'color', 'colour',
@@ -49,17 +51,38 @@ const UI_CUES = [
   '設計', '佈局', '元件', '按鈕', '風格', '顏色', '字體', '品牌', '落地頁',
 ];
 
-let prompt = '';
+// Latin-alphabet cues use word boundaries so e.g. "card" doesn't match
+// "discard"/"cardinal" and "style" doesn't match "stylesheet" inside a path.
+// CJK cues have no ASCII word boundaries, so for them we keep substring match.
+const isLatin = (s) => /^[a-z]+$/i.test(s);
+function cueMatches(cue, prompt, lowerPrompt) {
+  if (isLatin(cue)) {
+    return new RegExp(`\\b${cue}\\b`, 'i').test(prompt);
+  }
+  return lowerPrompt.includes(cue.toLowerCase()) || prompt.includes(cue);
+}
+
+let input = '';
 process.stdin.setEncoding('utf8');
-process.stdin.on('data', (chunk) => (prompt += chunk));
+process.stdin.on('data', (chunk) => (input += chunk));
 process.stdin.on('end', () => {
+  // Never crash on malformed stdin — exit 0 silently.
+  let prompt;
+  try {
+    const payload = JSON.parse(input || '{}');
+    // Match against the user's prompt ONLY — not cwd/transcript_path, which
+    // contain repo paths like ".../oh-my-design/..." that falsely tripped the gate.
+    prompt = typeof payload.prompt === 'string' ? payload.prompt : '';
+  } catch {
+    process.exit(0);
+  }
+  if (!prompt) process.exit(0);
+
   const designMdPath = path.join(projectDir, 'DESIGN.md');
   if (fs.existsSync(designMdPath)) process.exit(0);
 
   const lower = prompt.toLowerCase();
-  const looksLikeUiWork = UI_CUES.some(
-    (k) => lower.includes(k.toLowerCase()) || prompt.includes(k),
-  );
+  const looksLikeUiWork = UI_CUES.some((k) => cueMatches(k, prompt, lower));
   if (!looksLikeUiWork) process.exit(0);
 
   const lines = [
@@ -71,5 +94,15 @@ process.stdin.on('end', () => {
     '   with brand context.',
     '',
   ];
-  process.stdout.write(JSON.stringify({ additionalContext: lines.join('\n') }));
+  // UserPromptSubmit contract: structured context must sit under
+  // hookSpecificOutput — a top-level { additionalContext } parses as JSON
+  // with no recognized fields and the gate message is silently dropped.
+  process.stdout.write(
+    JSON.stringify({
+      hookSpecificOutput: {
+        hookEventName: 'UserPromptSubmit',
+        additionalContext: lines.join('\n'),
+      },
+    }),
+  );
 });

package/README.ja.md

@@ -5,19 +5,16 @@
 <h1 align="center">oh-my-design</h1>
 
 <p align="center">
-  <strong>107 社の実在する企業デザインシステムから DESIGN.md を生成。</strong>インタラクティブウィザード。AI 呼び出しゼロ。
-</p>
-
-<p align="center">
-  <strong>新機能: OmD v0.1 Philosophy Layer。</strong>Voice・Narrative・Principles・Personas・States・Motion — Claude Code が AI のデフォルトではなく、あなたのブランドに合わせて出力します。
+  <strong>AI コーディングエージェントのためのスキル駆動デザイン — コマンド 1 回でブートストラップ。</strong>221 社の実在する企業デザインシステム。インストールに AI 呼び出しゼロ。あとはエージェントに話しかけるだけ。
 </p>
 
 <p align="center">
+  <a href="https://www.npmjs.com/package/oh-my-design-cli"><img src="https://img.shields.io/npm/v/oh-my-design-cli?style=flat-square&color=cb3837" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/oh-my-design-cli"><img src="https://img.shields.io/npm/dm/oh-my-design-cli?style=flat-square&color=cb3837" alt="npm downloads" /></a>
   <a href="LICENSE"><img src="https://img.shields.io/github/license/kwakseongjae/oh-my-design?style=flat-square" alt="License" /></a>
   <a href="https://github.com/kwakseongjae/oh-my-design/stargazers"><img src="https://img.shields.io/github/stars/kwakseongjae/oh-my-design?style=social" alt="GitHub Stars" /></a>
-  <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome" />
-  <img src="https://img.shields.io/badge/AI%20calls-zero-blue?style=flat-square" alt="Zero AI" />
-  <img src="https://img.shields.io/badge/references-107-7c5cfc?style=flat-square" alt="107 References" />
+  <img src="https://img.shields.io/badge/references-221-7c5cfc?style=flat-square" alt="221 References" />
+  <img src="https://img.shields.io/badge/CLI%20commands-1-blue?style=flat-square" alt="One CLI command" />
 </p>
 
 <p align="center">
@@ -28,118 +25,50 @@
 
 ## oh-my-design とは?
 
-**oh-my-design (OmD)** は、AI コーディングエージェントに「ブランドらしい UI」を生成させるのに十分なブランドコンテキストを供給するためのオープン仕様です。
-
-[Google が提案した](https://stitch.withgoogle.com/docs/design-md/overview/) `DESIGN.md` は本質的に**トークン文書** — 色・タイポグラフィ・コンポーネントの集合です。必要ですが、十分ではありません。トークンだけで UI を作ると形は整っても「誰のブランドでもない」出力になります — Inter-on-white、紫グラデーション、意味のない絵文字といった AI のデフォルトに収束します。OmD v0.1 はその上に**ブランド哲学レイヤー**を重ねます: **Voice・Narrative・Principles・Personas・States・Motion**。OmD フォーマットの `DESIGN.md` をプロジェクトルートに置くと、エージェントの出力はジェネリックではなく「あなたのもの」になります。
-
-3 つの構成要素:
-
-1. **[仕様](spec/omd-v0.1.md)** — バージョン管理された Google Stitch 拡張、MIT ライセンス。
-2. **[Claude Code スキル](.claude/skills/omd/SKILL.md)** — 仕様をハード制約として自動適用。
-3. **[107 のリファレンス](references/)** — 実在企業の `DESIGN.md` をフォークし、ビルダーでカスタマイズしてそのまま導入。
-
-**API キー不要。AI 呼び出しゼロ。全てクライアントサイドで完結。**
-
-## OmD v0.1 Philosophy Layer
-
-Google Stitch の 9 セクションの上に OmD が追加する 6 セクション:
-
-| セクション | 役割 |
-|---|---|
-| **10. Voice & Tone** | マイクロコピー制約 — ボタン文言、エラーメッセージ、オンボーディング |
-| **11. Brand Narrative** | 「なぜ」 — ブランドが拒否するもの、変えようとしているカテゴリ |
-| **12. Principles** | トークンでは解けないケースを決する 5〜10 の第一原理 |
-| **13. Personas** | 2〜4 人の具体的なユーザー。エージェントの出力を実際の使用文脈に grounded させる |
-| **14. States** | Empty / loading / error / skeleton パターン — ジェネリックな「データなし」を防ぐ |
-| **15. Motion & Easing** | 命名された duration + easing トークン — Stitch の 9 セクションが抜けている次元 |
-
-**現在、10 のリファレンスが完全な Philosophy Layer とともに提供されています:**
-Toss · Claude · Line · Stripe · Linear · Vercel · Notion · Airbnb · Apple · Figma — それぞれ voice, narrative, principles, personas, states, motion まで公開ソースに基づいて書かれています。
+**oh-my-design (OmD)** は AI コーディングエージェントのためのデザインシステムです。Claude Code / Codex / OpenCode / Cursor を、あなたのブランドを記憶したシニアプロダクトデザイナーに変えます。一度インストールすれば、あとは欲しいものを説明するだけ — コンポーネント、画面、コピー、アセット、チャート — エージェントがプロジェクトのデザインシステムを適用して出力します。`DESIGN.md` がブランド仕様([Google Stitch](https://stitch.withgoogle.com/docs/design-md/overview/) トークン + ブランド哲学レイヤー: Voice / Narrative / Principles / Personas / States / Motion)で、221 社の実在企業の DESIGN.md がパッケージに同梱されています。**API キー不要。外部インフラ不要。すべて既存の CLI セッション内で動作します。**
 
-完全な OmD v0.1 の例は [references/toss/DESIGN.md](references/toss/DESIGN.md) を参照。
+## インストール
 
-## 主な機能
-
-- **ビルダー** — リファレンスを選び、カラー / radius / ダークモードを調整し、コンポーネントを選択して Export。**Philosophy** フィルターで完全なブランド哲学を持つ 10 件に絞り込めます。
-- **デザインシステムディレクトリ** ([oh-my-design.kr/design-systems](https://oh-my-design.kr/design-systems)) — 107 リファレンス中 34 件は公式のデザインシステムまたはブランドガイドラインページを持っており、ディレクトリからライブサムネイル付きで直接アクセスできます。
-- **Personal Curation** ([oh-my-design.kr/curation](https://oh-my-design.kr/curation)) — MBTI 風の短いクイズであなたのデザイン傾向を 107 リファレンスのいずれかとマッチングし、そのリファレンスが事前選択されたビルダーへ直接移動します。
-
-## サポートされる 107 のリファレンス
-
-| カテゴリ | 企業 |
-|----------|------|
-| **AI & LLM** | Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI |
-| **デザインツール** | Airtable, Clay, Figma, Framer, Miro, Webflow |
-| **開発者ツール** | Cursor, Expo, Lovable, Raycast, Superhuman, Vercel, Warp |
-| **生産性** | Cal.com, freee, Intercom, Linear, Mintlify, Notion, Resend, Zapier |
-| **コンシューマテック** | Airbnb, Apple, Baemin, Dcard, IBM, Kakao, Karrot, LINE, Mercari, NVIDIA, Pinkoi, Pinterest, SpaceX, Spotify, Uber |
-| **フィンテック** | Coinbase, Kraken, Revolut, Stripe, Toss, Wise |
-| **バックエンド & DevOps** | ClickHouse, Composio, Hashicorp, MongoDB, PostHog, Sanity, Sentry, Supabase |
-| **自動車** | BMW, Ferrari, Lamborghini, Renault, Tesla |
-| **マーケティング** | Semrush |
-
-> ビルダーの**国フィルター**で地域別に絞り込めます (韓国、台湾、日本、フランス、イタリア、ドイツ、イギリス、アメリカ)。
-
-## エクスポートされる DESIGN.md
-
-[Google Stitch DESIGN.md フォーマット](https://stitch.withgoogle.com/docs/design-md/overview/)ベース — セクション 1〜9 + OmD v0.1 Philosophy Layer (セクション 10〜15、オプション):
+```bash
+npx oh-my-design-cli install-skills
+```
 
-**ベース (Google Stitch)**
-1. Visual Theme & Atmosphere
-2. Color Palette & Roles
-3. Typography Rules
-4. Component Stylings
-5. Layout Principles
-6. Depth & Elevation
-7. Do's and Don'ts
-8. Responsive Behavior
-9. Agent Prompt Guide
+インストール後、エージェントを再起動してください (Claude Code は Cmd+Q → 再起動) — 新しいスキル + エージェントが読み込まれます。
 
-**OmD v0.1 Philosophy Layer (追加)**
+実行する CLI コマンドはこれだけです。あとはすべてエージェントへの自然言語です。
 
-10. Voice & Tone
-11. Brand Narrative
-12. Principles
-13. Personas
-14. States
-15. Motion & Easing
+## サポートされるエージェント
 
-その他: Style Preferences, Included Components, Iconography & SVG Guidelines, Document Policies。
+| エージェント | チャネル | インストールされるもの |
+|---|---|---|
+| **Claude Code** | `--agent claude-code` (デフォルト) | フルバンドル — `.claude/` 配下のスキル、16 サブエージェント、hooks、data |
+| **Codex** | `--agent codex` | `.agents/skills/` スキルバンドル (公式 discovery パス) |
+| **OpenCode** | `--agent opencode` | `.opencode/skills/` スキルバンドル |
+| **Cursor** | `--agent cursor` | 正式な rules チャネル — `.cursor/rules/omd-design.mdc` shim + 共有 `.claude/data` カタログ (スキル/フックなし) |
 
-## プロジェクト構成
+デフォルトでは検出されたすべてのエージェントにインストールします; 単一チャネルのみなら `--agent <name>`。
 
-```
-oh-my-design/
-  spec/              OmD v0.1 仕様 (正本)
-  .claude/skills/omd/ Claude Code スキルバンドル
-  references/        107 社分の DESIGN.md ファイル
-  src/               CLI コア (TypeScript)
-  web/               Next.js ウェブビルダー
-    src/app/         Landing + Builder + Directory ページ
-    src/components/  Wizard, Preview, Export
-  test/              CLI Vitest スイート (unit/, integration/, scripts/)
-```
+## パッケージの中身
 
-ウェブのテストはソースファイルと並置されています (`web/src/**/*.test.ts`)。
+**17 スキル · 16 サブエージェント · 221 の検証済みリファレンス · 活性化 hooks** — 上記コマンド 1 回ですべてインストールされます。
 
-## テスト
+すべてのリファレンスは `oh-my-design.kr/design-systems/<id>.md` から raw markdown としても取得でき、エージェントが直接 fetch できます。スキル・エージェントごとの詳細リファレンス: **[oh-my-design.kr/docs](https://oh-my-design.kr/docs)**。
 
-2 つのスイートがあり、いずれも Vitest で動作し、いずれも合格する必要があります:
+## アップグレード
 
 ```bash
-npm test                # CLI: 370 テスト — unit + リファレンス全件のスモーク
-cd web && npm test      # Web: 107 テスト — generate-css, config-hash, survey
+npx oh-my-design-cli@latest install-skills
 ```
 
-統合スイート (`test/integration/all-references.test.ts`) はすべての `references/<id>/DESIGN.md` に対して生成パイプライン全体を実行するため、リファレンスの破損は PR レビューでリファレンスごとの失敗として可視化されます。フォルダ規約とモジュール別カバレッジマップは [test/README.md](test/README.md) を参照してください。
-
-## 謝辞
+Idempotent。`<!-- omd:installed-skill -->` マーカー付きの管理ファイルは in-place で更新され、ユーザーが編集したファイルはそのまま残ります (`--force` で上書き)。再実行後はエージェントを再起動してください。
 
-- [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) — 本プロジェクトの出発点となった上流の DESIGN.md コレクション。
-- [kzhrknt/awesome-design-md-jp](https://github.com/kzhrknt/awesome-design-md-jp) — 日本市場のデザインシステムリファレンス。
+## リンク
 
-oh-my-design はこれらのコレクションにインタラクティブなカスタマイズウィザード、A/B スタイル選択、コンポーネント選択、デザインシステムディレクトリ、CLI エクスポートパイプラインを追加して拡張しています。
+- **カタログ** — [oh-my-design.kr/design-systems](https://oh-my-design.kr/design-systems)
+- **コレクション** — [oh-my-design.kr/collections](https://oh-my-design.kr/collections)
+- **ドキュメント** — [oh-my-design.kr/docs](https://oh-my-design.kr/docs)
+- **チェンジログ** — [CHANGELOG.md](CHANGELOG.md)
 
 ## ライセンス
 
-[MIT](LICENSE)
+MIT — [LICENSE](LICENSE) を参照。リファレンスは各企業に帰属し、教育的参照のために再構成されています。