feat: add quick template functionality to NodePalette and enhance node creation experience

ccw/frontend/src/stores/appStore.ts

@@ -364,6 +364,18 @@ if (typeof window !== 'undefined') {
       );
     }
   });
+
+  // Apply initial theme immediately (before localStorage rehydration)
+  // This ensures gradient attributes are set from the start
+  const state = useAppStore.getState();
+  applyThemeToDocument(
+    state.resolvedTheme,
+    state.colorScheme,
+    state.customHue,
+    state.gradientLevel,
+    state.enableHoverGlow,
+    state.enableBackgroundAnimation
+  );
 }
 
 // Selectors for common access patterns

ccw/frontend/src/stores/flowStore.ts

@@ -13,7 +13,7 @@ import type {
   NodeData,
   FlowEdgeData,
 } from '../types/flow';
-import { NODE_TYPE_CONFIGS as nodeConfigs } from '../types/flow';
+import { NODE_TYPE_CONFIGS as nodeConfigs, QUICK_TEMPLATES } from '../types/flow';
 
 // Helper to generate unique IDs
 const generateId = (prefix: string): string => {
@@ -257,6 +257,44 @@ export const useFlowStore = create<FlowStore>()(
         return id;
       },
 
+      addNodeFromTemplate: (templateId: string, position: { x: number; y: number }): string => {
+        const template = QUICK_TEMPLATES.find((t) => t.id === templateId);
+        if (!template) {
+          console.error(`Template not found: ${templateId}`);
+          return get().addNode(position);
+        }
+
+        const id = generateId('node');
+        const config = nodeConfigs['prompt-template'];
+
+        // Merge template data with default data
+        const nodeData: NodeData = {
+          ...config.defaultData,
+          ...template.data,
+          label: template.data.label || template.label,
+          contextRefs: template.data.contextRefs || [],
+        };
+
+        const newNode: FlowNode = {
+          id,
+          type: 'prompt-template',
+          position,
+          data: nodeData,
+        };
+
+        set(
+          (state) => ({
+            nodes: [...state.nodes, newNode],
+            isModified: true,
+            selectedNodeId: id,
+          }),
+          false,
+          'addNodeFromTemplate'
+        );
+
+        return id;
+      },
+
       updateNode: (id: string, data: Partial<NodeData>) => {
         set(
           (state) => ({