@monoharada/wcf-mcp 0.2.0 → 0.6.0

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 (9) hide show
  1. package/README.md +83 -3
  2. package/core.mjs +649 -51
  3. package/data/component-selector-guide.json +102 -0
  4. package/data/design-tokens.json +1 -1
  5. package/data/guidelines-index.json +1 -1
  6. package/data/pattern-registry.json +155 -36
  7. package/package.json +1 -1
  8. package/server.mjs +1 -0
  9. package/validator.mjs +183 -8
package/README.md CHANGED
@@ -78,7 +78,7 @@ claude mcp add wcf -- npx @monoharada/wcf-mcp
78
78
  }
79
79
  ```
80
80
 
81
- ## 提供機能（14 tools + 1 prompt + 4 resources）
81
+ ## 提供機能（16 tools + 1 prompt + 4 resources）
82
82
 
83
83
  ### ガードレール
84
84
 
@@ -92,7 +92,7 @@ claude mcp add wcf -- npx @monoharada/wcf-mcp
92
92
  |--------|------|
93
93
  | `list_components` | カテゴリ/クエリ/limit/offset でコンポーネントを段階的に取得（デフォルト20件。全件取得は `limit: 200`） |
94
94
  | `search_icons` | アイコン名をキーワード検索し、usage example を返す |
95
- | `get_component_api` | tagName or className で属性・スロット・イベント・CSS Parts・CSS Custom Properties を取得（`relatedComponents` を含む） |
95
+ | `get_component_api` | tagName or className で属性・スロット・イベント・CSS Parts・CSS Custom Properties を取得。`components` 配列でバッチ取得可能（最大10件） |
96
96
  | `generate_usage_snippet` | コンポーネントの最小限 HTML スニペットを生成 |
97
97
  | `get_install_recipe` | componentId・依存関係・define関数・インストールコマンドを取得 |
98
98
 
@@ -100,7 +100,26 @@ claude mcp add wcf -- npx @monoharada/wcf-mcp
100
100
 
101
101
  | ツール | 説明 |
102
102
  |--------|------|
103
- | `validate_markup` | HTML スニペットを検証し、未知要素・不正enum値・不正スロット名・必須属性欠落（error）、未知属性・トークン誤用・`aria-live`/`role="alert"` 誤用・親子関係違反・空インタラクティブ要素（warning）を検出し、`suggestion` を返す |
103
+ | `validate_markup` | HTML スニペットを検証し、セマンティック検証（下表）で `suggestion` 付き診断を返す |
104
+
105
+ #### validate_markup 検出コード一覧
106
+
107
+ | Code | Severity | 説明 | 例 |
108
+ |------|----------|------|----|
109
+ | `unknownElement` | error | CEM に未登録のカスタム要素。prefix 補完提案あり | `<input-text>` → `dads-input-text` |
110
+ | `unknownAttribute` | warning | CEM に未登録の属性 | `<dads-button foo="x">` |
111
+ | `invalidEnumValue` | error | enum 属性に不正な値 | `type="banana"` |
112
+ | `invalidSlotName` | error | CEM に未登録のスロット名 | `slot="nonexistent"` |
113
+ | `missingRequiredAttribute` | error | フォーム要素の必須属性欠落 | `<dads-input-text>` without `label` |
114
+ | `orphanedChildComponent` | warning | 親要素なしの子コンポーネント | `<dads-breadcrumb-item>` without `<dads-breadcrumb>` |
115
+ | `emptyInteractiveElement` | warning | accessible name が空の操作要素 | `<dads-button></dads-button>` |
116
+ | `canonicalLowercaseRecommendation` | warning | 大文字を含む属性名（lowercase が canonical） | `Variant="solid"` → `variant` |
117
+ | `tokenMisuse` | warning | inline style でのトークン誤用 | `color: #000` → `var(--color-*)` |
118
+ | `ariaLiveNotRecommended` | warning | `aria-live` の使用（DADS 非推奨） | `aria-live="polite"` |
119
+ | `roleAlertNotRecommended` | warning | `role="alert"` の使用（DADS 非推奨） | `role="alert"` |
120
+ | `emptyLabel` | error | 空の `label` 属性（アクセシビリティ違反） | `<dads-input-text label="">` |
121
+ | `emptyAriaLabel` | error | 空の `aria-label` 属性（アクセシビリティ違反） | `<dads-button aria-label="">` |
122
+ | `forbiddenAttribute` | warning | 禁止属性 | `placeholder` |
104
123
 
105
124
  ### UI パターン
106
125
 
@@ -109,6 +128,13 @@ claude mcp add wcf -- npx @monoharada/wcf-mcp
109
128
  | `list_patterns` | 利用可能な UI パターン（レシピ）を一覧表示 |
