skills.rest
CyanAutomation
CyanAutomationCOMMUNITY
Explore all skills by this author →
GitHub

ui-playwright

Audits the motion-in-ocean web UI with Playwright for layout, accessibility, and responsiveness across breakpoints.

1|Updated Jan 14, 2026
Search Tags:#ui#accessibility#audit#playwright#ui-testing#responsive-design
One-click install
npx skills add https://github.com/CyanAutomation/motioninocean --skill ui-playwright
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-playwright
Source: https://github.com/CyanAutomation/motioninocean/tree/main/.github/skills/ui-playwright
Command: npx skills add https://github.com/CyanAutomation/motioninocean --skill ui-playwright

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit motion-in-ocean's web UI for usability, accessibility, and responsive behavior.

Core Features & Use Cases

  • Comprehensive visual/layout checks for both webcam and management modes.
  • Accessibility and keyboard-navigation evaluation across breakpoints.
  • Automated reporting with UI-AUDIT-REPORT.md and audit artifacts.

Quick Start

Run a Playwright-based UI audit against the motion-in-ocean web UI to verify layout, accessibility, and responsive behavior across modes.

Frequently Asked Questions about ui-playwright

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

FAQPage Schema
How do I run a Playwright UI audit for responsive design and accessibility?▼

Run a Playwright UI audit to evaluate layout, accessibility, and responsive behavior across desktop, tablet, and mobile breakpoints. The automated process uses mock camera support to test webcam and management modes, generating screenshots and a UI-AUDIT-REPORT.md artifact.

What is covered in a responsive design and accessibility audit for a web UI?▼

A responsive design and accessibility audit covers visual layout checks, keyboard navigation evaluation, and breakpoint behavior across desktop, tablet, and mobile devices. It assesses both webcam viewer and management console modes from design QA through release readiness.

Can I use Playwright automation to test webcam viewer UI modes?▼

Yes, Playwright automation supports webcam viewer UI testing using mock camera support. It evaluates the motion-in-ocean web UI for layout consistency, accessibility compliance, and responsive behavior across multiple viewing modes and breakpoints.

Does the UI audit generate reports with screenshots for release readiness?▼

The UI audit generates a UI-AUDIT-REPORT.md artifact along with captured screenshots. These audit artifacts document layout, accessibility, and responsive behavior results across desktop, tablet, and mobile breakpoints for design QA and release readiness verification.

What's the best way to automate accessibility checks across desktop and mobile breakpoints?▼

Automate accessibility checks using Playwright to evaluate keyboard navigation and layout across desktop, tablet, and mobile breakpoints. The audit applies visual checks to both webcam and management console modes, producing a comprehensive UI-AUDIT-REPORT.md with screenshots.

Do I need mock camera support to test a webcam viewer management console UI?▼

Mock camera support is required to test the webcam viewer and management console UI. The audit relies on mock camera integration within Playwright automation to evaluate layout, accessibility, and responsive behavior across desktop, tablet, and mobile breakpoints.

Related Skills

Explore More Design & Creative Skills→
CyanAutomationCyanAutomation
1

pi-camera-troubleshooting

Diagnose Raspberry Pi camera startup and streaming failures in containerized deployments.

Community
Intermediate
jatwell93jatwell93

audit

Audit frontend codebases for accessibility, performance, theming, and responsive design issues.

Community
Advanced
XIYBHKXIYBHK
1

webapp-testing Web 应用测试

Automate Playwright browser tests for local web apps with screenshots and logs.

Community
Intermediate
PrasadTelasulaPrasadTelasula

responsive-design

Implement mobile-first responsive layouts using Tailwind CSS breakpoints.

Community
Advanced