1仕組みと動作原理

本スキルは実行可能プログラムではなく、html-anything の「テンプレート」です。1 つのディレクトリ（SKILL.md + example.html[/example.md]）として構成され、ランタイム時に loader.ts がディスクを走査して読み込みます。新規テンプレートの追加はディレクトリの追加のみで完結し、TypeScript の変更は不要です。

next/src/lib/templates/loader.ts

Adding a template = adding a folder. No TS code change required; the API

SKILLS_DIR はアプリの cwd にある src/lib/templates/skills に固定されています。listSkills() が第 1 階層のサブディレクトリを走査し、isValidBundledId でフィルタリングした上でディレクトリごとに SKILL.md を読み込んで frontmatter をパースするため、「セレクター用メタデータ」と「生成用プロンプト本文」は同一ファイルから生成されます。

frontmatter はセレクター／API 向けのメタデータ（zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags）であり、fmToMeta() によって SkillMeta にマッピングされます。frontmatter 以降の本文がモデルに与えられる仕様となります。

next/src/lib/templates/loader.ts

zhName: fm.zh_name ?? fm.name ?? id,

id はディレクトリ名から取得されます。example のメタデータ（example_id/name/format/tagline/desc/source_url）はディレクトリ内に example.md/html が存在する場合にのみ SkillExampleMeta として生成され、本文（body）は一覧取得 API から意図的に除外されています（コメント: Body is excluded so we can return the entire registry in one cheap fetch）。

生成時、このテンプレート本文はプロンプトの本文として扱われます。/api/convert が assemblePrompt() を使用して「グローバルデザイン指示 + 本テンプレート本文 + ユーザーコンテンツ」を 1 つのプロンプトに結合し、ホストのローカル agent CLI に渡して HTML を stdout 経由でストリーミング取得します。

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

同ルートには editFromHtml/editFromContent による「差分最小化編集」の分岐も存在します。このパイプラインにおいてテンプレート本文は単なる文字列であり、評価や実行は行われません。

テンプレート本文の前にはグローバル共通指示（SHARED_DESIGN_DIRECTIVES）が付与され、技術およびコンテンツの規律が各テンプレートの前に統一的に適用されます。サンプル HTML で広く見られる CDN やフォントの外部リンクはこれに起因します（ホストシェルによる注入であり、テンプレート自体の要件ではありません）。

next/src/lib/templates/shared.ts

通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。

テンプレート本文はスタイル、レイアウト、コンポーネントのみを担当し、これらの厳格な要件を重複して記述しません。評価判定はテンプレート自身のディレクトリのみを対象とし、このエンドポイントはホストシェルの挙動であるため security.reason に自己証明として記載しています。

生成物は stdout のテキストとして返却されます。グローバル指示によりエージェントによるファイルシステム操作は明示的に禁止されており、ディスクへの書き込みはフロントエンドが担当します。したがって、テンプレートディレクトリにはスクリプトもディスク書き込み能力も存在しません。

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。

原文の継続文では「HTML をいかなる .html ファイルにも書き込まないこと……フロントエンドが stdout テキストを直接キャプチャし、ファイルのディスク書き込みはフロントエンドが担当する」と規定されています。成果物は最終的にフロントエンド側でタスク記録に保存およびエクスポートされます。

example.html はパッケージに同梱された事前レンダリング済みのサンプルです。/api/templates/<id>/preview は iframe（セレクター内インラインプレビュー用）に text/html としてそのまま返却し、/api/templates/<id>/example は example.md と example.html をセットで返却します。

next/src/app/api/templates/[id]/preview/route.ts

