Design & Motion · nexu-io/html-anything

social-spotify-card

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

Spotify Now Playing style card: album art + progress bar + playback controls, adapted for video overlays and personal homepages.

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 the picker, while the body text provides layout directives for the agent; the repository contains no specific code for individual templates, meaning adding a new template is simply 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 in-process via regex (no YAML dependencies), and the body text is extracted verbatim as the prompt body without being passed 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 the template body between shared design directives and user content to construct 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 hard constraints such as single-file HTML, Tailwind/font CDNs, content-driven quantity, and prohibiting filesystem tools; it is uniform 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, streaming stdout back as HTML; the template itself performs no network requests, credential reading, or file 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 accompanying shared directives explicitly state: "**Do NOT use Write / Edit / MultiEdit / Bash / Create / any filesystem tools**".

The bundled example.html is a "pre-rendered example" served as-is by the preview endpoint into the picker and gallery iframe—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 outside this template's control).

Frontmatter fields are mapped one-to-one into picker metadata (featured determines overall ranking, recommended routes to the top "★ Recommended" group, example_* generates sample card copy) and determine its placement 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.

The generation capability of this template is delivered entirely by its own body text: social-spotify-card/SKILL.md describes only layout, color scheme, typography, and content guidelines, without instructing the agent to run tools, call endpoints, or read external data.