# Vkc Wizardkit

> Build step-based wizard UIs (step UI, fixed bottom CTA with safe-area, localStorage draft save, runtime validation, submit event logging). Use for visa assessment, doc generation, admin queue inputs.

- Skill: `majiayu000/vkc-wizardkit` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/vkc-wizardkit`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/vkc-wizardkit/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/vkc-wizardkit

---


# VKC WizardKit

## When to use

- You need a multi-step form (visa precheck, document generation, lead intake, admin queue)

## Required UX contract

- Step indicator (current step / total)
- Fixed bottom CTA (primary action) with safe-area padding
- Draft persistence via `localStorage` (recover after refresh)
- Runtime validation before advancing or submitting
- Submission event logging (via `POST /api/events`)

## Implementation shape (recommended)

- UI: a template-level wrapper under `src/components/templates/**` (Wizard layout)
- Logic: a hook under `src/lib/hooks/**` (draft storage, step nav)
- API: submit via `src/repo/<domain>/**` + `src/app/api/**`

## Reference spec

- `.codex/skills/vkc-wizardkit/references/wizard-ui-spec.md`