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-styling

shadcn/ui and Tailwind Styling

Builds accessible React UI with shadcn/ui, Radix primitives, Tailwind utilities, themes, dark mode, responsive layouts, design tokens, canvas-quality visuals, and helper scripts.

01

Confirm UI context

02

Initialize stack

03

Add components

04

Compose primitives

Rule 01

Compose primitives before inventing custom components

Rule 02

Use Tailwind utility classes directly; extract only for real repetition

Rule 03

Design mobile-first and keep dark mode consistent

Rule 04

Accessibility-first means keyboard, focus, labels, and screen-reader behavior

Execution Map

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

01

Start

Input, scope, route

  1. 1 Confirm UI context Use for React frameworks, accessible components, utility styling, responsive layouts, design systems, visual designs, tables, charts, or command palettes.
  2. 2 Initialize stack Run shadcn init for component-plus-Tailwind setup, or configure Tailwind-only for projects that do not need shadcn components.
02

Work

Agent / skill execution

  1. 3 Add components Use shadcn add or the helper script to install button, card, dialog, form, table, command, and other needed components.
  2. 4 Compose primitives Build complex UI from small, composable Radix/shadcn primitives rather than monolithic custom widgets.
03

Verify

Gate, review, validation

  1. 5 Apply utilities Use Tailwind classes for layout, spacing, typography, colors, borders, shadows, responsive variants, and dark mode.
  2. 6 Customize theme Define CSS variables, semantic tokens, palettes, fonts, variants, next-themes integration, and custom utilities.
04

Close

Report, handoff, artifact

  1. 7 Check accessibility Use Radix accessibility, semantic HTML, focus states, keyboard navigation, screen-reader support, and form validation patterns.
  2. 8 Craft visual quality Apply visual hierarchy, consistent tokens, mobile-first responsiveness, dark-mode parity, performance-friendly classes, and canvas design principles.

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-styling [component or layout]

Arguments

[component or layout] Required

UI surface or styling request

Component, page, layout, visual artifact, theme, token, responsive behavior, accessibility state, and file boundary to implement or refine. Include protected files, package-change approval, target breakpoints, light/dark expectations, and the checks that prove the UI works.

/ak:ui-styling "Add an accessible account dialog using existing tokens; preserve components.json, support keyboard focus and reduced motion, test light/dark at mobile and desktop, and do not overwrite existing UI files"

Sample Prompt

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

Accessible dialog form Recommended 
/ak:ui-styling build an accessible account dialog form with validation, focus return, dark mode, and mobile layout
Use when:
A React UI needs shadcn/Radix form and dialog primitives styled with Tailwind utilities.
Expected:
Selects shadcn components, composes Form/Input/Button/Dialog patterns, adds validation messages, keyboard focus behavior, responsive spacing, and dark-mode classes.
Theme tokens 
/ak:ui-styling customize dashboard theme tokens, color palette, typography, component variants, and a theme toggle
Use when:
An interface needs consistent theme customization across colors, fonts, variants, and light/dark behavior.
Expected:
Uses the theme guidance to define CSS variables and semantic tokens, wire dark-mode behavior, and keep component variants aligned with the design system.
Responsive data UI 
/ak:ui-styling create responsive analytics cards, a data table, loading states, and command palette styling
Use when:
A data-heavy screen needs mobile-first Tailwind layout, shadcn display components, and visual hierarchy.
Expected:
Builds cards, tables, and command patterns from composable primitives with Tailwind breakpoints, state styling, accessible structure, and dark-mode parity.
Canvas visual system 
/ak:ui-styling design a canvas-based launch poster system with minimal text, refined composition, and reusable visual tokens
Use when:
The task asks for a polished visual design, poster, brand material, or prototype with immediate visual feedback.
Expected:
Applies the canvas design-system references for philosophy-driven composition, color and spatial systems, minimal text, and presentation-quality visual output.

Handled Scope

  • shadcn/ui
  • Radix UI
  • Tailwind CSS
  • themes
  • dark mode
  • responsive design
  • forms
  • visual systems

Next