Frontend React

Merged Skills

• state-management: Zustand stores, selectors, subscriptions
• internationalization: i18n, translation, locale patterns
• performance: React.memo, useMemo, useCallback optimization
• authentication: Login flows, token storage, auth guards
• websocket-realtime: WebSocket client, reconnection, message handling

Critical Gotchas

Rules

Avoid

Patterns

// Pattern 1: Component with Zustand selector
const items = useStore((s) => s.items);
const Card: FC<{item: Item}> = ({ item }) => (
  <div key={item.id}>{item.name}</div>
);

// Pattern 2: Store with persistence
export const useStore = create<State>()(
  persist(
    (set) => ({
      items: [],
      addItem: (i) => set((s) => ({ items: [...s.items, i] }))
    }),
    { name: 'store-key' }
  )
);

// Pattern 3: Async state capture (CRITICAL)
const handleSave = async () => {
  const capturedParams = { ...localParams };  // Capture BEFORE async
  await updateNode(nodeId, { data: { ...node.data, ...capturedParams }});
  await saveCurrentWorkflow();  // Persist to backend
};

// Pattern 4: Execution visualization in BlockNode
const executionStatus = (data as any).executionStatus as NodeExecutionStatus;
const borderColor = executionStatus ? statusColors[executionStatus] : categoryColor;
const isExecuting = executionStatus === 'running';

// Pattern 5: Auth-aware API call
const fetchData = async () => {
  try {
    const response = await api.get('/resource');
    return response.data;
  } catch (error) {
    if (error.response?.status === 401) {
      logout();  // Redirect, don't show error
      return;
    }
    throw error;
  }
};

Execution Visualization

Commands