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:web-design-guidelines

Review UI against Web Interface Guidelines

Review UI code against the latest Web Interface Guidelines for accessibility, UX, and design best-practice compliance, then report terse file:line findings.

01

Fetch rules

02

Resolve target

03

Read UI code

04

Apply all rules

Rule 01

Always fetch fresh guidelines; the source document owns the current rules.

Rule 02

Review the requested UI surface, not the whole app by default.

Rule 03

Findings must be actionable and line-specific.

Rule 04

Accessibility and UX checks come from the guideline source, not personal taste.

Execution Map

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

01

Start

Input, scope, route

  1. 1 Fetch rules Retrieve the latest command.md from the Web Interface Guidelines source before each review.
  2. 2 Resolve target Use the provided file or pattern; if none was supplied, ask which UI files to review.
02

Work

Agent / skill execution

  1. 3 Read UI code Open only the specified surfaces so the audit stays bounded to the requested interface.
  2. 4 Apply all rules Check the fetched accessibility, interaction, layout, content, and UX rules without cherry-picking.
03

Verify

Gate, review, validation

  1. 5 Pin evidence Attach each issue to an exact file and line so the user can act on it immediately.
  2. 6 Report tersely Output findings in the terse file:line format required by the fetched guidelines.

Syntax, arguments, subcommands

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

Syntax

/ak:web-design-guidelines [file-or-pattern]

Arguments

[file-or-pattern]

Files to review

One or more exact UI files or a narrow pattern to check. If omitted, the skill asks for the review scope instead of defaulting to the whole repository.

/ak:web-design-guidelines "src/components/account-dialog.tsx src/styles/theme.css"

Sample Prompt

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

Audit one component Recommended 
/ak:web-design-guidelines src/components/AppHeader.tsx
Use when:
A UI file needs an accessibility or UX guideline review.
Expected:
Fetches the fresh Web Interface Guidelines, reads only the component file, applies every rule, and reports terse file:line findings.
Audit a route set 
/ak:web-design-guidelines "src/app/**/*.tsx"
Use when:
A bounded route or component set needs Web Interface Guidelines compliance review.
Expected:
Fetches the guideline source, reads the matched UI files, checks all fetched rules, and keeps output limited to guideline-specified findings.
Ask for scope first 
/ak:web-design-guidelines
Use when:
You want a UI review but have not chosen the files or pattern yet.
Expected:
Asks which files or pattern to review before fetching the current guidelines and checking the selected UI code against them.

Handled Scope

  • Fetch rules
  • Resolve target
  • Read UI code
  • Apply all rules
  • Pin evidence
  • Report tersely

Artifacts Produced

Guideline findings

Pattern

file:line terse findings

Each finding points to the violating UI code and follows the fetched guideline output format.

Next