Home / All Skills / Design & Motion / social-x-post-card
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · nexu-io/html-anything

social-x-post-card

Realistic X (Twitter) post card + engagement metrics (likes/reposts/views), tailored for video overlays or social card sharing

L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessDual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE = Apache License 2.0；GitHub API spdx_id=Apache-2.0）Commit 553ed98c28
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

This template is purely data within a 'folder-as-template' architecture: SKILL.md uses YAML frontmatter for selector filtering, and the body contains layout directives for the agent. The repository contains zero custom code for individual templates; adding a new template simply means adding a new folder.

next/src/lib/templates/loader.ts
SKILL.md — frontmatter (id, scenario, tags, …) + prompt body
loader.ts specifies directory conventions in its file header comments; frontmatter is parsed via in-process regular expressions (no YAML dependencies), and the body is extracted verbatim as the prompt body, which is never shipped to the frontend ('Body is excluded so we can return the entire registry in one cheap fetch without shipping prompt text to the browser.').

At runtime, the host sandwiches this template's body between shared design directives and user content to assemble a prompt. All the 'intelligence' of the template resides purely in this natural language without any executable code.

next/src/lib/templates/shared.ts
return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}
assemblePrompt returns 'shared design directives + template body + [Input Format] + [User Content]'. The shared section (SHARED_DESIGN_DIRECTIVES in the same file) enforces hard constraints like single-file HTML, Tailwind/font CDNs, content-driven quantities, and strict prohibitions against using filesystem tools. These are consistent across all templates and not intrinsic to this template.

