browser-automation_skill

This skill automates browser testing, design-to-code generation, and accessibility checks to speed web development and quality assurance.

7.6k

GitHub Stars

1

Bundled Files

3 weeks ago

Catalog Refreshed

2 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstart where the catalogue uses aiagentskills.

npx veilstart add skill basedhardware/omi --skill browser-automation

SKILL.md1.7 KB

Overview

This skill provides browser automation for web testing, design-to-code conversion, accessibility auditing, and visual debugging. It speeds up development and QA by automating interactions, capturing visual states, and generating front-end code from mockups. Use it to reduce manual testing effort and to produce consistent, accessible UI implementations.

How this skill works

The skill drives a real browser to navigate pages, interact with elements (click, type, scroll), and capture screenshots and console/network logs. It analyzes design mockups to produce HTML/CSS that matches layout, colors, and spacing, and runs automated accessibility checks for WCAG issues, contrast, semantic structure, and keyboard navigation. Workflows are scriptable, and actions require manual approval for sensitive operations by default.

When to use it

End-to-end or regression testing of web apps
Converting Figma or mockups into production-ready HTML/CSS
Performing automated accessibility audits and remediation guidance
Visual debugging to compare expected vs. actual UI states
Integrating into CI pipelines for repeatable testing

Best practices

Run automation in isolated environments and approve sensitive browser actions manually
Start with focused test scripts (login, checkout, critical paths) before expanding coverage
Use captured screenshots and console logs to triage visual and runtime errors
Validate generated HTML/CSS in the target browser(s) and touch up edge cases manually
Maintain allow/block lists for external resources to reduce security risk

Example use cases

Automate a login flow: navigate, fill credentials, submit, verify redirect and console
Convert a homepage mockup into responsive HTML/CSS and adjust spacing with the design sidebar
Run an accessibility audit that reports contrast failures, missing ARIA labels, and keyboard traps
Capture network logs and screenshots during a flaky UI test to pinpoint regressions
Add browser automation to CI to run smoke tests on every pull request

FAQ

Yes. Sensitive browser tools require manual approval by default to protect against untrusted code.

Can it generate production-ready CSS?

It generates matching HTML/CSS as a starting point; final refinements and responsive adjustments are recommended before production.

What accessibility standards does it check?

It runs common WCAG checks including color contrast, semantic HTML validation, ARIA presence, and keyboard navigation testing.