mikeneko-ui 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mikeneko-ui",
-  "version": "1.1.0",
+  "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)、日本語ファーストのタイポグラフィ。
 
@@ -150,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)
@@ -182,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変数)
@@ -208,7 +243,7 @@ mikeneko-ui/
 ```json
 {
   "mcpServers": {
-    "mikeneko-ui": {
+    "melta-ui": {
       "command": "node",
       "args": ["./ai/mcp/dist/index.js"]
     }
@@ -227,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` ルールで自動検出される。
+
+---
+
 ## アクセシビリティ（全般）
 
 | 禁止 | 理由 | 代替 |