Design & Motion · nexu-io/html-anything

sprite-animation

Name: sprite-animation
Author: nexu-io/html-anything

Pixel art + kinetic typography explainer frame with pure CSS loops, ready for video recording

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' architecture: SKILL.md uses YAML frontmatter for selectors, and its body serves as layout instructions for the agent; the repository contains no template-specific code—adding a template means 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 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 stitches this template body between shared design directives and user content to assemble a single prompt—the template's 'intelligence' resides entirely in this natural language, with zero 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 strict constraints such as single-file HTML, Tailwind/font CDNs, content-driven quantity, and prohibiting filesystem tools; these apply uniformly across all templates and are not bundled inside this template.

After loading the template, the host's /api/convert sends these prompts to a locally logged-in coding-agent CLI, streaming only stdout back as HTML; the template itself performs no network requests, credential access, or file writes.

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

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

The same route subsequently invokes invokeAgent({ … }) to spawn a CLI (claude / codex / cursor-agent, etc., detected via the host's PATH); the accompanying shared directives explicitly state: '**Prohibited from using Write / Edit / MultiEdit / Bash / Create / any filesystem tools**'.

The bundled example.html is a 'pre-rendered example' output directly by the preview endpoint into the iframe of selectors and galleries—it determines whether a 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 sets sandbox="allow-scripts allow-same-origin" on the iframe within the preview panel (a host-side implementation beyond the template's control).

Frontmatter fields are mapped one-to-one into selector metadata (featured determines overall sorting, recommended places it in the top '★ Recommended' section, and example_* generates sample card copy), controlling 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 affect only display and ranking, not generation behavior.

The generation capability of this template is executed entirely through its own body: sprite-animation/SKILL.md defines layout, color palette, typography, and content discipline, without any instruction commanding the agent to run tools, fetch endpoints, or read external data.