デザイン&モーション · nexu-io/html-anything

card-twitter

ツイート添付に適した、Twitter名言・データカード

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

1仕組みと動作原理

テンプレート本体に実行可能コードは含まれません:loaderはsrc/lib/templates/skills/<id>/SKILL.mdからfrontmatterと本文を読み込み、本文(body)とexample内容をLoadedSkillとして返します。

next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
ここでの処理内容:SKILL.mdが唯一の動作元です。frontmatterはセレクターの描画用(zh_name/emoji/aspect_hint/tags/example_*など)であり、本文全体がプロンプトとなります。loaderは意味的検証を行わず、テンプレートに記述された内容をそのまま渡します。

発行前にホスト側でプロンプトを固定形式で組み立てます:テンプレート本文は共有デザイン指示(SHARED_DESIGN_DIRECTIVES)と【入力フォーマット】/【ユーザーコンテンツ】の間に挟まれます。

next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
ここでの処理内容:テンプレートは「この成果物がどのような外観を持つか」(レイアウト/リズム/コンポーネント)のみを定義し、共有指示がテンプレート横断的なハード制約(単一HTMLファイル、ファイル操作ツールの禁止、TailwindおよびGoogle FontsのCDN利用、コンテンツの信頼性、中国語・英数間のスペース制御)を担います。

共有指示はハード制約をエージェントへの明示的な禁止事項として規定し、コンテンツ主導による数量決定を強制します(テンプレート内の数値は参考下限値に過ぎません)。

next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
同ファイルの後続部分にもう1つのルールがあります:出力されるslide / frame / card / sectionの数量は、【ユーザーコンテンツ】の実際の長さと情報構造によって完全に決定されます。これにより、長文入力時にも本カテゴリのテンプレートが破綻しない理由が説明されます(各コンテンツ段落につき最低1枚のカード/セクションを生成し、テンプレートはレイアウトプールを提供するのみです)。

実際に実行されるのはユーザーのローカル環境に導入・認証済みのコーディングエージェントCLIです:ホストが子プロセスをspawnし、プロンプトを渡してstdoutからHTMLをストリーミング取得します。

next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
ここでの処理内容:テンプレートskillはプロンプトを提供するのみで、能力(コード生成、ツール実行を含む)はホストCLIの既存権限に依存します。skillディレクトリ自体にはスクリプトのエントリポイントが存在しないため、判定はディレクトリ内のアセットのみを対象とします(ホストの挙動は評価対象外)。

/api/convertがテンプレートの実行パスです:skill.bodyとユーザーコンテンツをプロンプトに組み立ててからinvokeAgentに渡します。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
編集モードは別途buildEditPromptを使用します(差分最小化編集、ファイル操作ツール禁止、完全なHTMLの直接ストリーミング出力を要求)。そのため、この種のテンプレート成果物の形態は安定しています(単一HTMLファイル、インラインCSS/SVG、外部リンクはフォントおよび特定テンプレートで明示されたチャートライブラリのみ)。

テンプレートは固定ピクセルのキャンバス(1600×900)で寸法を固定し、コンテンツのトーンに応じてダークまたはライトを選択させ、1枚のカードに1つのヒーロー名言のみを収めるよう要求します。

next/src/lib/templates/skills/card-twitter/SKILL.md
- 容器 `w-[1600px] h-[900px]`, 暗色 / 亮色二选一根据内容情绪。
ここでの処理内容:「スクリーンショットをそのまま投稿できる」という要件を固定寸法(16:9、1600×900)に落とし込み、モデルがレスポンシブなページを出力してスクショのアスペクト比が狂うのを防ぎます。

カード面の要素を1項目ずつ固定定義します:左上に小さなタイプバッジ、中央にヒーロー名言(2〜3行以内)、下部に著者署名+アバタープレースホルダー+handle、右下にブランドウォーターマーク。

next/src/lib/templates/skills/card-twitter/SKILL.md
- 左上角小标签 (类型: "Insight" / "Data" / "Quote")。
「2〜3行以内」はフォントサイズとテキスト長に対する複合的な制約です。text-6xl環境では3行を超えると1600×900のキャンバスから溢れるため、テンプレートはフォント自動調整の代わりに最大行数制限を採用しています。

テクスチャが質感の源泉です:グリッド、ノイズ、ドットパターンの繊細なテクスチャをカードに適用するよう要求し、サンプルでは48pxのグリッドグラデーションで実現されています。

next/src/lib/templates/skills/card-twitter/SKILL.md
- 整张卡片有微妙的纹理 (grid 网格 / noise / dot pattern)。
実装例:.grid-patternは2層のlinear-gradientで48pxの格子を描画し、ダーク背景にopacity 0.06で重ねる純粋なCSS実装であり、画像リソースは一切使用しません。

サンプルの成果物は固定寸法の単一カード(width:1600px + aspect-ratio:16/9)であり、SKILL.mdの各項目と一対一で対応しています。

