AgentSkillsCN

vkc-wizardkit

构建基于步骤的向导式用户界面（步骤级 UI，底部固定 CTA 且适配安全区域，支持 localStorage 草稿保存、运行时校验以及提交事件日志记录）。适用于签证评估、文档生成及管理员队列输入等场景。

SKILL.md
--- frontmatter
name: vkc-wizardkit
description: 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.
metadata:
  short-description: Wizard UI kit workflow

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