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 [component|page|design-system] [--style <style>] [--framework <fw>]

Arguments

[component|page|design-system]

UI target

Optional target: one component, one page, or a reusable design-system. Omit it to analyze the visible experience from the surrounding brief.

/ak:ui-ux-pro-max page

Shared options

--style <style>

Style keyword

Bias packaged style search toward a named look such as minimal, dark-mode, or glassmorphism. It does not skip accessibility or touch checks.

/ak:ui-ux-pro-max --style dark-mode
--framework <fw>

Framework

Prefer stack guidance for a named framework such as react, nextjs, vue, or react-native. It does not invent undocumented stacks.

/ak:ui-ux-pro-max --framework react

Subcommands

component Component
/ak:ui-ux-pro-max component [--style <style>] [--framework <fw>]

Design or review one UI component: states, tokens, interaction, and accessibility.

--style <style>
Bias the component recommendation toward a named style.
--framework <fw>
Prefer component patterns for the named framework.

Outcome: Component-level tokens, states, anti-patterns, and accessibility requirements before code.

/ak:ui-ux-pro-max component
page Page
/ak:ui-ux-pro-max page [--style <style>] [--framework <fw>]

Design or review one page: hierarchy, responsive layout, states, and interaction.

--style <style>
Bias page look and density toward a named style.
--framework <fw>
Prefer page patterns for the named framework.

Outcome: Page structure, responsive rules, component states, and a pre-delivery checklist for that screen.

/ak:ui-ux-pro-max page
design-system Design system
/ak:ui-ux-pro-max design-system [--style <style>] [--framework <fw>]

Generate a reasoned baseline: product fit, style, color, typography, layout, and anti-patterns.

--style <style>
Bias the system search toward a named style family.
--framework <fw>
Prefer token and component guidance for the named framework.

Outcome: Selected and rejected directions, semantic tokens, type and spacing scales, and accessibility requirements.

/ak:ui-ux-pro-max design-system

Special Operations

Bundled CLI design-system search

Skill-level flags are only --style and --framework. Bundled search CLI flags stay off the slash command unless those two tokens are used.

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.

Default design brief Recommended 
/ak:ui-ux-pro-max
Use when:
A visible experience needs style, tokens, and accessibility guidance before writing UI code.
Expected:
Analyzes product context from nearby work, starts from packaged design intelligence, and returns selected directions, semantic tokens, states, and a pre-delivery accessibility checklist.
Component with style 
/ak:ui-ux-pro-max component --style minimal
Use when:
One component needs tokens, states, and interaction rules biased toward a named look.
Expected:
Scopes work to that component, biases packaged style search toward minimal, and still requires contrast, touch targets, and keyboard reachability before delivery.
Page with framework 
/ak:ui-ux-pro-max page --framework react
Use when:
One page needs hierarchy, responsive layout, and stack-specific React guidance.
Expected:
Reviews that page for layout, states, and interaction, then applies React-oriented stack guidance without inventing undocumented frameworks.
Guideline review 
/ak:ui-ux-pro-max review the checkout form against UI and accessibility guidelines
Use when:
Existing interface code needs a guideline review rather than a new visual direction.
Expected:
Reviews the existing interface for accessibility, touch targets, labels, and visual consistency, and reports concrete violations instead of inventing a new design system.
Design system 
/ak:ui-ux-pro-max design-system
Use when:
A product area needs a reusable baseline of style, color, type, and anti-patterns before code.
Expected:
Runs the design-system path, returns selected plus rejected directions, semantic tokens, type and spacing scales, and accessibility requirements that are not proven by palette alone.

Handled Scope

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

Next