ドキュメント&知識ベース · nexu-io/html-anything

doc-kami-parchment

温かみのある羊皮紙の背景 (#f5f4ed) + 墨紺の単色アクセント (#1B365D) + 単一セリフ体による、エディトリアル級の組版。

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE = Apache License 2.0;GitHub API license.spdx_id = Apache-2.0;next/package.json 亦声明 Apache-2.0)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

この skill は実行可能プログラムではなく、「1ディレクトリ = 1テンプレート」の構成をとっています。SKILL.md の frontmatter はセレクター表示用であり、本文(body)はモデルに送信されるプロンプトそのものです。テンプレートの追加はディレクトリの追加と同義であり、TypeScript の改修は不要です。

next/src/lib/templates/loader.ts
routes rescan disk and the client refetches `/api/templates`.
同一ファイルの先頭コメントにディレクトリ規約が明記されています:SKILL.md(frontmatter + prompt body)/ example.md(任意の入力例)/ example.html(任意のプレビュー)。本 skill ディレクトリもまさにこの構造に従っています。

実際に発行されるプロンプトは、プラットフォーム共有デザイン指示(SHARED_DESIGN_DIRECTIVES)+ 本 skill の SKILL.md 本文 + ユーザーコンテンツを assemblePrompt により1本のプロンプトへ結合したものです。

next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
したがって、本 skill の本文は「レイアウト/スタイル/コンポーネントライブラリ」の部分のみを担当します。出力規律(単一ファイル HTML、実データの使用必須、コンテンツ駆動型の分量)は共有指示に由来するため、テンプレート作成者が重複して宣言する必要はありません。

完成稿はファイルシステムを経由しません。共有指示により Write/Edit/Bash などのファイル操作ツールの使用が明示的に禁止されており、モデルは HTML 全体を応答本文として直接ストリーミング出力することが求められます(stdout はフロントエンド側でキャプチャされ保存されます)。

next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
これが「skill 自体によるディスク書き込みゼロ」の仕組みの根拠です。ファイルを書き出すのはホスト側のフロントエンドであり、skill ではありません。また、本ディレクトリ内にはスクリプトが一切存在しません。

本バッチ内で「最も制約が厳しい」テンプレートです。SKILL.md の「厳格なビジュアルシグネチャ — 変更不可」セクションにおいて、キャンバス、インク色、唯一のアクセントカラー、フォント、行高、禁止事項が完全に固定されています。

next/src/lib/templates/skills/doc-kami-parchment/SKILL.md
- **画布**: 暖羊皮纸 `#f5f4ed` (永远不用纯白 `#fff`)。次级背景 `#efeee5`。
同セクションでは本文色 #1f1d18、副次テキスト色 #6b665b、唯一のアクセント色である墨紺 #1B365D が規定されています。drop-shadow、blur、8px以上の角丸、グラデーション、ネオン、rgba は禁止されています。これにより「エディトリアル級の組版」が機械的に検証可能なルールセットへと落とし込まれ、モデルの自由度は主にコンテンツの構成に割り当てられます。

単色アクセントの規律は検証可能な命題として記述されています。すべてのアクセントには単一の墨紺のみを使用し、多色の使用は厳禁とされています。

next/src/lib/templates/skills/doc-kami-parchment/SKILL.md
- **唯一色彩**: 墨蓝 `#1B365D` ——所有 accent (链接、tag 描边、重点数字、引用左 rule) 只能用这一个色, 严禁多色。
遵守すべき実例:ink-blue はキーワードとタグ(`.ink-blue { color: #1B365D; }`)にのみ適用され、それ以外の階層表現はフォントサイズ、セリフ、余白の対比のみに依存します。これは原版テンプレートの「No hard drop shadows / 色ではなくコントラストに頼る」という思想そのものです。

脱ダッシュボードの志向性がデザイン指針に明記されており、代替手法(影の代わりにヘアラインボーダーを使用)が提示されています。

next/src/lib/templates/skills/doc-kami-parchment/SKILL.md
- "Composed pages, not dashboards." 不要堆 KPI 卡, 不要堆 emoji 图标, 不要 hero gradient。
同パラグラフでは肯定的な代替案が示されています:「Ring or whisper only, no hard drop shadows.」影は `0 0 0 1px #d4d1c5` のヘアラインのみ許可されます。これは本リポジトリ内でも珍しい「禁止事項と代替案をセットで提示する」記述手法です。

文書タイプに応じた8種類のレイアウト骨格(One-Pager / Long Doc / Letter / Portfolio / Resume / Slides / Equity Report / Changelog)を用意し、単一の固定レイアウトではなくユーザーの入力内容に応じて適切なものを選択します。

