Skill.md検索

画面のUI要件を入力すると、Web Component Framework（WCF）で実装するのに必要な「最小コンポーネント構成」を自動で提案します。 必要なコンポーネントID・依存関係・パターンを、レジストリ（部品カタログ）から自動検索して、JSON形式で構造化して返します。 要件の「状態」（ローディング中・エラー・空・デフォルト）が不足していれば自動で補完し、何を補完したかを記録します。 曖昧な要件には「これについて確認したいこと」を明示し、実装前の齟齬を減らします。 WCFを使ったコンポーネント設計・実装を行うフロントエンド開発者 新しい画面を設計する際に「どのコンポーネントを組み合わせるか」を効率的に決めたい設計者 インストール前に最小構成を確認して、作業スコープを明確にしたい開発チームリーダー 入力：screen_goal、target_user、states（loading/error/empty/default最低）。出力契約は「人間向けMarkdown説明 + 機械可読JSON」。JSONに含まれる：componentIds（該当する部品）、dependencyIds（依存する部品）、patternIds（再利用パターン）、assumptions（補完した仮定）、openQuestions（曖昧な点）。情報源優先度は install-registry.json → pattern-registry.json → custom-elements.json/MCP。手順：(1)要件を「入力・操作・出力・状態」に分解 → (2)registry から候補抽出 → (3)不足分を MCP/CEM で補完 → (4)dependencies 展開 → (5)JSON 契約で返す。MCPが使えない場合は registry と custom-elements.json のみで候補返却。

画面要件からコンポーネント選定まで自動化: 要件テキストから必要なコンポーネント・依存関係・デザインパターンを抽出し、componentIds・dependencyIds・patternIdsを確定 導入コマンドを確定・実行: 選定したコンポーネントに対し、wcf init・wcf vendor addなどのインストールコマンドを自動生成。手作業なしで環境構築が完了 HTMLコード自動生成: default（通常表示）・loading（読込中）・error（エラー）・empty（空状態）の4パターンを含むHTMLスニペットを一括生成 完成度を自動検証: 未対応のカスタム要素（unknownElement）をゼロにするまで修正提案を繰り返し、検証ゲートをクリア 4つのスキルをオーケストレーション: wcf-discovery→wcf-install→wcf-compose→wcf-validateを順番に実行。迷わず最後まで完了できる フロントエンド開発者: Web Componentベースの画面を素早くプロトタイプしたい UIデザイナー: 要件から実装まで、デザインパターンを自動で適用したい 新人エンジニア: wcfツールの使い方を学びながら、実際の画面を構築したい プロジェクトリード: チームの画面構築をテンプレート化・標準化したい wcf-discovery・wcf-install・wcf-compose・wcf-validateを順序立てて実行し、Web Component画面構築を完了させるオーケストレーションスキル。ワークフローは、(1)wcf-discoveryで要件からcomponentIds・dependencyIds・patternIdsを確定、(2)wcf-installでwcf init・wcf vendor addコマンドを確定、(3)wcf-composeでdefault/loading/error/emptyを含むhtmlSnippetを作成、(4)wcf-validateでunknownElementを0にするまで修正。各スキルは人間向けMarkdown要約とJSON（機械可読）を返す。Discovery出力のcomponentIdsはInstall入力に直結、InstallのinstallOrderとpostChecksはCompose/Validateの前提に使用、ComposeのhtmlSnippetはValidate入力htmlに直結。MCPが使えない場合はregistry/install-registry.jsonとcustom-elements.jsonベースにフォールバック。エラーカテゴリは*_MCP_UNAVAILABLE・*_REGISTRY_UNAVAILABLE・*_PREFIX_MISMATCH・*_INSUFFICIENT_INPUT。品質ゲートは日常時npm run validate:wc / npm run agents:pre-pr、PR前npm run agents:verify。