Design & Motion · nexu-io/html-anything

card-xiaohongshu

Name: card-xiaohongshu
Author: nexu-io/html-anything

Xiaohongshu (RED) style knowledge cards, arranged in multi-card sequences for swipeable browsing.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE：Apache License Version 2.0, January 2004；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

The template itself contains no executable code: the loader reads the frontmatter and body from src/lib/templates/skills/<id>/SKILL.md, and returns the body along with example content as LoadedSkill.

next/src/lib/templates/loader.ts

const raw = safeRead(path.join(dir, "SKILL.md"));

What is happening here: SKILL.md is the sole source of behavior—frontmatter is used for selector rendering (zh_name/emoji/aspect_hint/tags/example_*, etc.), and the entire body serves as the prompt; the loader performs no semantic validation and dispatches exactly what the template defines.

The host assembles the prompt in a fixed sequence before dispatch: the template body is sandwiched between the shared design directives SHARED_DESIGN_DIRECTIVES and [Input Format] / [User Content].

next/src/lib/templates/shared.ts

Wrap a per-template instruction body with the shared design directives and

What is happening here: The template only defines 'what this specific deliverable looks like' (layout/rhythm/components), while shared directives enforce cross-template hard constraints—single-file HTML, prohibition of file tools, loading Tailwind and Google Fonts via CDN, content authenticity, and CJK spacing (Pangu spacing).

Shared directives translate hard constraints into explicit prohibitions for the agent and enforce content-driven quantity (numbers in the template serve only as baseline minimums).

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。

Further down in the same file lies another rule: the quantity of output slides / frames / cards / sections is determined entirely by the actual length and information structure of the [User Content]—explaining why templates of this type do not break as content grows longer: each section gets at least one card/segment, and the template merely provides a pool of layouts.

Actual execution is handled by the coding agent CLI already installed and authenticated on the user's local machine: the host spawns a child process, passes the prompt to it, and captures the HTML stream from stdout.

next/src/lib/agents/invoke.ts

import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";

What is happening here: The template skill provides only prompts; capabilities (including code generation and tool execution) come from the existing permissions of the host CLI; the skill directory itself contains no script entry points, so tier assessment considers only in-directory assets (host behaviors are not graded).

/api/convert is the execution path for templates: it combines skill.body with user content into a prompt and passes it to invokeAgent.

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

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

Edit mode follows a separate buildEditPrompt path (minimal diff editing, disabling file tools, requiring direct streaming of the complete HTML), ensuring a stable deliverable form for this template category: single-file HTML, inline CSS/SVG, and external links limited strictly to fonts and charting libraries explicitly requested by specific templates.

The output is a vertical flex column of N identical-sized cards, sized at 1080×1440 (3:4) per card, supporting both full-length continuous screenshots and individual slide captures.