ClaudeSuperPower
SubmitLog in

frame-flowchart-sticky

Skill

SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.

0Other

Install

git clone https://github.com/nexu-io/open-design.git ~/.claude/skills/frame-flowchart-sticky

What is frame-flowchart-sticky?

SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.

What this can do

Capabilities declared in this component's own frontmatter — not inferred.

Inherit all session tools

Declares no tool restrictions — inherits every session tool

~25 tokens of context used while enabled, before you invoke anything

Documentation

README · ~1 min read

【模板: 便利贴流程图帧 (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 (虚线 = 条件分支)。

Reviews

Log in to leave a review.

No reviews yet — be the first.

Explore related

Other things in this space — across every part of the ecosystem, not just skills.