html-express

Name: html-express
Author: zjp1997720

github.com/zjp1997720ドキュメント78639 回インストール2 日前に更新

リポジトリ

html-express について

html-expressは、情報量の多い内容を読みやすい単独のHTMLページにまとめるエージェント向けスキルです。再利用可能な表示コンポーネント、組み立て手順、ビジュアル規則を備えています。

主な機能

01情報量の多い内容を単一HTMLに変換
0210種類の情報表示コンポーネント
03内容に応じたコンポーネント選択
04自己完結型の雛形とデザイントークン
05ビジュアルと内容の確認規則

活用シーン

01複数案の横並び比較
02指標、タイムライン、ロードマップの表示
03手順、SOP、チェックリストの整理
04長文の折りたたみと構造化データの表示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/zjp1997720/zhijian-skills --skill html-express

インストール後、Claude Code で/html-expressを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE

agents/

openai.yaml

assets/

demo-all.html

skeleton.html

tokens.css

assets/components/

badge.html

checklist.html

code-block.html

columns.html

comparison-table.html

data-table.html

details.html

metric-card.html

quote-card.html

timeline.html

詳細

html-express

エージェントの日常的な HTML 表現レイヤーです。情報密度が高く、読者が苦労して読み進める必要がある場合は、Markdown の代わりに単一の自己完結型 HTMLを使います。

着想：Anthropic「Using Claude Code: The unreasonable effectiveness of HTML」—— HTML はエージェントにとって最高の表現媒体です。

Markdown ではなく HTML を使う理由

情報密度：HTML なら構造化や比較、インタラクションを表現できますが、Markdown ではテキストを積み重ねるしかありません
読みやすさ：表、指標、タイムラインを Markdown で作るのは苦行ですが、HTML なら快適です
自己完結性：ファイルは 1 つだけで、ダブルクリックですぐに開き、実行環境は不要で、共有もできます
判断基準：読者が「苦労して読み進める」必要があるものは HTML にし、一言で伝えられるものは Markdown のままにします

使い分け：html-express を使うべきか

兆候	使うもの
PDF／履歴書／PPT／ランディングページ／ホワイトペーパーが必要	→ `kami`
動画／アニメーション／字幕／トランジションが必要	→ `hyperframes`
大量の情報を整理して、1 ページで読みやすい Web ページにしたい	→ 本スキル
一言で伝えられる結論	→ そのまま Markdown で回答

コンポーネント一覧（10 個）

コンポーネント	適した情報
`metric-card`	主要指標、データのポイント（2～4 個を横並び）
`comparison-table`	複数案の横並び比較
`data-table`	構造化データの一覧（比較以外）
`timeline`	タイムライン、マイルストーン、ロードマップ
`checklist`	手順、SOP、チェック項目
`quote-card`	判断、発言、名言
`code-block`	コード、コマンド、設定
`details`	長い内容の折りたたみ（JS 不要）
`badge`	状態ラベル（成功／警告／中立）
`columns`	複数の視点の並置、メリットとデメリットの比較

ソースコードは assets/components/ にあります。ひな形は assets/skeleton.html に、トークンは assets/tokens.css にあります。10 個のコンポーネントの完成形は assets/demo-all.html で確認できます（ダブルクリックで開きます）。

組み立て手順

情報の形を見極める → 比較？リスト？指標？タイムライン？引用？意思決定？
コンポーネントを選ぶ → 一覧から最適なものを 2～5 個選びます。すべて使う必要はありません
ひな形を使う → assets/skeleton.html をコピーし、tokens.css の内容全体を先頭の <style> に貼り付けます（@import を置き換えます）
内容を入れる → 形容詞よりデータを優先します。プレースホルダーを残さず、データが不足している場合は [数据待补：说明] と記載します
出力する → 単一の .html ファイルにし、ダブルクリックですぐに開けるようにします

情報の形 → コンポーネント対応表

情報の形	推奨コンポーネント
複数案の横並び比較	comparison-table + badge
主要指標／データのポイント	metric-card（2～4 個を横並び）
タイムライン／マイルストーン／ロードマップ	timeline
手順／SOP／チェックリスト	checklist
長い判断／発言／名言	quote-card
コード／コマンド／設定	code-block
長い内容の折りたたみ	details
構造化データの一覧	data-table
複数の視点の並置	columns

ビジュアルのルール（智见AI DESIGN.md に準拠）

トークンは assets/tokens.css に定義済みです。コンポーネントは必ず変数を参照し、色や文字サイズをリテラル値で指定しないでください。

