Menu
Create React Flow node components following established patterns with proper TypeScript types and store integration.
Use when CrossFrame Suite routes explicit Chinese casebook work: turning materials into reusable cases, anonymized entries, mechanisms, and retrieval indexes.
Use only when the user explicitly names crossframe-critical for a Chinese structural critique dossier, article plan, or long-form critical essay.
Use when CrossFrame Suite routes explicit Chinese proposition testing, debate analysis, hidden-premise review, rebuttal design, or withdrawal condition checks.
Use when CrossFrame Suite routes explicit Chinese reader replies, editor responses, consultation-style short answers, or boundary-aware structural advice.
Use when explicit CrossFrame work needs a Chinese critical insight essay, commentary, concept essay, public piece, or structure-to-article draft after diagnosis.
Use when CrossFrame Suite routes explicit Chinese notes for books, theories, articles, excerpts, bidirectional reading, absorption, or conflict mapping.
| name | react-flow-node-ts |
| description | Create React Flow node components following established patterns with proper TypeScript types and store integration. |
| risk | unknown |
| source | community |
| date_added | 2026-02-27 |
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.