Scaffolds React Flow node components with TypeScript types, Zustand store integration, resizers, handles, and app-specific integration steps.
From antigravity-awesome-skillsnpx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-awesome-skillsThis skill uses the workspace's default tool permissions.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Create React Flow node components following established patterns with proper TypeScript types and store integration.
Copy templates from assets/ and replace placeholders:
{{NodeName}} → PascalCase component name (e.g., VideoNode){{nodeType}} → kebab-case type identifier (e.g., video-node){{NodeData}} → Data interface name (e.g., VideoNodeData)export const MyNode = memo(function MyNode({
id,
data,
selected,
width,
height,
}: MyNodeProps) {
const updateNode = useAppStore((state) => state.updateNode);
const canvasMode = useAppStore((state) => state.canvasMode);
return (
<>
<NodeResizer isVisible={selected && canvasMode === 'editing'} />
<div className="node-container">
<Handle type="target" position={Position.Top} />
{/* Node content */}
<Handle type="source" position={Position.Bottom} />
</div>
</>
);
});
export interface MyNodeData extends Record<string, unknown> {
title: string;
description?: string;
}
export type MyNode = Node<MyNodeData, 'my-node'>;
src/frontend/src/types/index.tssrc/frontend/src/components/nodes/src/frontend/src/components/nodes/index.tssrc/frontend/src/store/app-store.tsnodeTypesThis skill is applicable to execute the workflow or actions described in the overview.