home / skills / basedhardware / omi / browser-automation

browser-automation skill

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

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

Review the files below or copy the command above to add this skill to your agents.

Files (4)

SKILL.md

1.7 KB

---
name: browser-automation
description: "Browser testing, design-to-code conversion, accessibility auditing, and visual debugging. Use for web development, testing, and design implementation."
---

# Browser Automation Skill

Browser automation capabilities for testing, design-to-code, accessibility auditing, and visual debugging.

## When to Use

Use this skill when:
- Testing web applications
- Converting designs to code
- Auditing accessibility
- Visual debugging
- Automated testing workflows

## Capabilities

### Testing

- Navigate to URLs
- Click elements
- Type in inputs
- Scroll pages
- Capture screenshots
- Read console output
- Monitor network traffic

### Design to Code

- Analyze design mockups
- Generate HTML/CSS code
- Match layouts, colors, spacing
- Use design sidebar for adjustments

### Accessibility

- WCAG compliance checks
- Color contrast verification
- Semantic HTML validation
- Keyboard navigation testing

## Workflows

### Testing Applications

```
@browser Test the login flow:
1. Navigate to /login
2. Fill in email and password
3. Click submit
4. Verify redirect to dashboard
5. Check for console errors
```

### Design to Code

```
@browser Analyze this design mockup and generate the HTML/CSS code
```

### Accessibility Auditing

```
@browser Check accessibility:
- Color contrast ratios
- Semantic HTML
- ARIA labels
- Keyboard navigation
```

## Security

- Browser tools require manual approval by default
- Configure allow/block lists in settings
- Never use auto-run with untrusted code

## Related Resources

- Rule: `.cursor/rules/agent-browser.mdc`
- Commands: `/browser-test`, `/accessibility-audit`
- Agent: `.cursor/skills/browser-automation/agents/browser-automation.md`

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

Is manual approval required for browser actions?

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.