skills.rest
dmae97
dmae97COMMUNITY
Explore all skills by this author →
GitHub

omk-multimodal-ui-review

Review UI screenshots, mockups, and Playwright traces to identify visual mismatches and propose minimal fixes.

130|14|Updated Apr 30, 2026
Search Tags:#accessibility#frontend#responsive design#ui review#design-to-code#multimodal analysis
One-click install
npx skills add https://github.com/dmae97/oh-my-kimi --skill omk-multimodal-ui-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: omk-multimodal-ui-review
Source: https://github.com/dmae97/oh-my-kimi/tree/main/templates/skills/kimi/omk-multimodal-ui-review
Command: npx skills add https://github.com/dmae97/oh-my-kimi --skill omk-multimodal-ui-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you avoid risky frontend changes by systematically reviewing existing UI visuals before writing code, reducing layout regressions and accessibility issues.

Core Features & Use Cases

  • Screenshot-driven review: Evaluate layout, spacing, typography, color, component hierarchy, and interaction states directly from visual inputs like browser captures or videos.
  • Mismatch-to-fix mapping: Identify what appears inconsistent with the current/expected implementation and translate observations into a minimal fix plan.
  • Verification focus: Ensure proposed changes are checked for responsive behavior and accessibility impact, especially after UI edits.

Use case: you have a PR or design update where you only have screenshots and a running app; this skill helps you pinpoint discrepancies and draft an implementation plan before modifying frontend code.

Quick Start

Use omk-multimodal-ui-review to analyze the provided UI screenshots and produce visual observations, likely code locations, a mismatch summary, a fix plan, and a verification checklist.

Frequently Asked Questions about omk-multimodal-ui-review

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

FAQPage Schema
How do I review UI screenshots to prevent frontend layout regressions?▼

Review UI screenshots by evaluating visual structure and interaction states to prevent frontend layout regressions. This process identifies visual mismatches, locates likely code areas, and proposes minimal diffs before applying changes.

What is design-to-implementation alignment from browser captures?▼

Design-to-implementation alignment from browser captures is the process of matching visual mockups to actual frontend code. It translates observed visual inconsistencies into a targeted fix plan with minimal code diffs.

Can I use Playwright traces for UI regression triage?▼

Yes, you can use Playwright traces for UI regression triage. The review process accepts Playwright traces and videos to identify interaction states, locate code areas, and verify responsive and accessibility impacts.

What's the best way to map visual mismatches from mockups to code fixes?▼

The best way to map visual mismatches to code fixes is through evidence-based code review. This approach evaluates component hierarchy from mockups, identifies inconsistencies, and translates them into a minimal fix plan.

How do I verify accessibility impact after proposing frontend edits?▼

You verify accessibility impact after proposing frontend edits by generating a verification checklist. This checklist ensures proposed changes are systematically checked for responsive behavior and accessibility compliance.

Related Skills

Explore More Design & Creative Skills→
SebastienDegodezSebastienDegodez
8

playwright-evidence

Capture Playwright test screenshots, videos, and traces on failure.

Community
Advanced
t-stringst-strings

Frontend Accessibility

Review frontend UI code for HTML semantics, ARIA, keyboard navigation, and contrast.

Official
Basic
VidyaBodepudiVidyaBodepudi
2

frontend-ui-engineering

Review web components for accessibility, responsiveness, and performance.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced