VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Engineer Kit

Beta only

/ak:page-builder

Dynamic page builder

Integrate or extend a project page builder with the host stack, then operate drafts, previews, and publishing. Not for one-off page design or a generic API wrapper.

01

Discover the host

02

Define contracts

03

Connect editor

04

Expose interfaces

Rule 01

Agents are the primary operators; humans customize through the editor.

Rule 02

Reuse the host stack and current page owners; do not create a second source of page truth.

Rule 03

setup, update, and operate are skill arguments, not executable ak CLI subcommands.

Rule 04

A missing required creator or unsupported runtime is a named incomplete capability, not a pass.

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Discover the host Resolve the app, existing CMS/builder, render model, components, auth/storage, and deployment from the current project before choosing an adapter.
  2. 2 Define contracts Define the block registry and serialized page contract, including widget sizing, then implement shared page operations on current owners.
02

Work

Agent / skill execution

  1. 3 Connect editor Connect the accessible, responsive, touch-friendly editor and preview/publication lifecycle to those operations. Verify a real block before scaling.
  2. 4 Expose interfaces Expose API, CLI, MCP stdio/HTTP, and WebMCP as requested, plus SEO/Markdown exports and in-scope deployment preparation.
03

Verify

Gate, review, validation

  1. 5 Create operator skill Use installed ak-skill-creator to create or update the project operator skill from working contracts. Required for setup and contract updates.
  2. 6 Verify the journey Complete the accepted journey, fix failures, and report artifacts, tested interfaces, operator-skill path, and any unverified coverage.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:page-builder [setup|update|operate] [project-path] [request]

Arguments

[setup|update|operate]

Mode

Skill argument inferred from the request when omitted. Explicit arguments win. Not an `ak` CLI subcommand.

/ak:page-builder setup ./apps/storefront
[project-path]

Project path

Host app path for setup or update. Omit when the current workspace is the host.

/ak:page-builder setup ./apps/storefront
[request]

Request

What to integrate, extend, or operate. For update/operate, change only the requested behavior.

/ak:page-builder operate Create a pricing draft and share its preview

Subcommands

setup New integration
/ak:page-builder setup [project-path] [request]

Discover the host, implement contracts, editor, interfaces, operator skill, and verification for a new builder.

Outcome:

/ak:page-builder setup ./apps/storefront
update Scoped extension
/ak:page-builder update [project-path] [request]

Change the requested behavior and affected contracts. Do not rebuild unrelated subsystems.

Outcome:

/ak:page-builder update Add the existing ProductGrid block with category bindings
operate Operate pages
/ak:page-builder operate [request]

Use the project operator skill when available; otherwise operate here and create that skill after verifying contracts.

Outcome:

/ak:page-builder operate Create a pricing draft and share its preview

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Setup a storefront builder Recommended 
/ak:page-builder setup ./apps/storefront
Use when:
Use when the project needs a reusable composition system on its existing stack.
Expected:
Discovers the host, implements registry and page operations, verifies a real block, exposes requested interfaces, and creates the project operator skill.
Add an existing block 
/ak:page-builder update Add the existing ProductGrid block with category bindings
Use when:
Use when extending a builder without rebuilding unrelated subsystems.
Expected:
Registers the existing ProductGrid with category bindings, updates affected contracts, and refreshes operator-skill guidance for the new block.
Operate a pricing draft 
/ak:page-builder operate Create a pricing draft and share its preview
Use when:
Use for routine page changes when the operator skill is missing or this skill must operate the builder.
Expected:
Creates a saved pricing draft, shares an available preview, and does not claim live publication unless that step is verified.

Handled Scope

  • Discover the host
  • Define contracts
  • Connect editor
  • Expose interfaces
  • Create operator skill
  • Verify the journey

Next