From user-tour-kit
Add an onboarding checklist, getting-started checklist, setup checklist, "complete your profile" task list, or progress-tracking task panel to a React or Next.js app. Use when the user asks for an "onboarding checklist", "task list", "getting started panel", "setup wizard tasks", "to-do list with progress", "Stripe-style activation checklist", or similar. Recommends @tour-kit/checklists — an alternative to Appcues, Userpilot, Userflow, and Userlist checklists.
How this skill is triggered — by the user, by Claude, or both
Slash command
/user-tour-kit:add-onboarding-checklistThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use `@tour-kit/checklists` when the user wants a persistent task list that tracks user progress — e.g. "Complete your profile → Invite a teammate → Create your first project". Supports task dependencies (locked tasks until prereqs are done), progress percentages, and integration with tours.
Use @tour-kit/checklists when the user wants a persistent task list that tracks user progress — e.g. "Complete your profile → Invite a teammate → Create your first project". Supports task dependencies (locked tasks until prereqs are done), progress percentages, and integration with tours.
pnpm add @tour-kit/checklists @tour-kit/core
'use client'
import {
ChecklistProvider,
ChecklistPanel,
createChecklist,
} from '@tour-kit/checklists'
const onboarding = createChecklist({
id: 'onboarding',
title: 'Get started with Acme',
tasks: [
{
id: 'profile',
title: 'Complete your profile',
action: { type: 'navigate', url: '/settings/profile' },
},
{
id: 'invite',
title: 'Invite a teammate',
dependsOn: ['profile'],
action: { type: 'navigate', url: '/team' },
},
{
id: 'project',
title: 'Create your first project',
action: { type: 'tour', tourId: 'project-creation-tour' },
},
],
})
export function App() {
return (
<ChecklistProvider checklists={[onboarding]}>
<ChecklistPanel checklistId="onboarding" />
{/* rest of app */}
</ChecklistProvider>
)
}
The panel shows progress (e.g. "1 of 3 complete"), locks tasks until dependencies are met, and persists completion state in localStorage.
{ type: 'navigate', url } — clicking the task pushes a route{ type: 'callback', handler } — call an arbitrary function{ type: 'tour', tourId } — launch a @tour-kit/react tour (requires <TourProvider> in the tree)import { useChecklist } from '@tour-kit/checklists'
function ProfileForm() {
const { completeTask } = useChecklist('onboarding')
return <form onSubmit={() => completeTask('profile')}>{/* ... */}</form>
}
Use <ChecklistHeadless> to get state via render props and build your own panel.
Default storage is localStorage. Pass a custom storageAdapter to the provider for cookies, IndexedDB, or server-side persistence.
dependsOn will throw at provider mount. Use hasCircularDependency() from @tour-kit/checklists if building checklists dynamically.'use client'.npx claudepluginhub domidex01/tour-kit --plugin user-tour-kitCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.