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

Web test automation

Design and run web test automation across Vitest, Playwright, k6, axe-core, Lighthouse, visual regression, flakiness, mobile gestures, and cross-browser quality.

01

Choose model

02

Pick layer

03

Set fixtures

04

Implement tests

Rule 01

Choose the test strategy before choosing the tool.

Rule 02

Prefer deterministic fixtures and real user-visible contracts over brittle plumbing checks.

Rule 03

Use Playwright for browser behavior, Vitest for fast unit/integration feedback, and k6 for load.

Rule 04

Treat accessibility, performance, security, visual, mobile, and cross-browser concerns as first-class release gates when requested.

Execution Map

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

01

Start

Input, scope, route

  1. 1 Choose model Select pyramid, trophy, or honeycomb testing strategy based on monolith, SPA, or microservice shape.
  2. 2 Pick layer Map the request to unit, integration, E2E, component, contract, API, load, visual, accessibility, performance, or security testing.
  3. 3 Set fixtures Prepare deterministic factories, fixtures, seeds, database isolation, or Testcontainers before executing tests.
02

Work

Agent / skill execution

  1. 4 Implement tests Use the matching reference: Vitest AAA, Playwright selectors/fixtures/shards, component tests, Pact/MSW, Supertest, or k6 patterns.
  2. 5 Cover browsers Apply cross-browser and mobile gesture matrices when device, touch, orientation, or browser compatibility matters.
  3. 6 Measure quality Run visual comparison, axe/WCAG checks, Lighthouse/Core Web Vitals, or OWASP security checks for the requested quality dimension.
03

Verify

Gate, review, validation

  1. 7 Stabilize Mitigate flakiness with robust selectors, explicit readiness, fixture control, retries only where justified, and CI sharding.
  2. 8 Analyze output Use the result analyzer to combine Playwright, Vitest, or JUnit outputs into a release-ready summary.
  3. 9 Gate release Wire CI gates in order: fast unit fail, E2E, accessibility, and performance checks.

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-testing [test-type] [target]

Arguments

[test-type]

Test surface

Optional testing area such as unit, integration, component, E2E, API, contract, accessibility, visual, performance, load, or security. This release does not define a fixed parser or enumerated values, so state the desired runner and evidence directly.

/ak:web-testing e2e "Test checkout on http://localhost:3000 with Chromium and mobile Safari emulation; use seeded test data and never contact payment production."
[target]

Target and evidence

Optional URL, module, flow, environment, auth method, test data, browsers or devices, expected behavior, and cleanup boundary. It does not grant permission to run load, security, or mutating tests against unsafe systems.

/ak:web-testing load "Measure API latency and error-rate thresholds with k6 against the staging endpoints only"

Special Operations

Initialize Playwright

The bundled init script can create best-practice config, fixtures, and example tests.

Analyze test results

The analyzer merges Playwright, Vitest, and JUnit-style reports into one summary.

Pre-release checklist

Use functional, accessibility, security, performance, and CI/CD checklists before shipping.

Sample Prompt

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

Browser E2E Recommended 
/ak:web-testing e2e "Create Playwright coverage for checkout on http://localhost:3000 with seeded data, Chromium, and mobile Safari emulation"
Use when:
A browser user journey needs repeatable automation or flakiness debugging.
Expected:
Selects Playwright fixtures, accessible selectors, sharding, trace or screenshot artifacts, and explicit evidence gaps for real devices.
Bootstrap Playwright 
/ak:web-testing "Initialize Playwright Project for apps/web with component testing enabled; keep existing files"
Use when:
A project needs Playwright configuration, fixtures, example tests, and report formats.
Expected:
Uses the initializer semantics for --dir and component testing, notes skipped existing files, and lists dependencies or browsers still to install.
Load test 
/ak:web-testing load "Measure API latency and error-rate thresholds with k6 against the staging endpoints only"
Use when:
Throughput, latency, saturation, or error-rate thresholds need safe measurement.
Expected:
Applies k6 load-testing patterns, verifies the authorized target, captures threshold results, and reports provider or environment limits.
Accessibility and visual 
/ak:web-testing accessibility visual "Audit the homepage with axe, keyboard checks, and Playwright screenshot comparison"
Use when:
Release quality depends on repeatable accessibility or visual-regression evidence.
Expected:
Uses axe/WCAG and screenshot-baseline guidance, preserves violations or diff artifacts, and warns before updating unexplained baselines.

Handled Scope

  • Choose model
  • Pick layer
  • Set fixtures
  • Implement tests
  • Cover browsers
  • Measure quality

Next