Design & Motion · nexu-io/html-anything

social-carousel

Name: social-carousel
Author: nexu-io/html-anything

3 square card carousel, connected headlines, brand mark + numbering

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 indexing, and the body provides layout directives for the agent. The repository contains no custom code for individual templates; adding a template simply means adding a folder.

next/src/lib/templates/loader.ts

SKILL.md — frontmatter (id, scenario, tags, …) + prompt body

loader.ts states the directory conventions in its file header comments. Frontmatter is parsed via in-process regex (no YAML dependencies), and the body is extracted verbatim as the prompt body without exposing it 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 compose a single prompt—the template's "intelligence" resides entirely within this natural language text, with no executable code.

next/src/lib/templates/shared.ts

return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}

The output of assemblePrompt is "shared design directives + template body + [input format] + [user content]". The shared section (SHARED_DESIGN_DIRECTIVES in the same file) enforces strict constraints such as single-file HTML, Tailwind/font CDN usage, content-driven quantity, and prohibiting filesystem tools across all templates; it is not bundled into this specific template.

After loading the template, the host's /api/convert passes the assembled prompt to a locally authenticated coding-agent CLI and captures stdout as streamed HTML. The template itself performs no network requests, credential reads, or disk writes.

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

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

The same route then invokes invokeAgent({ … }) to spawn a CLI (claude / codex / cursor-agent, etc., detected via host PATH). Its companion shared directives explicitly state: "**Prohibit using Write / Edit / MultiEdit / Bash / Create / any filesystem tools**".

The accompanying example.html serves as a "pre-rendered example" delivered directly by the preview API into iframes within selectors and galleries—it provides a visual preview for the template card without participating 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 adds sandbox="allow-scripts allow-same-origin" to the iframe in the preview panel (a host-side implementation outside the template's control).

Frontmatter fields are mapped item-by-item into selector metadata (featured controls global sorting, recommended places items in the top "★ Recommended" group, and example_* generates example card copy), determining their placement across 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 into 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.

All generative capabilities of this template are fulfilled entirely by its own body: social-carousel/SKILL.md solely outlines layout, color palette, typography, and content discipline, containing no instructions for the agent to execute tools, fetch APIs, or read external data.