Design & Motion · nexu-io/html-anything

saas-landing

Name: saas-landing
Author: nexu-io/html-anything

Single-page SaaS landing page featuring hero, features, social proof, pricing, and CTA sections.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-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 metadata, while the body serves as layout instructions for the agent; the repository contains no template-specific code, meaning adding a template equals adding a folder.

next/src/lib/templates/loader.ts

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

loader.ts states directory conventions in its file header comments; frontmatter is parsed in-process via regex (no YAML dependencies), and the body is extracted verbatim as the prompt body without exposing it to the front-end ("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 text, containing no 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 strict constraints such as single-file HTML, Tailwind/font CDN, content-driven counts, and prohibiting filesystem tools; it applies uniformly to all templates and is not native to this specific template.

After loading the template via the host's /api/convert, the text is passed to a locally logged-in coding-agent CLI, streaming stdout back exclusively as HTML; the template itself performs 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, 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 serves as a "pre-rendered example" emitted as-is by the preview endpoint into selector and gallery iframes—it determines visual preview availability in template cards and plays no part 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 front-end applies sandbox="allow-scripts allow-same-origin" to the preview iframe (host-side implementation, beyond this template's control).

Frontmatter fields are mapped item-by-item into selector metadata (featured controls global sorting, recommended places it in the top "★ Recommended" group, example_* generates sample card copy), governing its placement in category/scenario filters.

next/src/lib/templates/loader.ts

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

fmToMeta also moves category/scenario/aspectHint/tags directly 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.

The generation capability of this template is fulfilled entirely by its own body: saas-landing/SKILL.md solely defines layout, color palette, typography, and content guidelines, without a single instruction directing the agent to run tools, fetch APIs, or read external data.