背景は常に暖色系の紙色 #F5F4ED とし、純白は使いません
主なアクションカラーは暖色系テラコッタ #B85235、構造色はインクブルー #1B365D
本文のリンクには --accent-text（#A04A2E、コントラスト比は基準を満たします）を使います
--human（#C96442）は装飾、または 22px 以上の大きな文字にのみ使い、本文の小さな文字には使えません（コントラスト比は 3.7:1 のみです）
フォントはフォールバックに任せ、フォントファイルは埋め込みません

禁止事項（エージェントが最も間違えやすいもの）

❌ プレースホルダーを残す（[填这里]、Lorem、TBD）
❌ データや統計を捏造する。データが不足している場合は [数据待补：说明] と記載します
❌ 不適切な表——比較マトリクスにすべきものをリストにする
❌ グラデーション、グラスモーフィズム、ネオン、強い影（DESIGN.md で明示的に禁止されています）
❌ マーケティング用のランディングページにする（それは kami の担当です）

参考資料

ブランドの正式な情報源：04_系统/品牌系统/DESIGN.md
コンポーネント一覧：assets/demo-all.html（ダブルクリックで開くと、すべての完成形を確認できます）

Markdown 対応

ログインしてコメント

基本情報

作者: zjp1997720
リポジトリ: zjp1997720/zhijian-skills
カテゴリ: ドキュメント
インストール数: 39
GitHub スター: 786

問題を報告

おすすめの Skills

すべての Skills

handoff

github.com/mattpocock

1.1M

現在の対話をハンドオフドキュメントにコンパクトにまとめ、別のエージェントが引き継げるようにする

lark-doc

open.feishu.cn

823.9k

Feishu クラウドドキュメント（Docx / Wiki）の操作：ドキュメントの読み取り、作成、編集、画像添付の挿入またはダウンロード、マインドノートの操作。ユーザーがドキュメント URL/token（doubao.com の /docx/、/wiki/ を含む）を提示した場合に使用。ドメインではなく URL パス/token に基づいて振り分けます。`/page/<token>` は Miaoda アプリであり、Feishu クラウドドキュメントではありません。ドキュメント内の埋め込みリソースは、読み取りリファレンスの統一ルールに従って振り分けます。独立したコメント操作には lark-drive を使用し、本文と合わせてコメントを読む場合は docs +fetch を使用します。スプレッドシートまたは Base 内部データの操作は対象外です。

lark-drive

open.feishu.cn

823.2k

Feishu クラウドストレージ（Drive）：Drive のファイルとフォルダーを管理します。アップロード/ダウンロード、フォルダー作成、コピー/移動/削除、メタデータの表示、権限設定の確認、コメント/権限/購読、タイトル、バージョン、Feishu ドキュメントのセキュリティラベル（secure labels）、ローカルファイルのインポートに対応します。Drive フォルダーの整理、クラウドストレージのリソース URL/token の処理、リンクの種類/実際の token/タイトルの判定、Word/Markdown/Excel/CSV/PPTX/.base の docx/sheet/bitable/slides へのインポート時に使用します。doubao.com のクラウドストレージ URL/token もリソースパスと token に基づいて振り分け、WebFetch にフォールバックしません。対象外：ドキュメント内容の編集（lark-doc）、スプレッドシート/Base 内のデータ操作（lark-sheets/lark-base）、ナレッジスペースのノード/メンバー管理（lark-wiki）、ネイティブ Markdown ファイルの読み書き/patch/diff（lark-markdown）。

lark-sheets

open.feishu.cn

821.8k

Feishu スプレッドシート：スプレッドシートの作成と操作に対応します。ワークシートと行/列構造（追加/削除/結合/サイズ/非表示/固定/グループ化）、セルの読み書き（値/数式/スタイル/コメント/セル画像）、範囲のコピー/移動/並べ替え/入力、検索と置換、一括更新、グラフ、ピボットテーブル、条件付き書式、フィルターとフィルタービュー、ドロップダウンリスト、スパークライン、浮動画像などのオブジェクトの作成と管理に対応します。数式の検証、過去バージョンへの復元、ローカルの Excel/CSV と Feishu スプレッドシート間のインポート/エクスポートも可能です。スプレッドシートの作成/編集、集計と可視化、書式設定、数式計算（Excel 数式の移行を含む）、財務モデリング（DCF、三表、予算、Sensitivity など）に使用します。多次元テーブル（Base/bitable）には lark-base を使用してください。クラウドストレージ（Drive/クラウドストレージ）内のスプレッドシートファイルを名前やキーワードで検索する場合は、まず lark-drive の drive +search でリソースを特定してください。doubao.com の /sheets/ URL/token が提示された場合も、このスキルを直接使用し、ドメインが Feishu でないことを理由に WebFetch にフォールバックしないでください。振り分けはドメインではなく URL パスの形式と token に基づきます。