ドキュメント&知識ベース · dontbesilent2025/dbskill

dbs-wechat-html

Markdown を WeChat 公式アカウント(微信公众号)の管理画面へ直接貼り付け可能な HTML に変換し、15 種類の組み込みスタイルを提供します。ユーザーが公式アカウント用 HTML の生成、WeChat 版の作成、または記事の組版・レイアウトを求めた際に使用されます。

L2 ローカル · 作業ディレクトリ限定V1 コミット固定ファイル書き込みDual-pass Audit
Author dontbesilent2025GitHub dontbesilent2025/dbskill ↗Stars 10121License CC BY-NC 4.0(非商业授权):仓库根 LICENSE 为 Attribution-NonCommercial 4.0 International (CC BY-NC 4.0),Copyright (c) 2026 dontbesilent;GitHub API license.spdx_id = NOASSERTION (CC BY-NC 4.0 非 SPDX 标准文本,GitHub 无法自动识别),不得用于商业用途Commit 8b8e33f1ec
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

スキル全体が「モデルをトランスフォーマーとして扱う」設計:スクリプトを書かず、極めて詳細な変換ルールと外部スタイル定義ライブラリのみで Markdown を貼り付け可能な HTML に変換します。

skills/dbs-wechat-html/SKILL.md
执行前必须读取 `templates/styles.md`,按里面的 style id、别名、适用场景和 CSS 生成。样式库中的 CSS 是设计源,生成时必须按本文件的「微信粘贴兼容性」规则展开到具体 HTML 元素。
197 行のスタイルライブラリが 15 種の CSS を定義し、SKILL.md が各要素への CSS 展開および公式アカウント貼り付け互換性ルールの適用を担います。

ブラウザのコピー操作で <head> や外側コンテナが欠落し、公式アカウント管理画面で再サニタイズされる前提に基づき、すべての可視スタイルを各要素へインライン展開します。

skills/dbs-wechat-html/SKILL.md
正式交付 HTML 禁止使用:
禁止事項:<style> タグ、class/id セレクタ、:before/:after、外部 CSS/フォント/画像/スクリプト、最外層コンテナに依存する継承スタイル、hover/アニメーション/position:fixed、JavaScript。

変換は 2 段階で実行:まず Markdown→HTML の構造マッピングを行い、次に「インラインスタイル展開」を実施して <style>/class/id/擬似要素を削除します。

skills/dbs-wechat-html/SKILL.md
2. 把选择器中的属性写到每个匹配的可见元素上。
展開段階では background の単色値を background-color に正規化し、各要素が「独立かつ完全な貼り付けスタイル」を備えているかを順次確認します。

公式アカウント特有のタイトル重複をデフォルトで排除:原稿の最初の h1 見出しは <head><title> にのみ格納し、本文中の <h1> としてはレンダリングしません。

skills/dbs-wechat-html/SKILL.md
- 不把这个一级标题渲染为 `<body>` 中的 `<h1>`;
以降の h1 見出しは本文が再び <h1> から始まるのを防ぐため <h2> に降格させます。ユーザーが明示的に求めた場合のみ先頭見出しを本文に含めます。

スタイル選択には 3 つのエントリポイントを用意:自然言語マッピング表(15 種)、パラメータ(--style/--recommend/--preview/--all)、未指定時の 4 択フォローアップ質問。

skills/dbs-wechat-html/SKILL.md
| `--preview` | 生成 6 个推荐风格 + 总览页 |
パラメータの優先度が最も高く、デフォルトのおすすめ 6 スタイルは minimal/medium/stripe/wired/ft/course です。

Markdown 変換における明確な割り切り:表は <table>(公式アカウントの互換性が低いため)ではなくリストに変換、画像は埋め込まずプレースホルダーを維持、強制改行は <br> に変換せず、段落末尾の中国語句点(。)は削除します。

skills/dbs-wechat-html/SKILL.md
8. 表格不直接生成 `<table>`,微信公众号兼容性差。优先转换为列表。
その他の詳細:連続するリスト項目は単一の <ul> に統合、HTML 特殊文字は要エスケープ、リンクはテキストのまま維持、コードブロックは <pre><code> に変換しスタイルに応じた pre CSS を付与。

納品前に 9 項目の静的チェックを実施し、実行可能な検証コマンドを提供(rg 実行時に出力がないこと)。

skills/dbs-wechat-html/SKILL.md
rg -n '<style|class=|id=|:before|:after|<script|https?://|@import' "输出文件.html"
検証項目:<style> なし、class/id なし、擬似要素/スクリプト/外部リンク/@import なし、各可視要素に style あり、段落が独立して font-size/line-height/color を保持、リスト項目に style あり、HTML 構造検証、デフォルトモードで body に先頭見出しが含まれないこと。

出力先と命名規則の標準化:元ファイルと同階層の 公众号HTML输出/ に書き出し、ファイル名に style id とスタイル名を含め、複数スタイルの場合は一覧ページとスタイル目録を添付します。

skills/dbs-wechat-html/SKILL.md
文件名:`原文件名_style-id_风格名_微信公众号版.html`
Markdown が直接貼り付けられた場合は現在の作業ディレクトリに出力し、デフォルトのベース名を「公众号文章」とします。一覧ページ 00_公众号HTML风格总览.html のみ(ローカルプレビュー用として)<style>/class の使用が許可されます。

明確なブランドおよび通信境界:フォント/CSS/画像/スクリプトの外部ネットワーク読み込みを行わず、参照元メディアのブランド資産を複製せず、レイアウトのパラダイムのみを取り入れます。

skills/dbs-wechat-html/SKILL.md
- 不要把来源媒体的品牌资产、logo、专有视觉原样复制进 HTML。这里只借鉴排版范式。
「カード型レイアウト」ツールとの違い:商標や著作権の問題を回避するため、各スタイルをポータブルな組版パラダイムとして分解して適用しています。

2コア機能

01Markdown → WeChat 公式アカウント用 HTML 変換(構造マッピング + インラインスタイル展開)
0215 種類の組み込みスタイル(minimal/medium/wired/verge/stripe/apple/ft/linear/github/notion/magazine/editorial/newspaper/course/event)
033 つの生成規模:単一スタイル / 推奨 6 種(--preview)/ 全 15 種(--all)
04自然言語 → style id マッピング(15 種、複数一致時はより具体的なものを採用)
05WeChat 公式アカウント貼り付け互換性ルール(style/class/擬似要素/JS/外部リンク禁止、インラインスタイル必須)
06タイトル重複のデフォルト防止(先頭見出しは <title> のみ、以降の h1 は h2 に降格)
07納品前静的チェック + 実行可能な検証コマンド(xmllint / rg)
08複数スタイル一覧ページおよびスタイル目録(比較選択後のコピーを容易化)
09標準化された出力ディレクトリ/命名規則とユーザー操作ガイド(Cmd+A/C/V 貼り付けフロー)

3外部依存関係

KindDependency / Endpoint
clixmllint(可选的 HTML 结构校验;缺失时用等价工具)
clirg(可选:扫描 style/class/伪元素/脚本/外链等违规项)

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

安全運用のための推奨統制措置
Agent 向け
作業ディレクトリを限定
管理者向け
操作ログを保持
判定根拠(ファイルパスと抜粋)
  • 本地工作目录: ファイル読み書きと成果物出力: 元 Markdown と同階層の 公众号HTML输出/ ディレクトリに HTML ファイルを生成(ファイル名に style id とスタイル名を含む)
監査ノート: 本スキルのディレクトリ内挙動に基づく判定理由(自己証明可能):スクリプトなし、外部通信なし(外部フォント/CSS/画像/スクリプトを読み込まず、文書内の URL/フォント/CDN 表記はすべて「ネットワーク読み込み禁止」「使用禁止」などの制約事項およびローカル検証コマンド内に限定され、実際の外部リクエストは皆無)、クレデンシャル読み取りなし。ただし納品時に必ずユーザーディレクトリへ書き込み(公众号HTML输出/*.html、00_公众号HTML风格总览.html、风格目录.md)を行いプレビューを開くため、「ローカルスクリプト/CLI およびローカル読み書きのみ、外部送信なし」に該当し、バッチ4確定基準およびサイト内先例(canvas-design / dbs-decision 等のローカル読み書き系)に従い 🟢 ではなく 🔵 と判定。

5二重目の独立検証

  • [ok] 目录仅 3 个文件、无脚本可执行 — find skills/dbs-wechat-html -type f 返回 SKILL.md、agents/openai.yaml、templates/styles.md。
  • [ok] 无网络外发(不加载外部字体/CSS/图片/脚本) — 全文 URL/字体/CDN 相关命中均为禁止条款与本地校验示例;无 fetch/curl/http 请求指令。
  • [ok] 15 个风格 id 与样式库条目一一对应 — SKILL.md 风格表 15 项与 styles.md 的「01 minimal … 15 event」15 个小节完全对齐。
  • [ok] 粘贴兼容性规则与实际检查项一致 — "禁止 <style>/class/id/伪元素/JS/外链"与静态检查 1–3 条、rg 扫描表达式互相覆盖。
  • [ok] "执行前必须读取 templates/styles.md"确有对应资产 — 样式库文件存在(197 行),开头自述为样式权威来源。
  • [ok] 无凭证读取 / 无远程调用 — 全文无 env/API_KEY/token/keychain 类指令,也无任何外部服务调用。
  • [ok] 写盘范围是否被夸大或漏记 — SKILL.md 明确输出目录、文件名规则与总览页/风格目录三处产物,已如实记入 file_writes(含用户直接贴 Markdown 时改用当前工作目录)。
  • [ok] "不复制品牌资产"的边界声明 — 注意事项原文存在;属设计纪律,已在 traits/risks 中如实标注为"范式相似仍可能联想"。

6結論

  • 実際のコピー動作の制約から逆算した設計:「ブラウザによる <head> 欠落」と「公式アカウントによる再サニタイズ」を見越し、全要素へのインラインスタイルを徹底することで貼り付け成功率を大幅に向上。
  • 15 種類のスタイルを監査可能な外部定義ライブラリとして分離。引数および自然言語マッピングによる指定に対応し、未指定時は勝手に判断せず確認を実施。
  • 機械的に検証可能なチェックリストとコマンドを備え、「プレビューでは綺麗だが貼り付けると崩れる」問題を防止。
  • 実用的なトレードオフ:表のリスト化、画像プレースホルダー、タイトル重複防止、リンクテキスト維持など、すべて公式アカウント管理画面の互換性に最適化。
  • 完全ローカル生成・外部通信ゼロ:外部リソースを読み込まず、単一ファイルのインラインスタイル HTML でオフラインでのプレビューとコピーが可能。
  • 最適な用途: 作成済みの Markdown 原稿を公式アカウントへ貼り付け可能な HTML へ迅速に変換し、複数のビジュアルスタイルから比較検討したい WeChat 公式アカウントクリエイター(単一スタイル納品、6 つの推奨比較、15 種一括生成);専用の組版ツールを持たず Markdown とブラウザのみで作業するクリエイターに最適。
    不向きな用途: 統一されたデザインシステムやコンポーネントライブラリを保守・運用する必要があるチーム(再利用可能なスタイル設計ではなく、単発生成のインライン HTML であるため);特定メディアのレイアウトをピクセル単位で完全再現することを求める用途(ブランド資産を複製せず、パラダイムのみを借用する方針のため);公式アカウント以外のプラットフォーム向けネイティブ入稿(WeChat 特有のサニタイズ挙動に特化しているため);自動スクリーンショットや公式アカウントへの自動投稿を期待するワークフロー(本スキルはファイルの生成とプレビュー表示のみを担当)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload dbs-wechat-html.tar.gz
    sha256: ab53f46d3e3f4706…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 8b8e33f1ec.