return new Response(skill.exampleHtml, {

サンプルはプレビューおよびドキュメント用途に限定され、生成プロンプトには関与しません（生成には SKILL.md 本文のみが使用されます）。そのため、サンプルの外部リンクはテンプレート自体の機能境界に影響を与えません。

本文では「手描きワイヤーフレーム」を、方眼紙（graph-paper）背景、マルチタブのバリアントラベル、落書き風（scribble）チャートのプレースホルダー + 斜線ハッチング塗り、わずかに回転した黄色の付箋（sticky note）の 4 要素として定義しています。

next/src/lib/templates/skills/wireframe-sketch/SKILL.md

- Graph-paper 背景

対応する記述は「- multi-tab labels (variants 标签)」「- scribbled chart placeholders + hatched fills」「- Sticky-note annotations (黄色, 旋转一点点)」です。

方眼紙（graph-paper）背景は、画像テクスチャを使用せず、2 組の repeating-linear-gradient の重ね合わせ（24px グリッド）によって実現されています。

next/src/lib/templates/skills/wireframe-sketch/example.html

repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 24px),

これは「低忠実度（ローファイ）」の重要な要素です。グリッドは装飾ではなく構造線として機能し、本文の「ホワイトボード／ドラフト前段階」という位置付けと一致しています。

「几帳面に整列させない」という方針は、多数の微小な回転として数値化されています。タグの rotate(-2.2deg)、タブの rotate(-0.4deg)、付箋の rotate(2.4deg)/(-3.2deg)、各 KPI カードの傾き（tilt）などです。

next/src/lib/templates/skills/wireframe-sketch/example.html

.sticky.sn1 { top: 20px; right: 30px; background: var(--note-yellow); transform: rotate(2.4deg); }

本文の該当箇所は「- 字体: Caveat / Architects Daughter; 不要规规矩矩的对齐」であり、サンプルでは「不揃いさ」を 0.2〜3.2 度の体系的な回転スペクトラムとして実装しています。

手書きフォントは、サンプル内では Caveat + Patrick Hand の組み合わせ（および DM Serif Display / IBM Plex Mono）として実装されており、本文で指定されている Architects Daughter は使用されていません。

next/src/lib/templates/skills/wireframe-sketch/example.html

--hand-bold: 'Caveat', 'Patrick Hand', cursive;

本文には「Caveat / Architects Daughter」と記載されていますが、サンプルで実際に読み込まれているのは Caveat + Patrick Hand です。同系統（いずれも手書きフォント）の置き換えであり、確認表に記録されています。

チャートのプレースホルダーはインライン SVG の「落書き」パス（.panel svg.scribble）を採用しており、グローバル指示の「CSS / SVG インライン描画を優先」に準拠しています。

next/src/lib/templates/skills/wireframe-sketch/example.html

.panel svg.scribble { width: 100%; height: 160px; display: block; }

サンプルには .kpi.tilt-1..4 による微小な傾きや .pin 破線ラベルも含まれており、全体として「未完成感」を持たせる一貫した構造になっています。

CLI 側にはキーワード直接マッチングのルートも存在します。skills-matcher.ts がユーザーコンテンツ内のキーワードを該当テンプレート ID に直接マッピングし、ヒット時に confidence = ヒット数 × 2 + 3 を付与します。閾値 3 に達した場合はローカルルールが適用され、モデルによるテンプレート選択はスキップされます。

cli/src/skills-matcher.ts

[["原型", "prototype", "线框", "wireframe", "mockup", "低保真", "sketch", "手绘"], "prototype-web"],

注意：STRONG_SIGNALS において wireframe / 线框 / sketch / 手绘は本テンプレートではなく prototype-web に紐付けられています。そのため本テンプレートは強シグナル経由では到達できず、fallbackMatch（タグの wireframe/lo-fi/sketch/草稿/手绘ヒットごとに +3 点）またはセレクターからの手動選択でのみマッチします。これは他の 8 つのテンプレートとの実質的な差異であり、確認表に記録されています。

CLI のフォールバックマッチングで使用される閾値定数：コンテンツ長が 60 文字を超えている場合のみ AI 要約マッチングが有効化されます。強シグナルの閾値は 3 です。

cli/src/skills-matcher.ts

const MIN_CONTENT_LENGTH_FOR_AI = 60;

その他にテンプレートの scenario に応じてキーワードに重み付けを行う SCENARIO_SIGNALS や、tags/zhName/description でスコアリングする fallbackMatch があり、両レイヤーとも不一致の場合にのみエージェントを呼び出して要約マッチングを行います。

ホストシェルは sandbox="allow-scripts allow-same-origin" を設定した iframe を使用してサンプル／生成物をレンダリングします（スクリプト実行および同一オリジンを許可）。これは製品シェルの仕様上のトレードオフであり、リスクとして記載されていますが、本スキルの評価判定には影響しません。

next/src/components/template-picker.tsx

sandbox="allow-scripts allow-same-origin"

preview-pane.tsx / deck-viewer.tsx も同様の実装です。サンプル HTML 内のインライン JS はブラウザプレビュー時にのみ実行され、スキル自体はスクリプトを一切実行しません。

2コア機能

01方眼紙（Graph-paper）背景（CSS グリッド線、テクスチャ画像なし）

02マルチタブのバリアントラベル（アクティブ時のハイライト + 傾斜）

03落書き風（scribble）チャートのプレースホルダー（インライン SVG）

04付箋（Sticky note）による注釈（黄／ピンク、回転付き）

05手書きフォントと「不揃い」な配置ルール

06低忠実度 KPI カード（それぞれわずかな傾き付き）

3外部依存関係

Kind	Dependency / Endpoint
network	Google Fonts（Caveat / Patrick Hand / DM Serif Display / IBM Plex Mono）
network	Google Fonts 静态资源域（preconnect）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

自動ロード可能

管理者向け

ソースとバージョンの記録

判定根拠（ファイルパスと抜粋）

SKILL.md: 純粋なプロンプト指示およびルールテキストであり、スクリプト実行や外部影響は一切なし

監査ノート： 判定対象＝本スキルディレクトリ（next/src/lib/templates/skills/wireframe-sketch/）。全ファイルを精査した結果、スクリプト実行ゼロ、認証情報の読み取りゼロ、ディスク書き込みゼロを確認。ディレクトリ内に存在するエンドポイントは Google Fonts（Caveat / Patrick Hand / DM Serif Display / IBM Plex Mono）および Google Fonts 静的アセットドメイン（preconnect）のみであり、すべて「生成物サンプル」である example.html 内に閉じています。SKILL.md 本文はレイアウト、スタイル、フォントファミリー名のみを規定しており、ランタイム時の外部インターフェースは一切指定されていないため、純粋な指示テンプレート＝green と判定します。ホスト側の補足（判定対象外）：html-anything 製品シェルは assemblePrompt() を介して本文をプロンプトに組み込み、ローカル agent CLI を spawn して cdn.tailwindcss.com + Google Fonts の要件を注入します（next/src/lib/templates/shared.ts）。また、プレビュー用 iframe には sandbox="allow-scripts allow-same-origin" が使用されています（next/src/components/template-picker.tsx）。

5二重目の独立検証

[ok] skill 目录文件清单 — find 得 SKILL.md + example.html，无 scripts/references。
[ok] 无脚本执行 — grep -c "<script" example.html = 0；SKILL.md 无脚本指令。
[ok] 外部端点仅字体 — example.html 仅 fonts.googleapis.com css2 与 fonts.gstatic.com preconnect；SKILL.md 正文无 URL。
[discrepancy] 正文字体 vs 示例字体 — SKILL.md 写「字体: Caveat / Architects Daughter」，example.html 实际加载 Caveat + Patrick Hand（--hand: 'Patrick Hand', 'Caveat' / --hand-bold 反之），未出现 Architects Daughter。
[discrepancy] CLI 强信号是否覆盖本模板 — cli/src/skills-matcher.ts 中 wireframe/线框/sketch/手绘的关键词行映射到 "prototype-web"（第 35 行），全套 STRONG_SIGNALS 无 wireframe-sketch 行；本模板仅能通过 fallbackMatch（tags 命中 +3/条）或手选命中。
[ok] graph-paper 与 sticky note 是否落地 — 两处 repeating-linear-gradient(…1px 24px) 构成网格；.sticky.sn1/sn2 用 --note-yellow/--note-pink 并带 rotate(2.4deg)/(-3.2deg)。
[ok] 判级 green 自证 — 目录零脚本文件、零凭证、零写盘；正文无运行时接口，端点仅见示例 → green。
[ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文「网格背景 + marker 笔触 + 多 tab + sticky note + scribble 图表」。

6結論

実用的な低忠実度表現：グリッド線 + 破線ピン + 落書き + 回転スペクトラムにより、グレースケール単体に依存せず「未完成感」を演出

バリアント検討に最適：マルチタブラベルにより同一画面上で複数案を並行提示でき、「ドラフト前段階」の用途に適合

スクリプト不要の完全静的構成：オフライン閲覧や一括スクリーンショット比較が可能で、レンダリング負荷が極めて低い

ツールチェーン全体との整合性：落書き風チャートにインライン SVG を採用し、サードパーティ製チャートライブラリに依存しない

最適な用途： ホワイトボード／ドラフト前段階における複数案のワイヤーフレーム検討、デザインレビュー前の論点整理、「ピクセルより先に構造を確認したい」ユースケースに最適です。キーワードの自動ルーティングに依存せず、セレクターから手動で選択することを推奨します。

不向きな用途： 外部への直接公開には不向きです（低忠実度であること自体がデザイン特性のため）。ピクセル単位の正確さやデザインシステムのトークンを必要とする納品には適しません。自動ルーティングによるマッチングを期待するパイプラインには適しません（強シグナルが prototype-web に割り当てられているため）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload wireframe-sketch.tar.gz

sha256: 40e72150a36c51da…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.