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

Marketing Kit

/ak:web-design-guidelines

Review UI against Web Interface Guidelines

Fresh Web Interface Guidelines review for UI code, accessibility, UX audits, design checks, and site best-practice findings.

01

Fetch latest

02

Resolve target

03

Read files

04

Apply rules

Rule 01

Fetch fresh rules every time; do not rely on a stale local memory of the guidelines.

Rule 02

Review the user's specified files or ask for scope when absent.

Rule 03

Findings must be concrete, terse, and file:line grounded.

Execution Map

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

01

Start

Input, scope, route

  1. 1 Fetch latest Fetch the latest guidelines from the Vercel Labs raw command.md URL before each review.
  2. 2 Resolve target Use the provided file or pattern; if none is specified, ask which files should be reviewed.
02

Work

Agent / skill execution

  1. 3 Read files Read the specified UI code files or matched pattern scope before applying rules.
  2. 4 Apply rules Check all fetched rules, including accessibility, interface behavior, UX quality, and site best practices.
03

Verify

Gate, review, validation

  1. 5 Find evidence Anchor findings to concrete file and line evidence instead of broad opinions.
  2. 6 Output terse Return findings in the terse file:line format specified by the fetched guidelines.

Sample Prompt

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

Review files Recommended 
/ak:web-design-guidelines src/app/page.tsx
Use when:
Use when the user points to a concrete UI file or pattern.
Expected:
Fresh guideline findings in file:line format with concise evidence and practical remediation notes.
Audit site code 
/ak:web-design-guidelines src/components/**/*.tsx
Use when:
Use when auditing multiple UI components against current guidelines.
Expected:
Terse list of concrete violations, affected locations, and the guideline principle behind each issue.
Pricing page audit 
/ak:web-design-guidelines audit the pricing page UI
Use when:
A live UI surface needs a fresh Web Interface Guidelines review.
Expected:
Lists file:line findings with the guideline principle, evidence, and a practical remediation for each issue.

Handled Scope

  • UI code review
  • Accessibility checks
  • UX best practices
  • Design audit findings
  • Terse evidence-backed reporting

Artifacts Produced

Guideline findings

Pattern

file:line terse finding

Output follows the fetched guideline instructions, not a generic review template.

Next