next/src/lib/templates/skills/card-twitter/example.html
.card { width:1600px; max-width:96vw; aspect-ratio:16/9; border-radius:24px; overflow:hidden; position:relative;
max-width:96vwにより小型画面でもカードがはみ出さないように配慮しつつ(プレビューの利便性のため)、主体は固定1600pxのキャンバスを維持します。サンプルのヘッダーにはTailwind CDNと3種類のGoogle Fontsファミリーが読み込まれています(成果物の表示時に取得)。

2コア機能

01固定キャンバスでのカード出力:1600×900(16:9)、ダーク/ライトの2択
02単一ヒーロー名言レイアウト(text-6xl、font-semibold、2〜3行制限)
03タイプバッジスロット(Insight / Data / Quote)
04著者署名+アバタープレースホルダー+handle、および右下のブランドウォーターマーク
05純粋なCSSテクスチャ背景(48pxグリッド / noise / dot pattern)
06そのままスクショして投稿することを前提とした仕上げ要件(視覚的簡潔さと力強さ)

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: プロンプト指示およびルール記述テキストのみで構成され、スクリプト実行や外部影響は一切ありません
監査ノート: 判定はskill自身のディレクトリのみに基づきます(SKILL.md、example.html、example.mdの3ファイルのみで、scripts/、同梱CLI、認証情報の読み取り、ディスク書き込みはなし):スクリプトのエントリポイント、同梱CLI、認証情報取得、ディスク書き込み指示は存在しません。SKILL.md本文もランタイムで外部エンドポイントを導入するよう要求していません(キャンバス寸法、要素位置、テクスチャ形式の指定のみ)。実行時にも外部送信は発生しません。ディレクトリ内に実際に現れるエンドポイントは、example.html:6-7にあるcdn.tailwindcss.comおよびfonts.googleapis.comのみであり(frontmatter/本文内のx.comの出典表記を含む)、これらは第4バッチ確定基準における**成果物実行時の参照**に該当します(生成されたHTMLがブラウザで開かれた際にCDNやフォントを取得するもので、skill実行時にスクレイピング、レポート送信、素材転送は行われません)。したがって評価対象外とし、エンドポイントの記載に留めます。ホスト環境の挙動(loader→assemblePrompt→ローカルagent CLIのspawn、プレビューiframeのsandbox)はすべてホスト側の処理であり、verdict.risksに記録されます。

5二重目の独立検証

  • [ok] 画布尺寸声明 vs 示例实现 — SKILL.md 写 w-[1600px] h-[900px],示例用 width:1600px + aspect-ratio:16/9(900 = 1600×9/16);两者等价,16:9 与 frontmatter aspect_hint 一致。
  • [ok] 纹理要求落地 — 微妙纹理在示例中是 .grid-pattern(两层 48px linear-gradient、opacity 0.06),纯 CSS 实现,无位图资产。
  • [ok] 端点数 — 目录内 http(s) 命中仅三类:cdn.tailwindcss.com、fonts.googleapis.com(含 gstatic preconnect)、frontmatter 的 x.com 出处字段;SKILL.md 正文无 URL,全部属产物期引用层。
  • [ok] license / stars / commit 元数据 — GitHub API(api.github.com/repos/nexu-io/html-anything):spdx_id=Apache-2.0、stargazers_count=8827、pushed_at=2026-09-15T03:36:24Z;工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699(与任务表 pin 553ed98c283f 同源)。
  • [ok] skill.path 与目录资产面 — pin 目录内该路径存在且含 SKILL.md;目录内文件清单已用 glob 全量核对(含隐藏文件),无 scripts/、无 references/、无二进制资产(competitive-teardown 的 assets/ 为纯 HTML,另行记录)。

6結論

  • 寸法とアスペクト比を固定(1600×900 / 16:9)することで、出力結果がそのままスクショ素材となり、レスポンシブ表示によるスクショの失敗を防げます。
  • 情報密度の上限を意識:ヒーロー名言を2〜3行に制限し、タイプバッジやウォーターマークを添えることで、カードが長文で煩雑になるのを回避します。
  • 質感表現を画像アセットではなく純粋なCSSテクスチャに頼っているため、サンプルをそのまま再利用でき、外部素材への依存がゼロです。
  • アバターにはグラデーション+イニシャルのプレースホルダーを採用し、外部アバター画像の参照を避けています(共有指示でも信頼性の低い外部画像リンクは禁止されています)。
  • 最適な用途: 1つのオピニオンや1つのデータポイントを、Xへ直接投稿可能な画像カードに仕上げる用途に最適です(ツイート添付画像、名言シェア、データ結論カード、講演の引用抜粋など)。固定キャンバスと固定エレメント配置により、統一感のあるシリーズカードの量産にも適しています。
    不向きな用途: 情報量の多いコンテンツには不向きです(1文のヒーロー名言がハード制約となっているため、長文はarticle-*やcard-xiaohongshuを使用すべきです)。インタラクションやアニメーションを必要とするカードには適しません。厳密なブランドCI/VIが要求されるシーンには不向きです(テンプレートはレイアウト枠組みのみを提供し、配色はモデルがトーンに応じて選択します)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload card-twitter.tar.gz
    sha256: ae454828e19e9485…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.