Checklist UI

By default, sunboard init wires the built-in <Sunboard.Checklist /> — a generic floating widget. /sunboard.checklist-ui replaces it with a custom component that matches your app's design system and mounts it in the runtime wrapper. The useChecklist() hook owns the data; the skill owns the visual layer.

When to use it

• The default floating widget doesn't match your look, or you want the checklist somewhere specific — a sidebar panel, a home-page card, a nav dropdown.

What happens

1. Inventories your design system — Tailwind, shadcn, MUI, CSS modules, your icon library, and how dark mode works.
2. Writes a component at app/components/sunboard/onboarding-checklist.tsx (or src/... for Vite) that renders from useChecklist() and reuses your own primitives.
3. Handles the completion screen when the spec defines one.
4. Mounts it in sunboard-provider.tsx, replacing <Sunboard.Checklist /> (tours and hotspots stay as they are).
5. Asks where it should live, then previews it against your real app.

The hook contract

Everything you render comes from useChecklist() — copy is already token-interpolated, so you never re-interpolate:

const {
  visible,          // render nothing when false
  title,            // user-facing heading (pre-interpolated)
  subtitle,         // optional eyebrow
  steps,            // ChecklistViewStep[]
  progress,         // 0..100
  isCompleted,      // (key) => boolean
  startStep,        // (step) => void — handles navigation + tour launch
  completion,       // success-screen content, when present
  dismissCompletion // () => void
} = useChecklist();

Related