sstobo/convex-skills
Overview
This skill provides practical guidance for building interactive workflow visualizations using Vercel AI Elements together with React Flow in Next.js apps. It documents component assembly, node and edge patterns, and recommended configurations to create editable, performant node-based diagrams. Use it to accelerate implementation of canvas-based workflow editors, process maps, and AI-driven flow visualizations.
How this skill works
The skill describes how to compose Canvas, Node, Edge, Connection, Controls, Panel, and Toolbar components to render a React Flow canvas prewired for workflow scenarios. It explains node data shapes, custom node type rendering, edge types for active or conditional paths, and how to wire connection behaviors and UI controls. Example code shows node and edge arrays, nodeTypes/edgeTypes maps, and how to mount controls and panels inside the Canvas.
When to use it
- Building interactive node-based workflow editors or diagramming tools.
- Visualizing process flows, decision branches, and AI pipelines in Next.js apps.
- Implementing custom nodes with structured headers, content, and footers.
- Adding contextual node toolbars and canvas-level panels or controls.
- Creating conditional or animated edge styles to indicate active paths.
Best practices
- Model node data with clear fields for label, description, handles, content, and footer to keep renderers simple.
- Use nodeTypes and edgeTypes to separate presentation from data and reuse components across workflows.
- Mark active flows with animated edges and mark error/conditional routes with a temporary edge type.
- Keep Canvas fitView enabled for initial layout and expose Controls for zoom/pan ergonomics.
- Place export or global actions in a Panel to keep node toolbars focused on contextual actions.
Example use cases
- A visual editor for AI pipelines where each node represents a model step and edges indicate data flow.
- A business process map with decision nodes and conditional outputs visualized using temporary edges.
- An operations dashboard that highlights currently active workflows via animated edges.
- A low-code automation builder allowing users to add, edit, and connect custom nodes.
- Embedding a compact toolbar on each node for quick actions like edit, duplicate, or delete.
FAQ
Set handles: { target: boolean, source: boolean } in each node's data and use the Node component's handles prop to reflect that configuration.
When should I use animated vs temporary edges?
Use animated edges to indicate active or live paths. Use temporary edges to show conditional, error, or transient paths that are not part of the main flow.
12 skills
This skill guides building interactive workflow visualizations with AI Elements and React Flow in Next.js projects, enabling custom nodes, edges, and panels.
This skill helps organize multi-turn conversations by managing user threads, histories, and metadata for coherent interactions.
This skill guides you through initializing Convex agents, managing threads, and generating LLM responses for chat-based interactions.
This skill guides you through setting up Better Auth with Convex and TanStack Start, enabling secure SSR, routes, and sign in flows.
This skill enforces per-user and global rate limits to control message frequency and token usage, preserving budget and fair access.
This skill enables agents to search knowledge bases and ground responses with retrieval augmented generation for accurate, contextually grounded answers.
This skill enables agents to call Convex tools, external APIs, and databases to fetch data, perform actions, and automate workflows.
This skill guides you to implement Convex mutation functions with robust validation, scheduling, and transactional patterns for reliable data updates.
This skill guides you in implementing Convex query functions with indexing, pagination, and full-text search to improve data retrieval.
This skill enables real-time, non-blocking streaming of agent responses to UIs, improving responsiveness and multi-client collaboration.
This skill guides you through Convex and TanStack Start integration, enabling reactive full-stack apps with best practices for queries, auth, routing, and SSR.
Tracks LLM token consumption and usage metrics for billing, monitoring, and optimization. Use this to log token usage, calculate costs, generate invoices, and understand which agents or users consume the most resources.
