Agent skill

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.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/vkc-wizardkit-lee-sang-bok-vkc-2

Metadata

Additional technical details for this skill

short description
Wizard UI kit workflow

SKILL.md

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

Didn't find tool you were looking for?

Be as detailed as possible for better results