mokkun 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +61 -0
  2. package/dist/example.html +2 -2
  3. package/dist/mokkun.css +1 -1
  4. package/dist/mokkun.esm.js +494 -488
  5. package/dist/mokkun.esm.js.map +1 -1
  6. package/dist/mokkun.js +79 -79
  7. package/dist/mokkun.js.map +1 -1
  8. package/dist/types/parser/yaml-parser.d.ts +0 -1
  9. package/dist/types/types/schema.d.ts +3 -1
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -37,6 +37,67 @@ pnpm build
37
37
  pnpm test
38
38
  ```
39
39
 
40
+ ## AI でモック YAML を生成する
41
+
42
+ mokkun の YAML フォーマットは [JSON Schema](./schema.json) として公開されています。
43
+ この schema を AI のプロンプトに渡すだけで、誰でも mokkun 用の画面モック YAML を生成できます。
44
+
45
+ ### schema.json の URL
46
+
47
+ ```
48
+ https://raw.githubusercontent.com/tango238/mokkun/main/schema.json
49
+ ```
50
+
51
+ ### プロンプト例
52
+
53
+ ChatGPT や Claude に以下のようなプロンプトを送ってください。
54
+
55
+ **基本**
56
+
57
+ ```
58
+ 以下の JSON Schema に準拠した YAML を生成してください。
59
+ https://raw.githubusercontent.com/tango238/mokkun/main/schema.json
60
+
61
+ 作りたい画面: ECサイトの商品一覧画面
62
+ - 検索フィルター（キーワード、カテゴリ、価格帯）
63
+ - 商品テーブル（商品名、価格、在庫数、ステータス）
64
+ - ページネーション
65
+ - 「商品登録」ボタン
66
+ ```
67
+
68
+ **複数画面を一括で生成**
69
+
70
+ ```
71
+ 以下の JSON Schema に準拠した YAML を生成してください。
72
+ https://raw.githubusercontent.com/tango238/mokkun/main/schema.json
73
+
74
+ 以下の画面を一つの YAML ファイルにまとめてください:
75
+ 1. ログイン画面（メール + パスワード）
76
+ 2. ユーザー一覧画面（テーブル + 検索）
77
+ 3. ユーザー詳細画面（プロフィール編集フォーム）
78
+ 画面間のナビゲーション（actions の navigate）も設定してください。
79
+ ```
80
+
81
+ ### 生成した YAML をモックとして表示する
82
+
83
+ AI が生成した YAML を `.yaml` ファイルとして保存し、`npx mokkun` で表示できます。
84
+
85
+ ```bash
86
+ # 生成された YAML を保存
87
+ cat > my-screen.yaml << 'EOF'
88
+ # ここに AI が生成した YAML を貼り付け
89
+ EOF
90
+
91
+ # mokkun でモックアップを表示（ブラウザが自動で開きます）
92
+ npx mokkun my-screen.yaml
93
+ ```
94
+
95
+ ポートを変更したい場合:
96
+
97
+ ```bash
98
+ npx mokkun -p 8080 my-screen.yaml
99
+ ```
100
+
40
101
  ## ディレクトリ構造
41
102
 
42
103
  ```
package/dist/example.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mokkun v0.1.3 - Example</title>
6
+ <title>Mokkun v0.1.4 - Example</title>
7
7
  <!-- Load Mokkun CSS -->
8
8
  <link rel="stylesheet" href="./mokkun.css">
9
9
  <style>
@@ -59,7 +59,7 @@
59
59
  <body>
60
60
  <div id="mokkun-app">
61
61
  <div class="demo-header">
62
- <h1>Mokkun v0.1.3</h1>
62
+ <h1>Mokkun v0.1.4</h1>
63
63
  <p>YAML-based Presentation & Form Builder</p>
64
64
  </div>
65
65
  <div class="demo-controls">