Mmcp.market

frame-flowchart-sticky skill

by nexu-io·nexu-io/html-anything·9.0k stars·Apache-2.0

SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm

A100/100content scan

Is the frame-flowchart-sticky skill safe?

Clean: nothing in its files matched our rules. We read 3 files in the folder on 2026-09-28.

No findings.

Install the frame-flowchart-sticky skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/html-anything.git /tmp/html-anything
mkdir -p ~/.claude/skills
cp -r /tmp/html-anything/next/src/lib/templates/skills/frame-flowchart-sticky ~/.claude/skills/frame-flowchart-sticky
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

【模板: 便利贴流程图帧 (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)】

  • 用 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。
  • 一个"光标"装饰 ( arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。

【设计细节】

  • 至少 5 个节点, 最多 12 个。
  • 节点排布不要全部居中对齐, 要有一点白板风的"随手贴"感, 但保证连接线清晰不交叉。
  • 严禁: 全屏深色背景、霓虹色、企业 dashboard 风格。
  • 字体不能用 Inter / 衬线, 必须手写感。
  • 单文件 HTML, 不要外部图标库 (用 inline SVG)。
  • 必须用用户的真实流程内容; 节点文字直接来自用户输入。

More skills from nexu-io/html-anything

  • Aarticle-magazineSubstack / Medium 高级感长文排版, 适合公众号、博客发布
  • Aarticle-sketchnote-editorial把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节
  • Ablog-post杂志感长文, 含 masthead、hero、figures、pull quote、作者署名
  • Acard-twitter推特金句 / 数据卡, 适合配推文
  • Acard-xiaohongshu小红书风格知识卡片, 多张联排可滑动浏览
  • Acompetitive-teardown定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告
  • Adashboard固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图
  • Adata-report把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
  • Adating-web消费感配对仪表板: 信号 ticker + KPI + 30 天柱状 + 趋势
  • Adeck-blueprint奶油纸 + 锈红 + 蓝图网格 mask + 黑边硬卡片 + pipeline 盒
  • Adeck-course-module暖纸背景 + Playfair, 左侧学习目标常驻, 含 MCQ 自测页
  • Adeck-dir-key-nav8 页单色背景, 160px display + 4px accent + Mono 箭头列表

All agent skills → · MCP servers