Design & Motion · nexu-io/html-anything

social-reddit-card

Name: social-reddit-card
Author: nexu-io/html-anything

Realistic Reddit post card with up/down voting and comment count, suitable for video overlays and story 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-a-template" structure: SKILL.md uses YAML frontmatter for selectors, and the body contains layout instructions for the agent; the repository writes no code for individual templates, where adding a new template equals 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 and not sent 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 body between shared design directives and user content to assemble a prompt—the template's "intelligence" resides entirely within 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 requirements such as single-file HTML, Tailwind/font CDNs, content-driven quantity, and a ban on filesystem tools; these are consistent across all templates and not intrinsic to this template.

After loading this template, the host's /api/convert passes the text to a locally authenticated coding-agent CLI and retrieves stdout as an HTML stream; the template itself initiates no network requests, reads no credentials, and writes no files.

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

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

The same route then calls invokeAgent({ … }) to invoke the CLI (claude / codex / cursor-agent, detected via the host PATH); its accompanying shared directives explicitly state: "**Do NOT use 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 selector and gallery iframes—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 sets sandbox="allow-scripts allow-same-origin" on the iframe in the preview panel (a host-side implementation, not controlled by this template).

Fields in the frontmatter are mapped one-by-one into selector metadata (featured determines overall sorting, recommended places it in the top "★ Recommended" group, example_* generates example card copy) and decide where it appears in category/scenario filters.

next/src/lib/templates/loader.ts

if (typeof fm.featured === "number") meta.featured = fm.featured;

fmToMeta directly maps 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 affect display and sorting, not generation behavior.

All generation capabilities of this template are fulfilled by its own body: social-reddit-card/SKILL.md describes only layout, color palettes, fonts, and content discipline, without a single instruction telling the agent to run tools, call APIs, or read external data.