next/src/lib/templates/skills/doc-kami-parchment/SKILL.md
- **One-Pager** — 顶 logotype (Charter italic) + 标题 + lede + 3 列要点 + 底脚 metadata。
同セクション内の Slides タイプでも「スライド枚数は【ユーザーコンテンツ】によって決定される(短い内容で6ページ以上、長い内容ではそれ以上)」と明記されており、コンテンツ駆動型の分量設計が具体的な文書タイプに反映されています。

完成稿の技術的制約が本テンプレート内で再宣言されています:単一ファイル HTML、Tailwind CDN の利用、外部画像リンクの不使用、プレースホルダーは色ブロック+1pxの墨色ボーダーで構成すること。

next/src/lib/templates/skills/doc-kami-parchment/SKILL.md
- 单文件 HTML, 用 Tailwind CDN; 全文中英混排时加盘古之白; 不要外链图片, 占位用 paper-tint 色块 + 1px ink 描边。
これは本バッチの9テンプレートの中で唯一 SKILL.md 内で Tailwind CDN を名指ししている項目であり、本 skill において予測可能な外部通信が発生する唯一の要因です(security.reason 参照)。サンプルの example.html でも実際に cdn.tailwindcss.com を読み込んでいます。

完成稿サンプル自体が「組版された紙面」のような one-pager となっています:folio トップバー + kicker + 大見出し + 3列の pillar + フッターで構成され、すべて Tailwind クラスと4つのカラーコードのみで表現されています。

next/src/lib/templates/skills/doc-kami-parchment/example.html
<span>KAMI · Open Design</span>
サンプルは 4.3KB で、画像やスクリプトは含まれていません(Tailwind CDN の script のみ)。example.md は対になる入力サンプル(Open Design Studio Issue №26)であり、「Markdown を入力すると羊皮紙の1ページが出力される」というユースケースを示しています。

サーバー側の /api/convert が行うのは3つの処理のみです:templateId に基づきディスクから skill を読み込み、プロンプトを組み立て、ローカルの agent CLI を spawn して出力を SSE ストリームで転送します。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
同ファイル内ではまず `const skill = loadSkill(templateId);` を実行し(該当テンプレートがない場合は 400 を返却)、その後に invokeAgent へ渡します。skill ディレクトリ自体がプロセスを起動したり、ネットワーク通信を行ったりすることはありません。

2コア機能

01one-pager、長編レポート、書簡、履歴書、決算報告、changelog、ポートフォリオを網羅する、厳格な組版の羊皮紙ドキュメントシステム
02単色の規律:唯一のアクセントカラーに墨紺 #1B365D を採用し、フォントサイズとセリフの対比によって階層を表現
03温かみのある羊皮紙キャンバス #f5f4ed と、影の代わりとなるヘアラインボーダー
04コンテンツに応じて選択可能な8種類の文書レイアウト(3列要点の one-pager を含む)
05中英混植の細部設計:言語ごとに単一のセリフ体を指定、盤古の白(和欧文間スペース)を挿入、中国語フォントには Noto Serif SC をフォールバック設定
06Markdown から文書への変換フローを示す入力サンプルを同梱

3外部依存関係

KindDependency / Endpoint
networkTailwind CDN(SKILL.md 明令成稿引入;静态样式,不传数据、不需凭证)
networkGoogle Fonts(样例成稿的字体来源;离线回落本地衬线)
packageWeasyPrint(SKILL.md 提及的打印/PDF 渲染器名——决定「用 solid hex 不用 rgba」的设计取舍)

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: スクリプトの実行や外部への影響を伴わない、純粋なプロンプト指示および規則テキストのみで構成されています。
監査ノート: 審査対象 = skill 自身のディレクトリ(SKILL.md + example.html + example.md):スクリプトなし、クレデンシャル読み取りなし、ディスク書き込み指示なし、実行時ネットワーク呼び出しコードなし。バッチ4最終規則に基づき、「成果物による参照」と「実行時外部通信」は分離して判定します。SKILL.md 末尾の【デザイン指針】に記載された Tailwind CDN は**成果物における参照**に該当します。これは生成された HTML 内に埋め込まれ、ブラウザで完成稿を開いた際に取得されるものであり、skill の実行時には一切の外部通信は発生しません。また、当該エンドポイントは静的なスタイルシート/フォントを提供するのみで、ユーザー素材の送信、サービスバックエンドへの問い合わせ、アカウント枠の消費、認証情報の読み取りは行わないため、**安全評価の引き下げ対象外**(green を維持)とします。ディレクトリ内に出現するエンドポイントの実情検証:① https://cdn.tailwindcss.com(SKILL.md デザイン指針末尾 + example.html 6行目 <script>);② https://fonts.googleapis.com(example.html の Source Serif Pro / Noto Serif SC / IBM Plex Mono フォントリンク);③ https://github.com/tw93/kami(frontmatter の example_source_url、出所表記のみであり呼び出しなし)。ホスト側の留意事項(情報提供のみ、判定対象外):共有指示による成果物 CDN 参照要求、プレビュー iframe での sandbox="allow-scripts allow-same-origin" の使用、ローカル agent CLI のプロセス起動。リスク面において、orange 要件(ユーザー素材の外部生成/サービスバックエンドへの送信)および red 要件(リバースエンジニアリング/なりすまし/セキュリティ回避/保護機能低下)の該当はありません。

