skills.rest
mizchi
mizchiCOMMUNITY
Explore all skills by this author →
Website𝕏@mizchiGitHub

vlmkit

Automate visual-regression and frontend-audit workflows for frontend components.

320|3|Updated Apr 24, 2026
Search Tags:#frontend-testing#design-token#visual-diff#a11y-audit#vlmkit#markup-synthesis
One-click install
npx skills add https://github.com/mizchi/skills --skill vlmkit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vlmkit
Source: https://github.com/mizchi/skills/tree/main/ai/vlmkit
Command: npx skills add https://github.com/mizchi/skills --skill vlmkit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Visual-regression and frontend-audit workflows for components often require coordinating multiple tools, manual comparisons, and drift detection across viewports.

Core Features & Use Cases

  • VLM-driven visual diffs across baselines and variants with per-viewport analysis
  • Markup synthesis from screenshots to propose HTML/CSS repairs or updates
  • Design-token/a11y/i18n audits to enforce consistency and accessibility standards
  • A two-stage VLM + LLM CSS auto-repair loop for iterative fixes during development and PR review

Quick Start

Install vlmkit and run vlmkit diff html <baseline> <variant> to see visual differences.

Frequently Asked Questions about vlmkit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual regression testing for frontend components across different viewports?▼

Visual regression testing is automated using VLM-driven visual diffs that compare baselines and variants across multiple viewports, providing per-viewport analysis to detect UI drift in development, PR reviews, and CI gates.

Can I automatically generate HTML and CSS fixes from a screenshot of a broken UI?▼

Markup synthesis from screenshots proposes HTML and CSS repairs or updates, feeding into a two-stage VLM and LLM auto-repair loop that iteratively applies CSS fixes to correct visual drift.

How do I audit my frontend components for design token, accessibility, and i18n compliance?▼

Design token, a11y, and i18n audits enforce consistency and accessibility standards across frontend components by analyzing markup and styling to detect deviations from established design systems.

Do I need Playwright and Node 24 to run visual diff workflows in CI gates?▼

Playwright and Node 24 or higher are required to run the visual diff workflows, which provide automated visual-regression testing and drift control for frontend components in CI environments.

What is the best way to detect and fix CSS drift during a pull request review?▼

An automated CSS-fix loop detects and repairs CSS drift during PR reviews by combining VLM-driven visual diffs with iterative LLM-generated fixes, ensuring visual baselines are maintained without manual comparison.

How does VLM-driven visual diffing compare to traditional pixel-based regression testing?▼

VLM-driven visual diffing uses vision-language models to analyze visual changes semantically across viewports, whereas traditional pixel-based tools only detect raw color differences without understanding layout or component context.

Related Skills

Explore More Software Engineering Skills→
Meraj-Uddin-MalikMeraj-Uddin-Malik

Playwright Testing

Automate visual UI testing of portfolio websites with Playwright across viewports.

Community
Intermediate
kynetic-aikynetic-ai
1

pr-review

Validate kspec task PRs against acceptance criteria and spec alignment before merging.

Official
Advanced
UlanxxUlanxx

browse

Drive a persistent Playwright browser for automated web QA and evidence capture.

Community
Advanced
nickhou1983nickhou1983
4

playwright-vlm

Automate visual regression review for Playwright tests using GPT-4o vision.

Community
Advanced