frame-flowchart-sticky SKILL.md skillA
frame-flowchart-sticky from nexu-io/html-anything is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add nexu-io/html-anything/frame-flowchart-sticky@git:20260518.b799c28Pins git:20260518.b799c28 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- nexu-io/html-anything
- Path
next/src/lib/templates/skills/frame-flowchart-sticky/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260518.b799c28, committed May 18, 2026
- Size
- 2,704 bytes
- Repository stars
- 9,204
- License
- Apache-2.0
SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
【模板: 便利贴流程图帧 (Sticky Flowchart)】 【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。 【画布】1920×1080。背景: 米黄白板纸 `#f4ede1` 或冷灰白板 `#f0f2f4`; 加非常浅的 hex grid `rgba(0,0,0,0.04)` 让它有白板感。 【节点 (Sticky Notes)】 - 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄 `#fcd34d` / 桃 `#fca5a5` / 薄荷 `#a7f3d0` / 天 `#a5b4fc`。 - 便利贴有轻微旋转 `transform: rotate(±2deg)` 不一致, 投影 `drop-shadow(0 6px 14px rgba(0,0,0,0.12))`, 顶部胶带 `linear-gradient(...)` 装饰。 - 节点内容: 1 个 emoji 或单线 SVG icon + 大字标题 (16-20px) + 一行描述 (12px)。 - 节点字体: `Kalam` / `Caveat` / `Patrick Hand` 手写感字体 (中文用 `霞鹜文楷` 或 `LXGW WenKai Screen`)。 【连接线 (SVG)】 - 用 `<path>` Bezier 曲线连接节点, stroke `#2a2a2a`, width 2.5, `stroke-linecap: round`, `stroke-dasharray: 0` (实线) 或 `8 6` (虚线 = 条件分支)。 - 箭头终端用 `marker-end`, 黑色三角小箭头。 - 复杂节点可有循环或分支: 同一节点连出 2 条 (分叉) 或 2 条进入一节点 (合并)。 【可选交互】 - 顶部 caption (sans, 12px uppercase): "FLOW · MIGRATION · 2026"。 - 鼠标 hover 节点: 抬起阴影 + scale 1.05, 用 CSS transition。 - 一个"光标"装饰 (`<svg>` arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。 【设计细节】 - 至少 5 个节点, 最多 12 个。 - 节点排布不要全部居中对齐, 要有一点白板风的"随手贴"感, 但保证连接线清晰不交叉。 - 严禁: 全屏深色背景、霓虹色、企业 dashboard 风格。 - 字体不能用 Inter / 衬线, 必须手写感。 - 单文件 HTML, 不要外部图标库 (用 inline SVG)。 …
Read the whole file at its exact version.
How to install
mdr add nexu-io/html-anything/frame-flowchart-sticky@sha256:b8374d83cf03093dThe line at the top of this page pins the label git:20260518.b799c28, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_mt6fp6yk6feo6cf4)
1 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on May 18, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (2704 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
nexu-io/html-anything · 9,204 stars · license Apache-2.0 · pushed 2026-10-13 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_mt6fp6yk6feo6cf4 GET https://markdownregistry.com/api/v1/resolve?ref=nexu-io/html-anything/frame-flowchart-sticky GET https://markdownregistry.com/api/v1/blob/b8374d83cf03093d534c578127771281080337f8703cfbdc79af77751cfefa69
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.