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:ui-ux-pro-max

UI/UX Design Intelligence

Provides searchable, packaged UI/UX design intelligence for product fit, style, color palettes, typography, landing structure, charts, accessibility, interaction, responsive behavior, app polish, and React Native stack guidance.

01

Decide activation

02

Analyze requirements

03

Generate design system

04

Persist hierarchy

Rule 01

If it looks, feels, moves, or is interacted with, UI/UX rules apply

Rule 02

Start from a complete design system, then deep-dive domains

Rule 03

Accessibility and touch rules are critical, not polish

Rule 04

Semantic tokens beat raw per-screen hex values

Execution Map

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

01

Start

Input, scope, route

  1. 1 Decide activation Use the skill when work changes how an interface looks, feels, moves, is structured, or is interacted with.
  2. 2 Analyze requirements Extract product type, target audience, usage context, style keywords, platform, and stack.
02

Work

Agent / skill execution

  1. 3 Generate design system Start with the design-system search to combine product, style, color, landing, typography, reasoning rules, and anti-patterns.
  2. 4 Persist hierarchy When continuity matters, persist MASTER.md and optional page overrides; page files override Master for that page.
03

Verify

Gate, review, validation

  1. 5 Deep-search domains Query product, style, color, typography, chart, UX, google-fonts, landing, react, web, or prompt domains for specific decisions.
  2. 6 Apply stack guidance Use stack-specific guidance such as React Native navigation, list performance, accessibility labels, touch targets, and safe areas.
04

Close

Report, handoff, artifact

  1. 7 Implement with rules Apply priority rules for accessibility, touch, performance, style, layout, typography, animation, forms, navigation, and charts.
  2. 8 Pre-delivery review Run UX validation plus critical/high checklist items across small phone, landscape, dark mode, reduced motion, and large dynamic text.

Syntax, arguments, subcommands

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

Syntax

/ak:ui-ux-pro-max [UI/UX task brief]

Arguments

[UI/UX task brief]

UI/UX task brief

Optional natural-language brief describing the visible experience to design, review, fix, improve, or turn into a design system. Include product type, audience, stack, page or component, style keywords, constraints, and desired artifact when known.

/ak:ui-ux-pro-max design an accessible mobile-first checkout system for a subscription app with dark mode

Special Operations

Bundled CLI design-system search

The Skill has no documented top-level mode flags. Its bundled search CLI can combine packaged product, style, color, landing, typography, and reasoning data for a baseline recommendation.

Bundled CLI focused domains

Focused searches belong to the packaged CLI datasets such as style, color, typography, chart, ux, react, or web; use them as point-in-time guidance, not live standards.

Approved persistence only

The bundled CLI can persist an approved master design system and page overrides under design-system; review names, paths, tokens, and migration impact before writing.

React Native dataset boundary

React Native is the only packaged stack-specific dataset in the bundled CLI. Do not infer support for undocumented stacks from the Skill description.

Sample Prompt

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

Generate a design system Recommended 
/ak:ui-ux-pro-max design an accessible mobile-first checkout system for a subscription app with dark mode, reduced motion, and implementation-ready tokens
Use when:
Use when a new page or product area needs reasoned style, palette, typography, layout, states, and anti-pattern guidance before code.
Expected:
Frames product context, starts from the bundled design-system search, and returns selected plus rejected directions, semantic tokens, type and spacing scales, responsive rules, component states, and accessibility requirements.
Review an existing UI 
/ak:ui-ux-pro-max review this checkout page for accessibility, trust, loading, error, empty states, and mobile interaction
Use when:
Use when an existing page, component, navigation pattern, form, animation, or mobile interaction needs prioritized UX and accessibility review.
Expected:
Applies the priority categories from accessibility and touch through performance, layout, forms, navigation, and charts, then reports concrete anti-patterns, fixes, and evidence still needed.
Persist approved rules 
/ak:ui-ux-pro-max create a master design system for a wellness booking app and add page-specific checkout overrides
Use when:
Use when a project needs a reusable master design system and page-specific exceptions instead of one-off terminal guidance.
Expected:
Uses the persist workflow only for approved rules, explains the MASTER.md plus pages override hierarchy, and calls out names, paths, tokens, and migration risks before writing.
Choose chart guidance 
/ak:ui-ux-pro-max recommend accessible charts for realtime analytics with keyboard tooltips, legends, empty states, and failure states
Use when:
Use when a data-heavy screen needs chart types matched to user tasks, device constraints, and accessibility requirements.
Expected:
Matches chart types to trend, comparison, proportion, or funnel tasks and includes responsive simplification, legends, tooltips, keyboard reachability, contrast, table or text alternatives, and error handling.

Handled Scope

  • accessibility
  • touch interaction
  • responsive layout
  • color and typography
  • animation
  • forms
  • navigation
  • charts
  • React Native UX

Next