ai-elements-workflow
✓This skill provides guidance for building workflow visualizations using Vercel AI Elements and React Flow. It should be used when implementing interactive node-based interfaces, workflow diagrams, or process flow visualizations in Next.js applications. Covers Canvas, Node, Edge, Connection, Controls, Panel, and Toolbar components.
Installation
SKILL.md
This skill provides comprehensive guidance for building workflow visualizations using Vercel AI Elements with React Flow.
Use animated for active paths and temporary for conditional/error paths:
| Custom Node Components | Use NodeHeader, NodeTitle, NodeDescription, NodeContent, NodeFooter for structured layouts | | Node Toolbars | Attach contextual actions to nodes via Toolbar component | | Handle Configuration | Control connections with handles: { target: boolean, source: boolean } |
This skill provides guidance for building workflow visualizations using Vercel AI Elements and React Flow. It should be used when implementing interactive node-based interfaces, workflow diagrams, or process flow visualizations in Next.js applications. Covers Canvas, Node, Edge, Connection, Controls, Panel, and Toolbar components. Source: sstobo/convex-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/sstobo/convex-skills --skill ai-elements-workflow- Source
- sstobo/convex-skills
- Category
- >_Productivity
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is ai-elements-workflow?
This skill provides guidance for building workflow visualizations using Vercel AI Elements and React Flow. It should be used when implementing interactive node-based interfaces, workflow diagrams, or process flow visualizations in Next.js applications. Covers Canvas, Node, Edge, Connection, Controls, Panel, and Toolbar components. Source: sstobo/convex-skills.
How do I install ai-elements-workflow?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/sstobo/convex-skills --skill ai-elements-workflow Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/sstobo/convex-skills
Details
- Category
- >_Productivity
- Source
- skills.sh
- First Seen
- 2026-02-01