Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Frame Flowchart Sticky · nexu-io | DecimalAI

nexu-io/frame-flowchart-sticky

NewSkillScoreMaintained

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

design-mediaby nexu-io

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/nexu-io-frame-flowchart-sticky/SKILL.md

decimalai skills pull nexu-io-frame-flowchart-sticky --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/nexu-io-frame-flowchart-sticky/SKILL.md https://app.decimal.ai/s/nexu-io-frame-flowchart-sticky/SKILL.md

Raw file: /s/nexu-io-frame-flowchart-sticky/SKILL.md ↗ · machine-readable summary at /s/nexu-io-frame-flowchart-sticky.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 47d ago

No — -5% lift+16% tokens0% turns9% of whole cases pass with skill (2/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-19	✗→✓	▲ Improved	13%	0%
case-21	✗→✓	▲ Improved	11%	0%
case-04	✓→✗	▼ Worse	201%	0%
case-05	✓→✗	▼ Worse	11%	0%
case-06	✓→✗	▼ Worse	11%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

nexu-io / html-anything

next/src/lib/templates/skills/frame-flowchart-sticky/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/3/2026Version v1

Skill contents

SKILL.md

【模板: 便利贴流程图帧 (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)。
必须用用户的真实流程内容; 节点文字直接来自用户输入。

Illustrative Want to see what nexu-io/frame-flowchart-sticky would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/12/2026, 16:15 UTC · 22 cases

Lift

-5%

9% vs 14%

Agent turns

0%

1.0 vs 1.0

Tokens

+16%

6,858.55 vs 5,911.45

fail → pass · 2fail → fail · 17pass → fail · 3

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-08 Generate a single HTML whiteboard page showing our security incident escalation workflow (Detection, Triage, Severity Classification, Containment, Retrospective). Incorporate Lucide webfont icons and a high-contrast dark blue background.	fail→fail	31,692	30,629	-3%	1	1	0%	6,184	6,857	+11%	0	0	—
case-01 Can you turn our user onboarding process into a whiteboard sticky-note flowchart as a standalone HTML page? Here are the 6 steps: 1. User Sign-up, 2. Email Verification, 3. Profile Setup, 4. Team Invitation, 5. Initial Workspace Creation, and 6. Interactive Tour. Make it look like a physical collaboration board with colored sticky notes, connecting arrows, and smooth hover interactions for our team presentation.	fail→fail	29,595	28,808	-3%	1	1	0%	6,233	6,905	+11%	0	0	—
case-02 I need a visual workflow diagram for our customer refund process rendered as a single-file HTML page that looks like post-it notes pinned to a whiteboard. The steps are: Customer submits ticket, AI evaluates claim, Manager manual approval, Warehouse return check, Refund processing, and Confirmation email sent. Please include a visual sticky note layout, connecting paths with arrowheads, and interactive hover effects.	fail→fail	29,795	28,436	-5%	1	1	0%	6,219	6,892	+11%	0	0	—
case-03 Please generate a single HTML file displaying an e-commerce order fulfillment pipeline using a sticky note whiteboard aesthetic. The sequence has 5 stages: New Order Placed, Payment Verification, Item Packaging, Logistics Carrier Pickup, and Customer Delivery. It should feature handwritten-style text, subtle paper shadows, dynamic hover scaling, and smooth connector lines between the stages.	fail→fail	31,502	31,472	-0%	1	1	0%	6,212	6,885	+11%	0	0	—
case-04 We need to document our software team's git branching strategy in our technical wiki. Please write a text-based Mermaid.js flowchart block showing main, develop, feature, and release branches with branching logic.	pass→fail	13,922	32,119	+131%	1	1	0%	2,276	6,856	+201%	0	0	—
case-05 Create a high-performance interactive node graph editor using HTML5 Canvas or WebGL that allows users to dynamically add, drag, pan, zoom, and inspect thousands of network nodes in a dark node-graph workspace.	pass→fail	29,819	30,901	+4%	1	1	0%	6,183	6,857	+11%	0	0	—
case-06 Build a dark-mode SaaS analytics executive dashboard single-page interface using standard Tailwind CSS flex layouts, complete with metric KPI cards, data density tables, and sidebar navigation menus.	pass→fail	29,041	29,021	-0%	1	1	0%	6,176	6,849	+11%	0	0	—
case-07 Create a visual whiteboard HTML document illustrating our database migration pipeline: 1. Schema Dump, 2. Field Mapping, 3. Batch Transformation, 4. Target Load, 5. Integrity Check. Use dark mode with Inter font and standard sharp card borders.	fail→fail	29,688	28,647	-4%	1	1	0%	6,195	6,868	+11%	0	0	—
case-09 Render an HTML visual board for our social media content approval flow: Idea Pitch -> Draft Review -> Legal Check -> Design Assets -> Scheduled Post. Align all stages in a perfectly centered vertical CSS flex grid using standard Arial typography.	fail→fail	27,781	30,795	+11%	1	1	0%	5,948	6,858	+15%	0	0	—
case-10 Build an HTML workflow board for employee offboarding (Account Revocation, Equipment Return, Exit Interview, Final Payroll). Use FontAwesome CDN icons and heavy drop pins on top of each card.	fail→fail	28,437	51,520	+81%	1	1	0%	6,179	6,852	+11%	0	0	—
case-11 Design an HTML workflow map for SaaS trial conversion: Visitor Registration -> Product Onboarding -> Feature Gate Hit -> Upgrade Prompt -> Payment Complete. Render it as a high-tech corporate dashboard grid.	fail→fail	30,414	28,626	-6%	1	1	0%	6,179	6,852	+11%	0	0	—
case-12 Construct an HTML workflow frame for our release pipeline (Code Commit, Unit Tests, Container Build, Staging Deploy, Production Smoke Test). Render it with a pitch-black terminal theme and neon green connector lines.	fail→fail	29,569	30,747	+4%	1	1	0%	6,153	6,856	+11%	0	0	—
case-13 Build a whiteboard workflow frame HTML page for feature delivery: Spec Review, Design Signoff, Sprint Planning, Feature Flag Rollout, Analytics Audit. Adhere to a strict grid with red pushpin icons on every note.	fail→fail	27,487	28,936	+5%	1	1	0%	6,185	6,858	+11%	0	0	—
case-14 Design an HTML flowchart for fintech user verification: Document Upload -> OCR Extraction -> Biometric Liveness -> AML Database Check -> Approval Decision. Use Inter typography and dark slate background.	fail→fail	25,297	28,360	+12%	1	1	0%	6,176	6,849	+11%	0	0	—
case-15 Produce a single HTML workflow frame for issue handling: Report Submitted -> Severity Scoring -> Developer Assignment -> PR Creation -> Verification. Use Google Material Icons webfont stylesheet.	fail→fail	22,764	26,896	+18%	1	1	0%	5,889	6,846	+16%	0	0	—
case-16 Provide an HTML workflow frame for international money transfer: FX Quote, Compliance Screen, Account Debit, SWIFT Dispatch, Recipient Settlement. Format on a dark charcoal #0f172a canvas.	fail→fail	27,475	27,030	-2%	1	1	0%	6,182	6,855	+11%	0	0	—
case-17 Generate an HTML flow diagram for mobile user signup: App Download, Phone Number Input, SMS OTP, Profile Creation, Initial Sync. Use Tailwind CSS default Inter font.	fail→fail	25,033	27,717	+11%	1	1	0%	6,174	6,847	+11%	0	0	—
case-18 Create an HTML diagram showing warehouse restock steps: Low Stock Alert -> Vendor PO Generation -> Shipping Notice -> Dock Receiving -> Stock Allocation. Use full viewport dark fluid background layout.	fail→fail	25,917	26,127	+1%	1	1	0%	6,176	6,849	+11%	0	0	—
case-19 Produce an HTML flow diagram for healthcare booking: Slot Search, Insurance Verification, Provider Selection, Co-pay Payment, Calendar Invite. Use standard corporate blue rounded cards with straight lines.	fail→pass	23,189	24,799	+7%	1	1	0%	6,073	6,850	+13%	0	0	—
case-20 Construct an HTML workflow frame for SaaS billing renewals: Expiry Warning -> Payment Method Authorization -> Invoice Generation -> Receipt Email -> Access Extended. Pins should attach each card to a dark board.	fail→fail	51,057	28,174	-45%	1	1	0%	6,178	6,851	+11%	0	0	—
case-21 Build an HTML process map for ISO compliance check: Evidence Gathering -> Gap Analysis -> Remediation Plan -> Auditor Review -> Certificate Issuance. Render as a dark mode enterprise dashboard.	fail→pass	26,353	27,554	+5%	1	1	0%	6,176	6,849	+11%	0	0	—
case-22 Generate an HTML visual workflow for marketing creative approval: Brief Submission -> Initial Draft -> Brand Compliance -> Stakeholder Review -> Asset Publish. Load FontAwesome icon CSS from CDN.	fail→fail	20,491	26,469	+29%	1	1	0%	4,706	6,847	+45%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of -5 percentage points is the difference between those two pass rates over the 22 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 13.6%
Pass rate with the skill: 9.1%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 3
Skill version measured: v1
Run completed: 8/12/2026, 16:15 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-19

Prompt

Produce an HTML flow diagram for healthcare booking: Slot Search, Insurance Verification, Provider Selection, Co-pay Payment, Calendar Invite. Use standard corporate blue rounded cards with straight lines.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

No signals yet — run a benchmark or collect evaluated traces to earn a score.

Verified on gemini-3.6-flash · re-tested 46 days ago

Other measured skills in the registry, with their headline benchmark lift.