110
129
  | `get_pattern_recipe` | パターンの完全レシピ（必要コンポーネント・依存解決・HTML）を取得 |
111
130
  | `generate_pattern_snippet` | パターンの HTML スニペットを生成 |
131
+ | `generate_full_page_html` | HTML フラグメントを `<!DOCTYPE html>` + importmap + boot script 付きの完全ページに変換 |
132
+
133
+ ### コンポーネント選択支援
134
+
135
+ | ツール | 説明 |
136
+ |--------|------|
137
+ | `get_component_selector_guide` | カテゴリ・ユースケースでコンポーネントを選択支援（6カテゴリ: Form, Actions, Navigation, Content, Display, Layout） |
112
138
 
113
139
  ### トークン・ガイドライン検索
114
140
 
@@ -355,6 +381,60 @@ Claude Desktop 設定例:
355
381
  prefix: "myui" → dads-button → myui-button
356
382
  ```
357
383
 
384
+ ## v0.4.0 新機能
385
+
386
+ ### 新ツール
387
+ - **`generate_full_page_html`** — HTML フラグメントを完全な HTML ページに変換（importmap, boot script, tokens CSS 付き）
388
+ - **`get_component_selector_guide`** — カテゴリ・ユースケースキーワードでコンポーネント選択を支援
389
+
390
+ ### 改善
391
+ - **空ラベル検出** — `label=""` / `aria-label=""` を error として検出（`emptyLabel`, `emptyAriaLabel`）
392
+ - **属性プリフィル** — `generate_usage_snippet` で CEM デフォルト値を自動挿入
393
+ - **アイコンエイリアス** — `search_icons` で `"trash"` → `"delete"` 等のエイリアス展開
394
+ - **ガイドライン拡充** — spacing token, `::part()`, div-soup, form-validation の検索対応
395
+ - **パターンビヘイビア** — `get_pattern_recipe` に JS コード例（`behavior` フィールド）を追加
396
+ - **コンポーネントトークン参照** — `get_design_token_detail` に `componentReferencedBy` フィールド追加
397
+ - **バッチ対応** — `get_component_api` に `components` 配列パラメータ（最大10件）
398
+ - **vendor path 統一** — `setupInfo` のパスを `<dir>` プレースホルダに統一
399
+
400
+ ### Breaking Changes
401
+ - `setupInfo.vendorRuntimePath` の値が `vendor-runtime/` から `<dir>/` ベースに変更
402
+
403
+ ---
404
+
405
+ ## v0.3.0 新機能 — ランタイムセットアップ情報
406
+
407
+ v0.3.0 では、AI エージェントが CDN 非対応の vendor-local 配信モデルを正しく理解できるよう、3つのツールにランタイムセットアップ情報を追加しました。
408
+
409
+ ### `get_design_system_overview` — setupInfo 新フィールド
410
+
411
+ | フィールド | 型 | 説明 |
412
+ |-----------|-----|------|
413
+ | `noCDN` | `true` | CDN 配信が利用不可であることを示すフラグ |
414
+ | `deliveryModel` | `"vendor-local"` | 配信モデルの種別（将来拡張可能） |
415
+ | `importMapHint` | `string` | import map のパターン説明 |
416
+ | `bootScript` | `string` | boot.js の役割説明 |
417
+ | `vendorSetup` | `object` | `init`/`add`/`workflow` の2段階セットアップガイド |
418
+ | `htmlSetup` | `string` | import map + boot.js を含む完全な HTML head テンプレート |
419
+
420
+ > 既存の `htmlBoilerplate` は変更なし（後方互換性）
421
+
422
+ ### `get_install_recipe` — 新フィールド
423
+
424
+ | フィールド | 型 | 説明 |
425
+ |-----------|-----|------|
426
+ | `usageContext` | `"body-only"` | `usageSnippet` が body 用 HTML であることを明示 |
427
+ | `vendorHint` | `object` | `install`（CLI コマンド）、`importMap`（テンプレート）、`boot`（ブートスクリプト説明）。`importmap`（小文字 m）は非推奨エイリアス — v1.0 で削除予定 |
428
+
429
+ ### `get_pattern_recipe` — 新フィールド
430
+
431
+ | フィールド | 型 | 説明 |
432
+ |-----------|-----|------|
433
+ | `entryHints` | `string[]` | パターンのエントリポイント（`["boot"]` など） |
434
+ | `scaffoldHint` | `object` | `doctype`、`importMap`、`bootScript`、`noscript`、`serveOverHttp` を含むページ雛形情報 |
435
+
436
+ > `scaffoldHint.serveOverHttp` は `file://` プロトコルでの実行を防止するガイダンスです。
437
+
358
438
  ## v0.2.0 マイグレーション
359
439
 
360
440
  ### `list_components` のデフォルトページネーション変更