UI Agent Browser

Use this skill when a Laravel task asks to build, redesign, implement, inspect, or judge frontend/UI/UX quality before the final responsive audit.

Treat the browser as the design surface and the backend contract as the source of truth. A UI is not done because the code compiles; it is done when the page communicates its purpose quickly, supports the real workflow, is wired to real routes or API contracts, and survives visual inspection in meaningful states.

Workflow

1. Detect the target stack: Blade, Livewire, Inertia, Filament, Nova, Flux, Alpine, React, Vue, Tailwind, Bootstrap, component library, icon library, build tool, route structure, and test runner.
2. Inspect the existing frontend in a browser before designing: current route, layout shell, navigation, component language, visual density, interaction pattern, console errors, and rendered DOM or accessibility tree.
3. Read the backend surface that the UI must connect to: routes, controllers, Form Requests, policies, API Resources, DTOs, Inertia props, Livewire public state/actions, model relationships, events, files, and pagination.
4. Define the UI contract before styling: data needed, user actions, request payloads, validation errors, authorization-dependent controls, loading states, empty states, success states, and failure states.
5. Design to the detected stack, browser baseline, and project conventions. Reuse existing layouts, tokens, components, tables, forms, modals, navigation, and icons before introducing a new visual language.
6. Implement the UI in the target stack, wired to real backend routes, Livewire actions, Inertia props, or API clients. Avoid static-only screens unless the requested artifact is explicitly a mockup.
7. Inspect the result in a real browser with realistic data, screenshots, console output, interaction states, and at least mobile and desktop viewports.
8. Iterate on hierarchy, spacing, alignment, text fit, color, controls, and backend state mapping until the interface feels intentional and works through the real workflow.
9. Use responsive-ui-testing for the final viewport matrix when responsiveness, overflow, clipping, modals, tables, or visual regression matters.

Browser Tool Strategy