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

/ak:show-off

Showcase HTML Presentation

Creates preference-aware, self-contained showcase pages with bilingual or single-language content, frontend-design quality gates, optional screenshots, publishing, and editorial visual layers.

01

Resolve preferences

02

Register plan

03

Analyze mission

04

Write content

Rule 01

A showcase is held to product-UI quality, not demo slop

Rule 02

Preferences are workflow controls and must be resolved before planning

Rule 03

Screenshots and publishing are opt-out capable but must be reflected in the plan

Rule 04

Never include credentials or API keys in generated HTML

Execution Map

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

01

Start

Input, scope, route

  1. 1 Resolve preferences Read stored screenshot, publishing, and language preferences before content analysis; apply explicit overrides and persist durable changes.
  2. 2 Register plan Invoke project-management, create the dated plan folder, record arguments/preferences, and register always-on plus conditional capture/publish tasks.
02

Work

Agent / skill execution

  1. 3 Analyze mission Split the request into a hero plus two to six sections, search the web for evidence, and load any available writing style.
  2. 4 Write content Write `assets/showoff/<mission-name>/content.md` with organized sections, citations, and the resolved language mode.
03

Verify

Gate, review, validation

  1. 5 Publish content draft If publishing is enabled, publish the markdown with agentwiki; otherwise keep it local and mark the publish task skipped.
  2. 6 Design HTML Activate frontend-design to build a self-contained page with a strong hero, smooth sections, responsive ratios, theme toggle, Vietnamese-safe fonts, and optional visual layers.
04

Close

Report, handoff, artifact

  1. 7 Capture and publish Capture section images when screenshots are enabled, use the rws fallback only when publishing makes the page public, then publish/update the static site or report the local path.
  2. 8 Open and hand off Open the resulting HTML page, run the five-dimension design handoff check, and fix failures or list known limitations explicitly.

Syntax, arguments, subcommands

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

Syntax

/ak:show-off [markdown-or-prompt] [--no-screenshots] [--no-publish] [--languages en|vi|en,vi] [--no-antv|--no-diagram-design|--no-editorial-visuals]

Arguments

[markdown-or-prompt] Required

Showcase mission

Prompt, Markdown brief, or source material to turn into a self-contained showcase. State the mission, audience, evidence standard, publication boundary, screenshot choice, and language; do not include credentials or sensitive private data.

/ak:show-off "Create an English-only launch demo from release-notes.md. Local only, no screenshots, for this run only. Cite every external claim and open the final HTML for review."

Shared options

--no-screenshots

Skip screenshots

Disable local section capture and remote ReviewWeb fallback, then mark capture skipped. Without “for this run only,” this preference is persisted before planning.

/ak:show-off "Turn this launch note into a showcase" --no-screenshots
--no-publish

Local only

Skip agentwiki document/static-site publication and keep outputs local; this also makes ReviewWeb fallback ineligible. Without a one-run qualifier, the opt-out is persisted.

/ak:show-off "Make a product milestone story" --no-publish
--languages en|vi|en,vi

Language mode

Choose English-only, Vietnamese-only, or bilingual Vietnamese/English content. Single-language modes must not add the other language or a bilingual toggle.

/ak:show-off "Create a customer-facing milestone story" --languages en
--no-antv

No AntV layer

Disable AntV Infographic tiles for non-hero KPI, ranked-list, or quadrant panels for this run; the frontend-design hero still remains mandatory.

/ak:show-off "Create a launch story" --no-antv
--no-diagram-design

No diagram-design

Disable the diagram-design enhancement layer for architecture, process, and data-flow visuals inside sections.

/ak:show-off "Create an architecture recap showcase" --no-diagram-design
--no-editorial-visuals

No editorial visuals

Disable both additive non-hero editorial visual layers while preserving the core self-contained showcase build.

/ak:show-off "Create a project recap" --no-editorial-visuals

Sample Prompt

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

Default showcase Recommended 
/ak:show-off "Create a showcase page for our realtime dashboard launch"
Use when:
Use when you need a polished self-contained demo or visual presentation page.
Expected:
Resolves show-off preferences, registers the plan, writes cited content, builds frontend-design quality HTML, captures sections, publishes when enabled, and runs the handoff gate.
Skip screenshots 
/ak:show-off "Turn this launch note into a showcase" --no-screenshots
Use when:
Use when you only need the local or published HTML page, not section image exports.
Expected:
Persists the screenshot opt-out unless scoped otherwise, registers capture as skipped, still writes content, builds the showcase page, opens it, and reports the HTML path.
English local-only page 
/ak:show-off "Make a customer-facing product milestone story" --no-publish --languages en
Use when:
Use when the showcase must stay local and use English-only copy with no bilingual toggle.
Expected:
Applies the local-only and English language preferences, skips agentwiki publishing and rws fallback, creates the cited markdown plus HTML artifact, and reports local outputs.
Plain architecture recap 
/ak:show-off "Create an architecture recap showcase" --no-diagram-design --no-editorial-visuals
Use when:
Use when you want the showcase without diagram-design or additive non-hero editorial visuals.
Expected:
Keeps the required frontend-design hero and responsive sections, disables diagram-design and editorial visual enhancements, then follows the normal capture, publish, and handoff gates.

Handled Scope

  • self-contained HTML
  • bilingual showcase copy
  • section screenshots
  • static publishing
  • handoff review

Next