Interactive Workflow

Build an interactive HTML workflow or process diagram (cards on a fixed grid, orthogonal labelled arrows, click-to-highlight with whole-chain trace, exception routes that can be switched off, right-hand context panel, search, deep links, four switchable colour themes including a dark one) plus a PNG for slides. Use when asked for an interactive workflow, process flow, work process, process map, operating model map, framework map, or to turn a Mermaid flowchart into something clickable.

8 starsProductivity & Notes

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add abualnassr/interactive-workflow --skill interactive-workflow

Manual install

git clone --depth 1 https://github.com/abualnassr/interactive-workflow.git /tmp/interactive-workflow
mkdir -p ~/.claude/skills
cp -r /tmp/interactive-workflow/. ~/.claude/skills/interactive-workflow

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Interactive workflow diagram (v1.5.0)

Produces one self-contained HTML file (no external dependencies, works offline, opens in any browser) that maps a process as cards and labelled arrows. Clicking a card highlights what feeds it and what it feeds (direct links, or the full upstream and downstream chain) and opens a context panel on the right. Exception routes (rejections, rework, escalations, holds) are drawn red and dashed, and a switch in the header hides them to show the normal path alone. The page ships with four colour themes the viewer can switch between in the header, a search box, keyboard shortcuts and deep links to a card. A PNG of the canvas is produced for slides.

Writing rules: card titles 2 to 6 words, specific verbs ("Classify severity", not "Process data"); arrow labels name WHAT passes (a record, a decision, a document), never "next" or "then"; avoid long dashes in card and arrow text, they eat width; leave a little room in every card, because text sets wider where Inter is installed or on a Mac than in a headless check. Card, panel, stage, lane and group text is inserted as HTML: write `&amp;` for `&` and `&lt;` for `<` ("P&amp;IDs"), and inside the JavaScript strings escape double quotes as `\"`.

## 1. Gather the content first

Read the full skill on GitHub

Details

Skill name: interactive-workflow
Repository: abualnassr/interactive-workflow
License: MIT
Repo updated: 4 October 2026

FAQ

What does the Interactive Workflow skill do?

How do I install the Interactive Workflow skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add abualnassr/interactive-workflow --skill interactive-workflow. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Interactive Workflow popular?

It lives in abualnassr/interactive-workflow, which has 8 GitHub stars and 0 forks.

Related skills

Mcd Order Memory

zkk-orz/mcd-order-memory

麦当劳点餐记忆中枢——替你记住所有人的胃口、钱包和健康。把任意格式的多人点餐意愿（微信群接龙、群聊乱流、口头转述）解析成订单；按人按餐段（午餐/下午茶/晚餐/夜宵/加班餐）自动记住每个人的口味与忌口，越用越懂；出单自动查券/积分/会员价给出省钱方案（选定权在用户）；自动统计每人卡路里并按月累计；本地记账生成月账单；多人单自动生成 AA 收款卡（每人应付+微信群收款照抄清单+口头销账记欠款）；一键生成本群麦门月报战报卡。Use when 用户提到：点麦当劳、麦麦、麦当劳点餐/外卖、给娃/孩子/爸妈/老公/同事点、部门午餐/下午茶/夜宵、拼单、接龙点餐、还是上次那单/老样子（复购）、麦门、麦当劳优惠/券/积分、卡路里/热量、AA/分账/谁没付/欠款、月报/战报/本月总结、mcd order 等——即使没明说用本 skill。不处理非麦当劳餐饮。

Productivity & Notes

Founder Fundraising Outreach

evalyze-ai/founder-fundraising-outreach

Use this skill for any email or message the user wants written, replied to, improved, or followed up, with deep specialization in founder fundraising. Covers cold emails to VCs, angels, family offices, syndicates, accelerators; follow-up sequences; replies to investor questions on traction, valuation, round status, decks, competition, or skeptical pushback; due diligence prep and data rooms; post-meeting recaps; pipeline stall recovery when an investor goes silent; rewriting drafts; mass outreach. Also fires on general email tasks like "reply to this email," "draft a response," "write an email

Productivity & Notes

Meeting Minutes

Jiale077/meeting-minutes-skill

Generate Chinese meeting minutes from meeting audio, Tongyi Tingwu transcripts, optional PPT/PPTX materials, and user-provided background. Use when Codex needs to transcribe recordings with speaker labels, process an existing transcript plus audio for review, extract PPT talking points, and draft formal sales/technical meeting minutes in the user's preferred style.

Productivity & Notes

Combat Epistemology

dgriffith/combat-epistemology

Ten rationalist reasoning techniques for structured thinking. Includes taboo (semantic decompression), murphyjitsu (pre-mortem planning), doublecrux (crux identification), goalfactor (goal decomposition), aversionfactor (resistance surfacing), steelman (argument strengthening), referenceclass (base-rate anchoring), hamming (priority confrontation), innerloop (intuition extraction), and noticing (confusion detection). Use when the user asks to apply any of these techniques, or when structured reasoning would help with a decision, disagreement, plan, or estimate.

Productivity & Notes

Openclaw Genpark CognitiveSynapse

Alpha-Park/openclaw-genpark-CognitiveSynapse

OpenClaw GenPark Cognitive Synapse - ACT-R spreading activation memory and semantic association graph with automated memory consolidation.

Productivity & Notes

Amemo Skill

lockfeel/amemo-skill

amemo-skill 统一调度中心，专为 AI 工具链接麦小记 APP 而开发的技能包，专注于笔记、清单和健康数据的管理。何时用: 当用户提到「麦小记」或「amemo」，或涉及以下意图时立即调用。触发词: 保存笔记(帮我记一下/save note/记录一下) | 任务提醒(提醒我/今天去/记得要/remind me) | 查询笔记(查看笔记/找笔记/find my notes) | 查询任务(查看待办/check tasks) | 健康数据(步数/睡眠/血压/health data) | 健康简报(健康怎么样/health summary) | 登录(麦小记登录/登录麦小记/手机号+验证码/login) | AI记忆(永久记住/刷新助手记忆/save memory)。何时不用: 用户日常含数字的对话（如"100块钱""2026年3月"）不触发登录/验证码流程。

Productivity & Notes

Browse the most popular Claude skills, all productivity & notes skills, or write your own with the skills generator.