mikeneko-ui 1.0.1 → 1.2.0

package/README.md

@@ -104,7 +104,7 @@ AI ツール（Claude Code, Cursor 等）が以下のツールを使える:
 ### Typography
 
 ```
-Font: Inter, Hiragino Sans, Hiragino Kaku Gothic ProN, Noto Sans JP, sans-serif
+Font: Noto Sans JP, sans-serif
 Body: 18px / line-height 2.0 / letter-spacing 0.02em
 Heading: line-height 1.4 / letter-spacing 0.01em
 ```

package/dist/mcp.js

@@ -27,7 +27,24 @@ export async function startMcp() {
             return null;
         return readFileSync(full, "utf-8");
     }
-    const server = new Server({ name: "mikeneko-ui-mcp", version: "1.0.0" }, { capabilities: { tools: {} } });
+    /**
+     * Load prohibition rules from rules.json (SSoT) and flatten into patterns.
+     * Falls back to bundled template.
+     */
+    function loadProhibitionRules() {
+        const rulesData = loadJSON("metadata/rules.json") ?? loadJSON(resolve(TEMPLATES, "rules.json"));
+        if (!rulesData)
+            return [];
+        const flat = [];
+        for (const rule of rulesData.rules) {
+            const patterns = rule.patterns ?? (rule.pattern ? [rule.pattern] : []);
+            for (const p of patterns) {
+                flat.push({ pattern: p, reason: rule.reason, alternative: rule.alternative });
+            }
+        }
+        return flat;
+    }
+    const server = new Server({ name: "mikeneko-ui-cli-mcp", version: "2.0.0" }, { capabilities: { tools: {} } });
     server.setRequestHandler(ListToolsRequestSchema, async () => ({
         tools: [
             {
@@ -57,7 +74,7 @@ export async function startMcp() {
             },
             {
                 name: "get_prohibited",
-                description: "mikeneko UI 禁止パターンを取得。",
+                description: "mikeneko UI 禁止パターンを取得（rules.json SSoT対応）。",
                 inputSchema: {
                     type: "object",
                     properties: {
@@ -65,6 +82,20 @@ export async function startMcp() {
                     },
                 },
             },
+            {
+                name: "check_rule",
+                description: "Tailwind クラスを禁止ルールに照合。違反があれば理由と代替を返す。",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        classes: {
+                            type: "string",
+                            description: "スペース区切りの Tailwind クラス (例: 'text-black shadow-lg')",
+                        },
+                    },
+                    required: ["classes"],
+                },
+            },
             {
                 name: "get_quick_reference",
                 description: "CLAUDE.md (AI Quick Reference) を返す。",
@@ -73,6 +104,20 @@ export async function startMcp() {
                     properties: {},
                 },
             },
+            {
+                name: "search",
+                description: "トークンとコンポーネントをキーワード横断検索。",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        query: {
+                            type: "string",
+                            description: "検索キーワード",
+                        },
+                    },
+                    required: ["query"],
+                },
+            },
         ],
     }));
     server.setRequestHandler(CallToolRequestSchema, async (request) => {
@@ -81,7 +126,6 @@ export async function startMcp() {
         const text = (s) => ({ content: [{ type: "text", text: s }] });
         switch (name) {
             case "get_token": {
-                // Try project-local tokens first, then bundled template
                 const tokens = loadJSON("tokens/tokens.json") ?? loadJSON(resolve(TEMPLATES, "tokens.json"));
                 if (!tokens)
                     return text("tokens.json not found");
@@ -100,6 +144,15 @@ export async function startMcp() {
                 return comp ? text(JSON.stringify(comp, null, 2)) : text(`Not found: ${a.name}`);
             }
             case "get_prohibited": {
+                // Try rules.json first (SSoT), fall back to prohibited.md
+                const rulesData = loadJSON("metadata/rules.json") ?? loadJSON(resolve(TEMPLATES, "rules.json"));
+                if (rulesData) {
+                    if (!a.section)
+                        return text(JSON.stringify(rulesData, null, 2));
+                    const filtered = rulesData.rules.filter((r) => r.category.toLowerCase().includes(a.section.toLowerCase()));
+                    return text(JSON.stringify(filtered, null, 2));
+                }
+                // Fallback to prohibited.md
                 const content = loadFile("foundations/prohibited.md") ?? loadTemplate("prohibited.md");
                 if (!content)
                     return text("prohibited.md not found");
@@ -109,15 +162,46 @@ export async function startMcp() {
                 const match = content.match(regex);
                 return text(match ? match[1].trim() : `Section "${a.section}" not found`);
             }
+            case "check_rule": {
+                const rules = loadProhibitionRules();
+                const classList = a.classes.split(/\s+/).filter(Boolean);
+                const violations = [];
+                for (const cls of classList) {
+                    for (const rule of rules) {
+                        if (cls.includes(rule.pattern)) {
+                            violations.push({ class: cls, reason: rule.reason, alternative: rule.alternative });
+                        }
+                    }
+                }
+                return violations.length === 0
+                    ? text("✅ No violations found.")
+                    : text(JSON.stringify({ violationCount: violations.length, violations }, null, 2));
+            }
             case "get_quick_reference": {
                 const content = loadFile("CLAUDE.md") ?? loadTemplate("CLAUDE.md");
                 return text(content ?? "CLAUDE.md not found");
             }
+            case "search": {
+                const tokens = loadJSON("tokens/tokens.json") ?? loadJSON(resolve(TEMPLATES, "tokens.json"));
+                const components = loadJSON("metadata/components.json") ?? loadJSON(resolve(TEMPLATES, "components.json"));
+                const q = a.query.toLowerCase();
+                const results = [];
+                // Search components
+                if (components) {
+                    for (const comp of components.components) {
+                        const searchable = [comp.id, comp.name, comp.description, comp.category].join(" ").toLowerCase();
+                        if (searchable.includes(q)) {
+                            results.push({ type: "component", id: comp.id, name: comp.name, data: comp });
+                        }
+                    }
+                }
+                return text(JSON.stringify(results, null, 2));
+            }
             default:
                 return text(`Unknown tool: ${name}`);
         }
     });
     const transport = new StdioServerTransport();
     await server.connect(transport);
-    console.error("mikeneko UI MCP Server running on stdio");
+    console.error("mikeneko UI CLI MCP Server v2.0.0 running on stdio");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mikeneko-ui",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "mikeneko UI — AI-ready design system CLI. Injects theme + rules into your React/Next.js project.",
   "type": "module",
   "bin": {

package/templates/CLAUDE.md

@@ -1,4 +1,4 @@
-# mikeneko UI — AI Quick Reference
+# melta UI — AI Quick Reference
 
 > ShadCN/ui ベースのデザインシステム。Primary: Blue (#2b70ef)、日本語ファーストのタイポグラフィ。
 
@@ -17,7 +17,7 @@ Danger:   #ef4444
 
 ### Typography
 ```
-Font: Inter, Hiragino Sans, Hiragino Kaku Gothic ProN, Noto Sans JP, sans-serif
+Font: Noto Sans JP, sans-serif
 H1: 32px/1.4 bold (text-3xl)
 H2: 26px/1.4 bold (text-2xl)
 H3: 22px/1.4 semibold (text-xl)
@@ -41,13 +41,14 @@ Easing: ease-in-out (default)
 
 ---
 
-## 設計原則（5つ）
+## 設計原則（6つ）
 
 1. **Layered** — Background → Surface → Text/Object の3層でUIを構成する
 2. **Contrast** — テキストは背景に対してWCAG 2.1準拠（4.5:1以上）
 3. **Semantic** — 色は用途で指定する（`bg-primary` ≠ 生の `bg-blue-500`）
 4. **Minimal** — 1つのViewに使う色は3色まで（背景・アクセント・テキスト）
 5. **Grid** — スペーシングは4の倍数を基本、8の倍数を推奨する
+6. **State-Complete** — 新規コンポーネントは全状態（default / hover / focus / active / disabled / error / loading 等）を網羅して作る
 
 ---
 
@@ -149,15 +150,48 @@ Easing: ease-in-out (default)
 | 色だけで情報伝達 | アイコン/テキストを併用 |
 | 300ms超のアニメーション | 150〜300ms に制限 |
 | `<th>` の `scope` 省略 | Table コンポーネント使用 |
+| **Button** の右寄せ（`ml-auto` / `justify-end` / `text-right` 等）※ Button 以外の要素には適用しない。カードヘッダーの `justify-between` 等は許可 | 左寄せ（デフォルト）または中央寄せ |
+| アイコンをテキストの **後** に配置（シェブロン・外部リンク等の Trailing 許可リスト以外） | アイコンはテキストの **前（Leading）** に配置する |
+| `flex-row-reverse` でアイコン位置制御 | DOM順 = 視覚順にする |
+| 定義外アイコンサイズ（`w-3 h-3` / `w-7 h-7` 等） | 4段階のみ: 16/20/24/32px |
 
-> 全禁止パターン（76項目）: `foundations/prohibited.md` 参照
+> 全禁止パターン: `foundations/prohibited.md` 参照
+> アイコン配置ルール詳細: `foundations/icons.md` 参照
+
+---
+
+## HTML要素 → コンポーネント マッピング（必須）
+
+> 素のHTML要素を使わず、必ず対応する shadcn/ui コンポーネントを使用すること。
+> `components/ui/` 内のコンポーネント実装は例外。
+> ESLint: `eslint-plugin-melta` の `melta/no-raw-html-elements` ルールで自動検出。
+
+| HTML要素 | melta UI コンポーネント | インポート元 |
+|----------|----------------------|-------------|
+| `<button>` | `<Button>` | `@/components/ui/button` |
+| `<input>` | `<Input>` | `@/components/ui/input` |
+| `<input type="checkbox">` | `<Checkbox>` | `@/components/ui/checkbox` |
+| `<input type="radio">` | `<RadioGroupItem>` | `@/components/ui/radio-group` |
+| `<textarea>` | `<Textarea>` | `@/components/ui/textarea` |
+| `<select>` | `<Select>` + `<SelectTrigger>` + `<SelectContent>` | `@/components/ui/select` |
+| `<option>` | `<SelectItem>` | `@/components/ui/select` |
+| `<label>` | `<Label>` | `@/components/ui/label` |
+| `<table>` | `<Table>` | `@/components/ui/table` |
+| `<thead>` | `<TableHeader>` | `@/components/ui/table` |
+| `<tbody>` | `<TableBody>` | `@/components/ui/table` |
+| `<tr>` | `<TableRow>` | `@/components/ui/table` |
+| `<th>` | `<TableHead>` | `@/components/ui/table` |
+| `<td>` | `<TableCell>` | `@/components/ui/table` |
+| `<dialog>` | `<Dialog>` | `@/components/ui/dialog` |
+| `<progress>` | `<Progress>` | `@/components/ui/progress` |
+| `<hr>` | `<Separator>` | `@/components/ui/separator` |
 
 ---
 
 ## ファイル構成
 
 ```
-mikeneko-ui/
+melta-ui/
 ├── CLAUDE.md              ← このファイル (AI Quick Reference)
 ├── tokens/
 │   └── tokens.json        ← デザイントークン (SSOT)
@@ -181,6 +215,8 @@ mikeneko-ui/
 │   └── mcp/               ← MCP Server
 │       ├── src/index.ts
 │       └── dist/index.js
+├── packages/
+│   └── eslint-plugin-melta/   ← 素のHTML要素検出 ESLint プラグイン
 ├── app/                   ← Next.js + shadcn/ui 実装
 │   ├── src/
 │   │   ├── app/globals.css    ← テーマ (CSS変数)
@@ -207,7 +243,7 @@ mikeneko-ui/
 ```json
 {
   "mcpServers": {
-    "mikeneko-ui": {
+    "melta-ui": {
       "command": "node",
       "args": ["./ai/mcp/dist/index.js"]
     }
@@ -226,7 +262,7 @@ mikeneko-ui/
 | ダークモード対応 | + foundations/theme.md → foundations/color.md |
 | フォーム画面 | + patterns/form.md → Input / Select / Checkbox / Button |
 | データ一覧 | + Table → Pagination → Badge |
-| ダッシュボード | + Card / Table / Progress / Chart / Badge |
+| ダッシュボード | + **patterns/dashboard.md** → Card / Table / Progress / Chart / Badge |
 | 設定画面 | + Tabs → Switch / Select / RadioGroup |
 | モーダル / 確認 | + Dialog / AlertDialog → Button |
 | Loading / 空状態 | + Skeleton → interaction-states.md |

package/templates/prohibited.md

@@ -79,6 +79,8 @@
 |------|------|------|
 | カード上部/左部のカラーバー（`border-t-4` や色付き `div`） | AI生成UIの典型パターン。装飾過剰で汎用性が低い | ボーダー（`border border-slate-200`）のみでカードを構成する |
 | 左端/上端のカラーストライプ（`border-l-4 border-*-500`） | Alert含め全コンポーネントで禁止 | `border border-*-200 rounded-lg` で全周ボーダー |
+| アイコンをタイトル/ラベルの **後（右側）** に配置 | AI が "Content First" を「テキストを先に書く」と解釈し、アイコンがタイトルの反対側に出る | アイコンはテキストの **前（Leading）** に配置。Trailing 許可はシェブロン・外部リンク等に限定（`foundations/icons.md` 参照） |
+| `flex-row-reverse` でアイコン位置を調整 | DOM順と視覚順が逆転し、スクリーンリーダーの読み上げ順序が壊れる | DOM順をそのまま視覚順にする |
 
 ---
 
@@ -92,6 +94,9 @@
 | Lighted Buttonの単独使用 | トグル状態の対比がないと意味不明 | Neutralとペアで使用する |
 | `aria-label` なしのアイコンボタン | 操作内容がスクリーンリーダーに伝わらない | `aria-label="閉じる"` 等を付与 |
 | 44px未満のタップ領域 | 操作困難（インラインテキストリンクを除く） | パディングでタップ領域を確保 |
+| ボタンの右寄せ配置（`ml-auto` / `justify-end` / `text-right` / `self-end` / `float-right`） | 右端のボタンは視線動線（左→右の Z パターン）から外れやすく、特にモバイルでは親指が届きにくい。また右寄せは「補助的な操作」という暗黙の意味を持ち、主要アクションの発見性が低下する | ボタンは左寄せ（デフォルト）または中央寄せで配置する。フォーム送信ボタンはフォーム幅に合わせて `w-full` またはコンテンツ左寄せ |
+
+> **注意**: この禁止は `<Button>` コンポーネントの配置のみが対象。カードヘッダーでタイトルとアイコンを `justify-between` で左右に配置するなど、ボタン以外の要素のレイアウトには適用しない。
 
 ### フォーム
 
@@ -185,6 +190,29 @@
 
 ---
 
+## 素のHTML要素の使用禁止
+
+> shadcn/ui コンポーネントが存在するHTML要素を素で使うことを禁止する。素のHTML要素はデザイントークン・アクセシビリティ・一貫したスタイリングが適用されず、melta UI の品質基準を満たせない。
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| `<button>` | DSのスタイル・バリアント・サイズが適用されない | `<Button>` (`@/components/ui/button`) |
+| `<input>` | ボーダー・フォーカスリング・エラー状態が未適用 | `<Input>` (`@/components/ui/input`) |
+| `<input type="checkbox">` | チェックボックスのスタイル・アニメーションが未適用 | `<Checkbox>` (`@/components/ui/checkbox`) |
+| `<input type="radio">` | ラジオボタンのスタイル・グループ制御が未適用 | `<RadioGroupItem>` (`@/components/ui/radio-group`) |
+| `<textarea>` | フォーム入力のスタイル統一が崩れる | `<Textarea>` (`@/components/ui/textarea`) |
+| `<select>` / `<option>` | ブラウザネイティブUIでスタイル制御不可 | `<Select>` + `<SelectItem>` (`@/components/ui/select`) |
+| `<label>` | フォームラベルのスタイル・間隔が未適用 | `<Label>` (`@/components/ui/label`) |
+| `<table>` / `<thead>` / `<tbody>` / `<tr>` / `<th>` / `<td>` | テーブルのスタイル・レスポンシブ対応が未適用 | `<Table>` / `<TableHeader>` / `<TableBody>` / `<TableRow>` / `<TableHead>` / `<TableCell>` (`@/components/ui/table`) |
+| `<dialog>` | フォーカストラップ・オーバーレイ・アニメーションが未適用 | `<Dialog>` (`@/components/ui/dialog`) |
+| `<progress>` | プログレスバーのスタイル・アニメーションが未適用 | `<Progress>` (`@/components/ui/progress`) |
+| `<hr>` | 区切り線のスタイル・セマンティクスが未適用 | `<Separator>` (`@/components/ui/separator`) |
+
+> **例外**: `components/ui/` 内の shadcn/ui コンポーネント実装では素のHTML要素を使用してよい。
+> **ESLint**: `eslint-plugin-melta` の `melta/no-raw-html-elements` ルールで自動検出される。
+
+---
+
 ## アクセシビリティ（全般）
 
 | 禁止 | 理由 | 代替 |

package/templates/theme.css

@@ -1,6 +1,6 @@
 /* ============================================
    mikeneko UI Theme — Primary: #2b70ef (Blue)
-   Font: Inter + Hiragino Sans + Noto Sans JP
+   Font: Noto Sans JP
    ============================================ */
 
 :root {
@@ -107,7 +107,7 @@
 
 @layer base {
   body {
-    font-family: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
+    font-family: "Noto Sans JP", sans-serif;
     letter-spacing: 0.02em;
     line-height: 2.0;
   }

package/templates/tokens.json

@@ -70,7 +70,7 @@
   "typography": {
     "fontFamily": {
       "sans": {
-        "value": ["Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "sans-serif"],
+        "value": ["Noto Sans JP", "sans-serif"],
         "tailwind": "font-sans"
       },
       "mono": {