Docs & Knowledge · nexu-io/html-anything

social-media-matrix

Name: social-media-matrix
Author: nexu-io/html-anything

Cinematic multi-platform social media analytics: interactive charts, hover insights, range comparisons, and dark/light themes

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandDual-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 selectors, and its body contains layout instructions for the agent; the repository contains no code for individual templates, meaning adding a template simply equals adding a 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 an in-process regex (no YAML dependencies), and the body is extracted as-is 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's body between shared design directives and user content to compose a prompt — the template's "intelligence" resides entirely within this natural language, with zero executable code.

next/src/lib/templates/shared.ts

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

The return value 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 like single-file HTML, Tailwind/font CDNs, content-driven quantities, and a ban on filesystem tools; these are uniform across all templates and not specific to this template.

The host's /api/convert loads this template and hands these texts to a locally authenticated coding-agent CLI, streaming back stdout purely as HTML; 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 invokes invokeAgent({ … }) to spawn a CLI (claude / codex / cursor-agent, detected via host PATH); its accompanying shared directives also explicitly state: "**DO NOT use Write / Edit / MultiEdit / Bash / Create / any filesystem tools**".

The example.html bundled with the template is a "pre-rendered example" served as-is by the preview endpoint into the iframe of selectors and galleries — it determines whether the template card displays 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 adds sandbox="allow-scripts allow-same-origin" to the iframe in the preview panel (a host-side implementation beyond this template's control).

Frontmatter fields are mapped one-by-one into selector metadata (featured determines overall sorting, recommended pushes it to the top "★ Recommended" group, example_* generates copy for example cards) and determine 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.

The generation capabilities of this template are fulfilled entirely by its own body text: social-media-matrix/SKILL.md only describes layout, color palette, typography, and content guidelines, without a single command instructing the agent to run tools, fetch APIs, or read external data.