STEEB Task Debugger

When to Use This Skill

• Tasks not completing correctly
• Task state inconsistencies between components
• Firestore synchronization errors
• Tasks disappearing or duplicating
• UI not reflecting task changes
• Performance issues with task operations

Debugging Workflow

Step 1: Identify the Issue Type

• Check if

  addTask

  function is being called correctly
• Verify task data structure matches expected

  Task

  interface
• Check for duplicate task IDs or missing required fields

• Verify

  toggleTask

  is called with correct task ID
• Check if optimistic updates are working
• Verify Firestore synchronization (if enabled)

• Confirm task exists before deletion attempt
• Check if

  deleteTask

  function removes from local state
• Verify UI re-renders after deletion

• Check if tasks are properly synchronized between components
• Verify Zustand store updates trigger re-renders
• Check for stale state or race conditions

Step 2: Run Diagnostic Commands

# Check current task state in console
console.log('Current tasks:', useTaskStore.getState().tasks);

# Check specific task properties
const task = useTaskStore.getState().tasks.find(t => t.id === 'task-id');
console.log('Task details:', task);

# Check store state
console.log('Store state:', useTaskStore.getState());

Step 3: Verify Store Functions

// Test task creation
const testTask = {
  title: 'Debug test task',
  completed: false,
  status: 'pending',
  createdAt: new Date().toISOString()
};
await useTaskStore.getState().addTask(testTask);

// Test task toggle
const taskId = 'existing-task-id';
await useTaskStore.getState().toggleTask(taskId);

// Test task deletion
await useTaskStore.getState().deleteTask(taskId);

Step 4: Check Component Integration

• Ensure

  toggleTask

  and

  deleteTask

  are properly imported
• Check if button onClick handlers prevent multiple clicks
• Verify error handling in async operations

• Ensure tasks are filtered correctly (pending vs completed)
• Check if

  useTaskStore

  updates trigger re-renders
• Verify statistics calculations are accurate

Step 5: Common Solutions

// Add this pattern to prevent multiple clicks
const [isProcessing, setIsProcessing] = useState(false);

const handleTaskAction = async (taskId) => {
  if (isProcessing) return;

  setIsProcessing(true);
  try {
    await toggleTask(taskId);
  } catch (error) {
    console.error('Task action failed:', error);
  } finally {
    setIsProcessing(false);
  }
};

// Force re-render after store update
setForceUpdate(prev => prev + 1);
// Or use proper React state management
const { tasks, toggleTask } = useTaskStore();

// Handle Firestore errors gracefully
try {
  await FirestoreTaskService.updateTask(id, updates);
} catch (error) {
  console.warn('Firestore sync failed, local changes kept:', error);
  // Continue with local state only
}

Step 6: Performance Optimization

• Implement virtual scrolling
• Add pagination or lazy loading
• Use React.memo for task components
• Debounce search/filter operations

Scripts

Quick Task Validation

# Run quick task validation
python .claude/skills/steeb-task-debugger/scripts/quick_validate.py

Task State Analyzer

# Analyze task state consistency
python .claude/skills/steeb-task-debugger/scripts/analyze_task_state.py

References

• Task interface definition in

  src/types/index.ts

• Task store implementation in

  src/store/useTaskStore.ts

• Firestore service in

  src/services/firestoreTaskService.ts

• Task components in

  src/components/Task*.tsx

Assets

• Debug checklist template for common issues
• Task state flow diagram
• Performance profiling guidelines