<!-- source-hash: 907a9b870b0d3e5b46afc308145fda3d -->
Custom React hook for managing onboarding state with localStorage persistence and cross-tab synchronization. Provides methods to track completed/skipped steps and maintains state consistency across browser tabs.

## Key Components

- **useOnboardingState** - Main hook that manages onboarding state with configurable storage key
- **OnboardingStepConfig** - Interface defining step structure with title, description, actions, and completion checks
- **OnboardingState** - Type alias for state structure (re-exported from storage utils)

The hook provides state management functions:
- `markComplete/markSkipped` - Update individual step status
- `markMultipleComplete` - Batch update multiple steps
- `isStepComplete/isStepSkipped` - Check step status
- `allStepsComplete` - Validate if all steps are done
- `dismissOnboarding` - Hide the onboarding flow

## Usage Example

```typescript
import { useOnboardingState } from './use-onboarding-state'

function OnboardingComponent() {
  const {
    state,
    markComplete,
    markSkipped,
    isStepComplete,
    allStepsComplete
  } = useOnboardingState('my-app-onboarding')

  const steps = [
    {
      id: 'setup-profile',
      title: 'Setup Profile',
      description: 'Complete your profile information',
      actionIcon: () => <Icon />,
      actionText: 'Setup Now',
      completedText: 'Profile Complete',
      onAction: () => markComplete('setup-profile'),
      checkComplete: () => !!user.profile
    }
  ]

  if (allStepsComplete(steps) || state.dismissed) {
    return null
  }

  return <OnboardingFlow steps={steps} />
}
```