Design & Motion · nexu-io/html-anything

card-twitter

Name: card-twitter
Author: nexu-io/html-anything

Twitter quote / data card, ideal for tweet attachments

L1 Basic · Source registration onlyV1 Commit-PinnedDual-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

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

The template itself contains no executable code: the loader reads the frontmatter and body from src/lib/templates/skills/<id>/SKILL.md, and returns the body along with example content as LoadedSkill.

next/src/lib/templates/loader.ts

const raw = safeRead(path.join(dir, "SKILL.md"));

What is happening here: SKILL.md is the sole source of behavior—frontmatter is used by the selector for rendering (zh_name/emoji/aspect_hint/tags/example_*, etc.), and the full body acts as the prompt; the loader performs no semantic validation and delivers whatever is written in the template.

Before dispatch, the host assembles the prompt in a fixed manner: the template body is sandwiched between SHARED_DESIGN_DIRECTIVES and [Input Format]/[User Content].

next/src/lib/templates/shared.ts

Wrap a per-template instruction body with the shared design directives and

What is happening here: The template only defines 'what this specific deliverable looks like' (layout/rhythm/components), while shared directives enforce cross-template hard constraints—single-file HTML, prohibition of file tools, CDN usage for Tailwind and Google Fonts, content authenticity, and CJK spacing (Pangu spacing).

Shared directives translate hard constraints into explicit prohibitions for the agent and enforce content-driven quantity (numbers in the template serve only as minimum references).

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。

Later in the same file is another rule: the quantity of generated slides/frames/cards/sections is entirely determined by the actual length and information structure of [User Content]—this explains why templates of this category do not fail when content expands: at least one card/section per content chunk, with the template merely providing layout archetypes.

Execution is actually handled by the coding agent CLI installed and authenticated on the user's local machine: the host spawns a child process, feeds it the prompt, and captures HTML streamed from stdout.

next/src/lib/agents/invoke.ts

import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";

What is happening here: The template skill only provides prompts; capabilities (including code generation and tool execution) come from the existing permissions of the host CLI; the skill directory itself contains no script entry points, so grading is based solely on assets within the directory (host behavior is excluded from grading).

/api/convert is the execution path for templates: it combines skill.body with user content into a prompt and passes it to invokeAgent.

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

Edit mode uses buildEditPrompt (minimal-diff editing, file tools disabled, requiring direct streaming of complete HTML). Thus, artifacts from this category of templates remain stable: single-file HTML, inline CSS/SVG, with external links limited to fonts and charting libraries explicitly required by specific templates.

The template fixes dimensions using a fixed-pixel canvas (1600×900), requires selecting dark or light mode based on content tone first, and limits each card to a single hero quote.

next/src/lib/templates/skills/card-twitter/SKILL.md

- 容器 `w-[1600px] h-[900px]`, 暗色 / 亮色二选一根据内容情绪。

What is happening here: Translating the 'ready-to-screenshot-and-post' requirement into hard dimensions (16:9, 1600×900) prevents the model from generating responsive pages that distort screenshot aspect ratios.

Card face elements are strictly defined item by item: a small category badge at the top-left, a central hero quote (limited to 2-3 lines), an author signature + avatar placeholder + handle below, and a brand watermark at the bottom-right.

next/src/lib/templates/skills/card-twitter/SKILL.md

- 左上角小标签 (类型: "Insight" / "Data" / "Quote")。

'Limited to 2-3 lines' is a combined constraint on font size and copy length: at text-6xl, exceeding three lines overflows the 1600×900 canvas; the template substitutes dynamic font-size scaling with a strict line-count cap.

Texture drives visual quality: requires the card to have subtle textures such as grid, noise, or dot patterns, implemented in the example with a 48px grid gradient.

next/src/lib/templates/skills/card-twitter/SKILL.md

- 整张卡片有微妙的纹理 (grid 网格 / noise / dot pattern)。

Example implementation: .grid-pattern draws 48px squares using two linear-gradient layers at 0.06 opacity over a dark background—pure CSS with zero image assets.

The example artifact is a single fixed-dimension card (width:1600px + aspect-ratio:16/9), corresponding one-to-one with the rules in 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 prevents the card from overflowing on smaller screens (for preview convenience only), while the core remains a fixed 1600px canvas; the example header also imports the Tailwind CDN and three Google Fonts font families (fetched during artifact runtime).

2Core Capabilities

01Fixed-canvas card generation: 1600×900 (16:9), choice of dark or light theme

02Single-sentence hero quote layout (text-6xl, font-semibold, capped at 2-3 lines)

03Category badge slot (Insight / Data / Quote)

04Author attribution + avatar placeholder + handle, plus bottom-right brand watermark

05Pure CSS textured background (48px grid / noise / dot pattern)

06Ready-to-screenshot finishing requirements (clean and visually impactful)

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt directives and rule text, without script execution or external impacts

Audit Notes: Grading is based solely on the skill's own directory (only three files: SKILL.md, example.html, and example.md; no scripts/, no bundled CLI, no credential reading, no disk writes): no script entry points, no bundled CLI, no credential reading, no disk-writing directives; the body of SKILL.md does not require any external endpoints at runtime (only specifies canvas dimensions, element positions, and texture types). No outbound requests occur during execution. The only endpoints present in the directory are cdn.tailwindcss.com and fonts.googleapis.com in example.html:6-7 (plus source citations for x.com in frontmatter/body), which fall under **artifact-time references** per the Batch 4 finalized criteria (fetched by the browser upon opening the generated HTML, without scraping, reporting, or asset transmission during skill execution), and are therefore not graded but merely listed here; host shells (loader → assemblePrompt → local agent CLI spawn, preview iframe sandbox) are host behaviors and are logged under verdict.risks.

5Second-Pass Verification

[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，另行记录）。

6Verdict & Scenarios

Fixed dimensions and aspect ratio (1600×900 / 16:9) allow the output to serve directly as screenshot assets, avoiding common screenshot issues with responsive pages.

Clear consciousness of information density limits: hero quotes capped at 2-3 lines, paired with category tags and watermarks to avoid cluttering cards with excessive text.

Visual texture relies on pure CSS rather than image assets; examples are directly reusable with zero asset dependencies.

Avatars use gradient + initial placeholders, avoiding external image links (shared directives also prohibit unreliable external image links).

Best for: Ideal for turning a single viewpoint or data point into an image card ready to post directly to X: tweet attachments, quote sharing, data takeaway cards, lecture excerpts; fixed canvas + fixed element positions are well-suited for batch-producing consistent card series.

Not for: Not suitable for dense or multi-part information (single hero sentence is a hard constraint; longer content should use article-* or card-xiaohongshu); not suitable for cards requiring interactivity or animations; not suitable for scenarios requiring precise brand CI/VI (the template provides only a layout frame, while color schemes are selected by the model based on sentiment).

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

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.