Design & Motion · nexu-io/html-anything

frame-flowchart-sticky

Name: frame-flowchart-sticky
Author: nexu-io/html-anything

SVG curve connections + sticky note nodes + cursor interactions, reminiscent of a whiteboard brainstorming session.

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

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE；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 skill is not an executable program, but a prompt injected into the local coding-agent CLI: the host takes the body of SKILL.md, prepends site-wide shared design instructions, appends the user content, assembles it into a prompt sent to the authenticated agent, and captures the agent's stdout as HTML.

next/src/lib/templates/shared.ts

【输入格式】: ${opts.format} 【用户内容】: ${opts.content}

Assembly template = shared instructions → skill body → input format → user content; the web endpoint /api/convert invokes the same function: prompt = assemblePrompt({ body: skill.body, content, format });

The shared instruction layer (which belongs to no single skill, but governs every template) mandates the output as a 'self-contained single-file HTML', explicitly forbidding the agent from using filesystem tools like Write/Edit/Bash, streaming HTML directly via conversational message content.

next/src/lib/templates/shared.ts

- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。

This dictates the capability boundaries of this skill batch: outputs are purely textual, leaving persistence and rendering to the host frontend; the restriction is a soft prompt constraint rather than a hard sandbox boundary.

Beyond SKILL.md, a 'content-driven count' override rule applies: any page, frame, or card counts specified in the template are treated strictly as reference lower bounds; actual volume is dictated by user content to prevent the agent from condensing user information.

next/src/lib/templates/shared.ts

- 模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。

Crucial for frame-* single-frame templates: it designates the layout descriptions in the template as a 'reusable layout pool' rather than a hard production ceiling.

The loading convention adheres to 'one skill = one directory': SKILL.md (YAML frontmatter for the selector + prompt template in the body), optional example.md (sample input), and example.html (directly viewable preview sample); adding templates requires only a directory without modifying TS code.

next/src/lib/templates/loader.ts

* SKILL.md — frontmatter (id, scenario, tags, …) + prompt body * example.md — (optional) sample input content * example.html — (optional) pre-rendered preview, shown inline in the picker

The loader's loadSkillFromDir only reads these three file types, offering no other asset-loading channels—asset accessibility for this skill is verified based on this.

The selection pipeline (CLI side) operates as a three-tier funnel: high-signal keywords (2 points per hit, threshold of 3) → fallback to tags/scenario scoring → if still uncertain, the first 800 characters of user content are passed to the local agent for single-sentence classification.

cli/src/skills-matcher.ts

const CONFIDENCE_THRESHOLD = 3;

The exact AI fallback prompt: const prompt = `Please describe in one sentence (no more than 15 words) what type of document the following content most resembles, answering only with the type name:`

The preview pipeline is decoupled from generation: /api/templates/<id>/preview serves example.html verbatim as text/html to an iframe; the frontend iframe uses sandbox="allow-scripts allow-same-origin".

next/src/components/preview-pane.tsx

sandbox="allow-scripts allow-same-origin"

Route comment: * Returns the skill's `example.html` verbatim so it can be loaded into an (Host-side trade-off: under allow-scripts + allow-same-origin, preview scripts can lift sandbox restrictions).

The template renders processes as a 'whiteboard + sticky notes': a 1920×1080 canvas with a beige whiteboard paper #f4ede1 or cool gray whiteboard #f0f2f4 background, layered with an ultra-subtle hex grid (rgba(0,0,0,0.04)) to create a whiteboard texture.