The host's /api/convert loads this template and hands these instructions to a locally authenticated coding-agent CLI, streaming back stdout as HTML. The template itself makes no network requests, accesses no credentials, and writes no files.

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
The same route subsequently calls invokeAgent({ … }) to spawn a CLI (claude / codex / cursor-agent, etc., detected from the host's PATH). Its paired shared instructions explicitly state: '**Prohibited from using Write / Edit / MultiEdit / Bash / Create / any filesystem tools**'.

The accompanying example.html is a 'pre-rendered example' served as-is by the preview endpoint into the iframe of the selector and gallery. It determines whether the template card has a visual preview and does not participate in content generation.

next/src/app/api/templates/[id]/preview/route.ts
Returns the skill's `example.html` verbatim so it can be loaded into an
Previews are cached by skill id (Cache-Control: public, max-age=300). The frontend attaches sandbox="allow-scripts allow-same-origin" to the iframe in the preview panel (a host-side implementation, not controllable by this template).

Frontmatter fields are mapped one-by-one into selector metadata (featured dictates full sorting, recommended promotes to the top '★ Recommended' group, and example_* generates example card copy), determining where it appears in category and scenario filters.

next/src/lib/templates/loader.ts
if (typeof fm.featured === "number") meta.featured = fm.featured;
fmToMeta directly transfers category/scenario/aspectHint/tags to SkillMeta. The example block is generated when example_id or example.{md,html} exists (id/name/format/tagline/desc + optional source). These fields only influence display and sorting, not generation behavior.

The template's generative capability is fulfilled entirely by its own body: social-x-post-card/SKILL.md describes only layout, color palettes, typography, and content discipline, containing no instructions for the agent to execute tools, fetch APIs, or read external data.

next/src/lib/templates/skills/social-x-post-card/SKILL.md
【模板: X (Twitter) 帖子卡】
The skill directory contains only 2–3 files (SKILL.md + example.html [+ example.md]), with no scripts, references, or data files. example.html is simply a handcrafted example artifact of the same template (see internal_assets).

The intent is to render tweets or punchy user quotes into highly realistic X post cards, with credit noted as inspired by hyperframes' x-post.

next/src/lib/templates/skills/social-x-post-card/SKILL.md
【意图】把一段推文内容 (或用户的金句) 渲染成一张拟真度极高的 X 帖子卡片, 用于视频叠加、推特发图、知识沉淀。Inspired by hyperframes x-post。

The card layout consists of an avatar + username + handle + verified blue checkmark + timestamp, with an explicit requirement that the avatar use a CSS gradient placeholder.

next/src/lib/templates/skills/social-x-post-card/SKILL.md
- 顶部 row: 头像 (48×48 圆形, 用 CSS gradient 占位) + 用户名 + handle `@username` + verified 蓝勾 + 时间 (mono, 12px, 灰)。

Engagement metrics must be formatted according to platform conventions (e.g., K/M), with raw integers prohibited.

next/src/lib/templates/skills/social-x-post-card/SKILL.md
- 数字格式化: 1.2K / 4.5M (不要原始 1234)。

Content discipline: Must strictly derive from user input; fabricating tweets is prohibited.

next/src/lib/templates/skills/social-x-post-card/SKILL.md
- 内容必须来自用户输入, 不能编造推文。

Non-tweet inputs are automatically condensed into punchy quotes and bounded by the 280-character limit of X.

next/src/lib/templates/skills/social-x-post-card/SKILL.md
- 若用户输入是数据 → 自动总结成一句"金句"推文 (≤ 280 字符)。

Asset constraints: Single-file HTML, inline SVG icons, and zero external image URLs.

next/src/lib/templates/skills/social-x-post-card/SKILL.md
- 单文件 HTML; icon 内联 SVG; 不要任何外部图片 URL。

The example artifact reproduces the X blue checkmark and engagement icons using inline SVGs, with engagement metrics formatted with 'K'.

next/src/lib/templates/skills/social-x-post-card/example.html
<span style="color:#f91880">12.3K</span>

2Core Capabilities

01Realistic X post card (top row with avatar / handle / verified badge / timestamp)
02Engagement metrics row (replies / reposts / quotes / likes with official-style inline SVG icons)
03Number formatting (1.2K / 4.5M, no raw integers)
04Light and dark color themes (dark recommended for video overlays)
05Optional quote card and 16:9 image placeholder (CSS gradient, no external links)
06Data input → punchy quote tweet of ≤280 characters
07Example artifact: Punchy quote tweet + 12.3K likes / 482 replies / 2.1M views

3External Dependencies

KindDependency / Endpoint
networkTailwind CDN（仅出现在产物示例 example.html，运行时不要求）
networkGoogle Fonts（仅出现在产物示例 example.html）
network灵感出处标注（frontmatter example_source_url，非运行时调用）
cli本地 coding-agent CLI（宿主提供，模板自身不调用）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Declare allowed domains and key scope
For Administrators
Least privilege keys, retain request logs
Evidence & Triggers (File Paths & Excerpts)
  • 网络端点: Declared external network access: cdn.tailwindcss.com (<script src> in example.html, requested by the browser during selector preview or local file opening)
Audit Notes: Evaluation target = this skill directory (SKILL.md + example.html [+ example.md]): Contains no bundled scripts, no credential access, no disk-write instructions, and requires no external endpoints at runtime—the body only specifies layout, color schemes, font family names, and content discipline, where font names do not constitute requests. All external links appearing in the directory are purely of an 'example artifact' nature, detailed as follows: cdn.tailwindcss.com (example.html line 6 <script src>), fonts.googleapis.com (example.html line 7 <link>, Inter + Noto Sans SC), and hyperframes.heygen.com (frontmatter provenance attribution). Under Batch 4 criteria (endpoints appearing only in artifact examples/provenance attributions → green), this does not affect the safety tier. Host-side behaviors (loader.ts disk reads, assemblePrompt prompt assembly, agents/invoke.ts spawning local CLIs, and preview iframe sandbox="allow-scripts allow-same-origin") are documented in verdict.risks and do not serve as grounds for tier classification.

5Second-Pass Verification

  • [ok] skill 目录的脚本 / 网络 / 凭证 / 写盘面 — 目录仅 SKILL.md / example.html / example.md 3 个文件，无 scripts/references/数据目录；token 扫描（curl / wget / fetch / exec / spawn / process.env / API_KEY / token / secret / write / save / delete）在该目录的 SKILL.md 中零命中；无自带可执行脚本。
  • [ok] 运行时链路复核 — 重读 loader.ts / shared.ts / app/api/convert/route.ts / app/api/templates/[id]/preview/route.ts：模板正文只作为 prompt body 被 assemblePrompt 拼装，宿主 spawn 本地 CLI 并捕获 stdout；模板不参与任何执行。
  • [ok] commit 与元数据 — 工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（＝任务表 pin 的 full 40 位）；GitHub API nexu-io/html-anything：stars 8827、license spdx Apache-2.0、pushed_at 2026-09-15T03:36:24Z（与本地 HEAD 提交时间 2026-09-15 11:36:24 +0800 一致）。
  • [discrepancy] README 与源码的 frontmatter schema 漂移（仓库级） — README 第 213 / 217 / 468 行称模板 frontmatter 必须含 mode · scenario · surface · preview · design_system；但在 next/src/lib/templates/skills/ 下 '^mode:'、'^surface:'、'^design_system:' 全部零命中，实际字段是 category / scenario / aspect_hint / featured / recommended + example_*（loader.ts 的 SkillFrontmatter）。文档滞后于代码，不影响本模板运行，但照 README 新写模板会踩空。
  • [ok] frontmatter 元数据映射 — loader.ts fmToMeta 逐字段映射 zhName / enName / emoji / description / category / scenario / aspectHint / tags + featured / recommended + example 卡；本模板取自 SKILL.md 的实际取值与之相符。
  • [ok] example.html 与 SKILL.md 的一致性 — 蓝勾与四个互动图标均为内联 SVG（fill="#1d9bf0" 等），互动数字已格式化（12.3K / 482 / 2.1M），符合正文「数字格式化」与「icon 内联 SVG」两条。
  • [ok] 端点扫描（目录内） — 3 处：cdn.tailwindcss.com、fonts.googleapis.com（均在 example.html）+ frontmatter 的 hyperframes.heygen.com 出处标注；SKILL.md 正文与 example.md 无其它 URL。
  • [ok] 「不要任何外部图片 URL」自证 — example.html 内无 img/图片 URL：头像与图片位按正文用 CSS 渐变占位，图标为内联 SVG。

6Verdict & Scenarios

  • Platform conventions are baked into the template (280 characters, 1.2K/4.5M formatting) for a more authentic tweet appearance
  • Strict content discipline: Must originate from user input without fabricating tweets
  • Excellent input flexibility: Raw data can also be summarized into a punchy quote of ≤280 characters
  • Self-contained output: Inline SVGs for verified badge and interaction icons, CSS gradients for image placeholders, no external images
  • The README provides a complementary scraping toolchain recommendation (TweetClaw for fetching data → this template for rendering), maintaining clear boundaries of responsibility
    • Best for: Ideal for turning quotes or viewpoints into X graphic cards for social sharing and video overlays, or archiving published tweets as images; also suited for content operations requiring automated condensation from 'data → punchy quotes'.
    Not for: Not suitable for scenarios requiring live tweet data ingestion (this template does not scrape X or call APIs; the README recommends delegating this to external tools), formal brand assets (the blue checkmark and engagement metrics are simulated elements), or long-form copy—the tweet format is constrained to 280 characters.
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload social-x-post-card.tar.gz
    sha256: d347f9e7707442ba…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.