5二重目の独立検証

  • [ok] 「暖羊皮纸 #f5f4ed(永远不用纯白 #fff)」 — 样例 body background: #f5f4ed;全文无 #fff 背景(tag 用 #efeee5)。
  • [ok] 「唯一色彩墨蓝 #1B365D,严禁多色」 — 样例彩色只有 #1B365D(.ink-blue 与 tag 文字),其余为纸色/墨色/中性灰。
  • [discrepancy] 「一种语言一种衬线(Charter / Source Serif Pro / Noto Serif SC)」 — SKILL.md 首选英文衬线是 Charter(fallback: Source Serif Pro),样例直接用 fallback 族名 'Source Serif Pro' 作主字体——符合「允许 fallback」的字面,但成稿与首选有差;且未加载 Charter。
  • [discrepancy] 「绝不:drop-shadow / 圆角 ≥ 8px / 渐变 / rgba」 — 样例未用 drop-shadow/渐变/圆角,但正文段落用 style="color:#3a382f" 引入了 SKILL.md 墨色清单外的第四种文字色(清单只给 #1f1d18 主文与 #6b665b 次文);属轻微越界,不影响单色 accent 纪律。
  • [ok] 成稿运行时外链(Tailwind CDN) — SKILL.md 明写「用 Tailwind CDN」,example.html 确有 <script src="https://cdn.tailwindcss.com"></script>;已在 external_deps 与 security.reason 逐条自证。
  • [ok] 带 example.md 输入样例 — example.md 为 Open Design Studio Issue №26 的 markdown,与 example.html 内容一一对应(Berlin 坐标、Apache 2.0、四支柱)。
  • [ok] 出处标注真实(非虚构来源) — frontmatter example_source_url = https://github.com/tw93/kami;README 第 490 行「模板来源」表同样映射 doc-kami-parchment ← tw93/kami,两处一致。

6結論

  • 機械的に検証可能なスタイル規律:色値、フォント、行高、禁止事項が完全に列挙されており、出力結果のスタイル再現性が高く、「モデルの気まぐれな感性」に依存しません。
  • 閲覧に特化した設計:温かみのある紙色 + 単色アクセント + セリフ体の階層構成により、長文を通読する際の負担が純白のダッシュボードに比べて大幅に軽減されます。
  • 幅広い文書タイプへの対応(8つの骨格):1つのテンプレートで one-pager、長編レポート、書簡、履歴書、決算書、changelog に対応可能です。
  • 印刷・紙面志向:WeasyPrint のレンダリング能力に基づき明確な取捨選択(rgba ではなく solid hex を使用)がなされており、印刷や PDF 出力時の挙動が極めて安定的です。
  • 透明な出所:tw93/kami からの派生であることが frontmatter と README の双方に明記されており、剽窃ではなく公開リソースに基づく二次創作であることが保証されています。
  • 最適な用途: フォーマルな長文や公式文書に最適:ホワイトペーパーや調査レポートの one-pager、投資覚書、書簡、履歴書、changelog、財務要約レポートなど。印刷や PDF 配布を前提とし、「Web サイト感」ではなく「紙の質感」を求める用途。節度ある統一的な文書テンプレートを求めるブランドチームに最適です。
    不向きな用途: ダッシュボードや KPI カードの一覧表示、マーケティング用ランディングページ、多彩な色彩やイラストを必要とするプロダクトページ(禁止事項に抵触するため不適)。インタラクションやアニメーションを伴う用途(スクリプト・影の禁止)。カラーグラフを多用する財務ビジュアライゼーション(単色の SVG 折れ線グラフのみ許容)。および、ルール量が膨大で生成コストが高くなるため、素早い下書きの作成には適していません。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload doc-kami-parchment.tar.gz
    sha256: 8d42d07c1757e428…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.