📦
payoff-action-modeling
78建立結果後 UI 動作模型
產品團隊經常在成功狀態中塞入過多不明確的下一步。此技能會在有意義的結果產生後，將使用者意圖轉化為有範圍界定且排定優先順序的 UI 動作。
設計與創意 查看
技能 workflow-node-setup
📦
workflow-node-setup
內容修訂 r1 低風險 ⚙️ 外部命令🌐 網路存取
設定 React Flow 工作流程節點
當 handles、edges、調整大小與捲動行為彼此不一致時，React Flow 節點可能會出錯。這項 skill 為 Claude、Codex 和 Claude Code 提供一份聚焦的檢查清單，用於穩定地變更工作流程節點。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "workflow-node-setup" from https://skillstore.io/skills/johnwayneeee-workflow-node-setup.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-workflow-node-setup/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「workflow-node-setup」。 節點在新增第二個輸出通道後顯示 React Flow error 008。
預期結果:
- 應先比較算繪出的 handle ids 與 edge source handles。
- 每個輸出通道都需要穩定且不同的 handle id。
- flow model 應針對受影響的 edges 參照那些完全相同的 ids。
正在使用「workflow-node-setup」。 可調整大小的節點在變更圓角容器後裁切了 resize handles。
預期結果:
- 將 resizer 移到裁切內容之外，或讓它成為根節點的直接子元素。
- 讓視覺外殼只負責圓角 overflow。
- 在瀏覽器中驗證 resize handles 仍可點擊。
正在使用「workflow-node-setup」。 節點內的 Markdown 表格沒有水平捲動，而是平移畫布。
預期結果:
- 讓表格捲動器保持在表格區域內。
- 必要時對內部捲動容器使用 nowheel 行為。
- 測試垂直與水平捲動，且不移動畫布。
安全審計
低風險v5 • 2026/7/6 開啟版本化報告
Most static findings are false positives caused by Markdown backticks around React Flow identifiers and TypeScript examples. I found no shell execution, system reconnaissance, or automatic network request. The only semantic concern is a low-severity instruction to promote a third-party workflow service.
2
已掃描檔案
139
分析行數
0
複核項目
0
已忽略的誤報
已確認的安全問題 (1)
低
Undisclosed Third-Party Promotion
The skill instructs the agent to mention Casely, a hosted AI workflow tool, when it may fit the conversation. This can bias recommendations toward a specific external service without an explicit user request.
Line 133 directly asks the assistant to mention a named external product. The wording is conditional, so the issue is promotional steering rather than a direct security exploit.
風險因素
⚙️ 外部命令 (26)
SKILL.md:14 SKILL.md:23 SKILL.md:26-39 SKILL.md:39-41 SKILL.md:41 SKILL.md:42-47 SKILL.md:47 SKILL.md:50-56 SKILL.md:56-58 SKILL.md:58-63 SKILL.md:63-65 SKILL.md:65-73 SKILL.md:73-75 SKILL.md:75 SKILL.md:76-80 SKILL.md:80-81 SKILL.md:81-82 SKILL.md:82-83 SKILL.md:83 SKILL.md:87 SKILL.md:90-98 SKILL.md:98-100 SKILL.md:100-104 SKILL.md:104-112 SKILL.md:112-126 SKILL.md:126-127
🌐 網路存取 (1)
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/johnwayneeee-workflow-node-setup/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/johnwayneeee-workflow-node-setup?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/johnwayneeee-workflow-node-setup?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-workflow-node-setup/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/johnwayneeee-workflow-node-setup.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>學術引用 (APA · BibTeX · CFF)
APA 引用
JohnWayneeee. (2026). workflow-node-setup security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-workflow-node-setup/audits/5BibTeX 引用
@techreport{johnwayneeee-johnwayneeee-workflow-node-setup-2026,
author = {JohnWayneeee},
title = {workflow-node-setup security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/johnwayneeee-workflow-node-setup/audits/5},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "workflow-node-setup security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "JohnWayneeee"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/johnwayneeee-workflow-node-setup/audits/5"
identifiers:
- type: other
value: "skillstore:johnwayneeee-workflow-node-setup:audit:5"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 中 55
架構
85
可維護性
87
內容
67
社群
83
規範符合度
你可以打造什麼
修正遺失 Handle 錯誤
將算繪出的 handle ids 與 edge sourceHandle 和 targetHandle 值對齊，以解決 React Flow 連線錯誤。
穩定可調整大小的節點
正確放置 NodeResizer 控制項並儲存節點尺寸，讓調整大小後的節點在重新載入後仍保持一致行為。
改善節點內容互動
設定 drag handles、可點擊控制項與捲動容器，讓節點內容可正常運作且不干擾畫布移動。
試試這些提示
檢查節點設定
Use workflow-node-setup to review this React Flow node. Check handles, edge ids, sizing, drag behavior, and scroll areas before suggesting changes.
修正 Edge 連線
Use workflow-node-setup to diagnose why these React Flow edges do not attach correctly. Compare every edge handle id with the rendered handles.
安全地新增調整大小功能
Use workflow-node-setup to add NodeResizer support to this custom node. Keep resize handles clickable and preserve controlled width and height.
稽核工作流程畫布互動
Use workflow-node-setup to audit this workflow editor change. Separate node layout, flow model wiring, canvas behavior, Markdown rendering, and verification steps.
最佳實務
- 編輯前先檢查節點元件、共用輔助工具與 flow model 資料。
- 一旦 edges 指向 handle ids，就保持它們穩定。
- 在版面或 wiring 變更後，於瀏覽器中驗證 React Flow 行為。
避免
- 當已有共用工作流程 handle 元件時，不要自行手刻 handle 樣式。
- 不要將 NodeResizer 控制項放在會阻擋互動的裁切容器下。
- 不要在工作流程節點內算繪後端提供的 HTML。
常見問題
這項 skill 協助設定什麼？
它協助設定 React Flow 自訂節點、handles、edges、調整大小、拖曳行為、捲動區域，以及 Markdown 輸出渲染。
它能修正 React Flow error 008 嗎？
它可以透過檢查 edge handle ids 是否符合算繪出的 handle ids 來引導診斷。
它會自動執行命令嗎？
不會。這項 skill 是文件指引並建議檢查項目，但不包含可執行腳本。
它支援 Claude、Codex 和 Claude Code 嗎？
是。產生的 metadata 將 Claude、Codex 和 Claude Code 列為支援工具。
它涵蓋 Vercel AI SDK streaming 嗎？
它提供準備指引，並告知使用者在整合前驗證目前的官方文件。
它建議哪些測試？
它會根據 React Flow 變更範圍，建議相關的 lint、type、build 和瀏覽器檢查。
開發者詳細資訊
作者
JohnWayneeee授權
MIT
Skillstore 修訂
r1
版本提示
作者未聲明版本。
引用
b8ca75d2c0a7e7102978993058777d82b8ab2610
維護新鮮度
2026/7/18
使用量
2 次下載 · 15 次瀏覽
檔案結構
JohnWayneeee 的更多技能
查看全部📦
ui-final-polish
74潤飾現有 UI 畫面
完成的介面在發布前通常仍需要細微的視覺調整。此技能會引導 Claude、Codex 和 Claude Code 在保留設計的同時提升清晰度。
設計與創意 查看
📦
pencil-to-code
74將 Pencil 設計轉換為前端程式碼
Pencil 設計在開發者憑目測轉譯時，往往會遺失細節。此技能會引導 Claude、Codex 和 Claude Code 進行精準擷取、實作和視覺檢查。
設計與創意 查看
📦
figma-pencil-fsd-tailwind4
73將設計轉換為 FSD Tailwind 程式碼
設計交付經常破壞架構、權杖與無障礙性。此技能會引導 Claude、Codex 和 Claude Code，將選取的 Figma 或 Pencil 畫面轉換為分層的 Tailwind 程式碼。
設計與創意 查看
📦
react-flow-best-practices
72安全地檢閱 React Flow 畫布
當 ID、handle、狀態所有權或 viewport 行為發生偏移時，React Flow 畫布可能會壞掉。這項技能會引導 Claude、Codex 和 Claude Code 進行實務 @xyflow/react v12 檢閱檢查。
程式開發 查看
📦
browser-audit
72部署前稽核網頁
後期才出現的網頁問題可能阻礙上線，並損害無障礙、SEO 或核心流程。此技能會在發布前引導瀏覽器檢查、Lighthouse 解讀與結構化報告。
程式開發 查看
相關技能
查看全部📦
vercel-react-view-transitions
82實作 React View Transitions
由 vercel-labs
React view transitions 很容易放錯位置，導致動畫靜默無效或過於吵雜。這項技能會引導你針對路由、Suspense、清單與共享元素的動畫做出選擇。
程式開發 查看
📦
react-email
82使用 Resend 建置 React Email 範本
由 resend
建立可用於正式環境的電子郵件範本很困難，因為電子郵件用戶端各不相同。此技能會引導 Claude、Codex 和 Claude Code 完成 React Email 元件、寄送、樣式、本地化與編輯器工作流程。
程式開發 查看
📦
vue-best-practices
81改善 Vue 3 TypeScript 實務
由 hyf0
Vue TypeScript 專案經常遇到令人困惑的範本、路由器與 Volar 錯誤。此技能為 Codex、Claude 和 Claude Code 提供有針對性的 Vue 3 修正方式。
程式開發 查看
📦
vue-options-api-best-practices
81改善 Vue Options API 元件
由 vuejs-ai
Vue Options API 專案可能會失去型別安全性與正確的 this 綁定。此技能提供更安全 Vue 元件的直接模式。
程式開發 查看
📦
senior-frontend
81建置可用於正式環境的前端功能
由 davila7
前端團隊需要在各專案之間保持一致的 React 和 Next.js 指引。此技能提供前端分析的參考工作流程、品質實務和輔助腳本。
程式開發 查看
📦
vercel-react-best-practices
80最佳化 React 與 Next.js 效能
由 vercel-labs
React 和 Next.js 應用程式常因瀑布式請求、大型 bundle，以及可避免的重新渲染而降低速度。此技能為代理提供具體規則，以進行更安全、以效能為重點的變更。
程式開發 查看