html-style

html-style

特定のデザインシステムを使用して、必要最低限の HTML をスタイル付きの出力に変換します。

ワークフロー

1. ユーザーの HTML を読み取ります
2. スタイルを適用する要素（テーブル、リスト、ステータステキスト、ボタン、セクション）を特定します
3. assets/base.css の <style> ブロックを挿入します
4. HTML 要素に適切なクラスを追加します
5. 必要に応じてインタラクティブな JS を追加します（コピー ボタン、下書き、折りたたみ可能なセクション）

クラスのクイックリファレンス

要素	クラス	効果
ステータステキスト	.stale .warm .pending	インラインテキストを赤／緑／オレンジで表示
トレンド	.trend-up .trend-down	緑の ↑ ／赤の ↓
カテゴリータグ	.tag-group .tag-dm .tag-money	青／紫／オレンジのピル
ステータスピル	.status-success .status-error .status-pending	緑／赤／オレンジの塗りつぶし
フィルター切り替え	.filter .filter.active	アウトライン／黒の塗りつぶし
時間フィルター	.pill .pill.active	小さなピル。アクティブ時は黒
統計ボックス	.stat > .stat-value + .stat-label	28px の数値、12px のラベル
テーブル	デフォルトまたは .table-styled	最小限のスタイル、または色付きの値
セクションヘッダー	.section-header	白いテキストの濃色バー
折りたたみ可能	<details> + <summary>	HTML 標準の折りたたみ
インサイト	.insight	イタリック体、黄色の背景
ティア	.tier-gold .tier-silver .tier-bronze	行の背景色

要素のスタイル設定ルール

テーブル

• デフォルト：最小限の境界線、ホバー効果なし
• 次の効果を適用する場合は .table-styled を追加します：ホバー効果、.positive／.negative セルの色、.highlight 行
• 並べ替え可能にするには、<a href="?sort=col">Col ▼</a> を指定した th.sortable を追加します

ステータスインジケーター

• テキストステータス（.stale／.warm／.pending）：文中のインラインステータスに使用します
• ステータスピル（.status-*）：バッジ形式のインジケーターに使用します。通常、アイコン（✓ ✗ ◷）を添えます
• トレンド（.trend-up／.trend-down）：数値の変化に使用すると、矢印が自動的に追加されます

セクション

視覚的な区切りとして、絵文字のプレフィックスを付けて .section-header を使用します。

<div class="section-header">🔴 URGENT</div>
<div class="section-header">🟠 PENDING</div>

インタラクティブ要素

HTML に下書きやコピー ボタンがある場合は、次の JS を追加します。

function saveDraft(el) {
    localStorage.setItem('draft:' + el.dataset.threadId, el.textContent);
}
function copyToClipboard(text, btn) {
    navigator.clipboard.writeText(text).then(() => {
        btn.textContent = 'Copied!';
        setTimeout(() => btn.textContent = 'Copy', 1500);
    });
}

ディープリンク

URL をネイティブアプリのリンクに変換します。

• Telegram：tg://resolve?domain=username
• SMS：sms:+14155551234

テーマ

• デフォルト：ライト（background: #fff）
• ダークモード：ユーザーがダークテーマをリクエストした場合、またはコンテキストが取引／リアルタイムの場合、<body> に class="dark" を追加します

Structure Skills との互換性

quick-view または table-filters の出力にスタイルを適用する場合、次のクラスマッピングを使用します。

quick-view クラス

そのクラス	スタイルの適用先
.type-user	.status-pending（青い境界線）
.type-draft	.status-pending（オレンジの境界線）
.type-done	.status-success（緑の境界線）
.source	スタイル適用済み（控えめ、小さめ）
.meta	スタイル適用済み（控えめなヘッダー）
.actions	インラインのボタングループ

table-filters クラス

そのクラス	スタイルの適用先
.filter-bar	間隔を空けたフレックス行
.filter-chips	インラインのチップコンテナー
.chip	.chip-remove を含む濃色のピル
.filter-menu	ドロップダウンパネル（.filter-menu）
.empty-state	中央揃えの控えめなテキスト

base.css には、これらのクラスのスタイルが自動的に含まれます。

リソース

• スタイルの完全なリファレンス：詳細な CSS パターンと例については、references/style-guide.md を参照してください
• ベース CSS：<head> 内の <style> タグに assets/base.css を挿入します