Check your pages at phone, tablet and desktop sizes

Layout problems at each screen width, with a screenshot and the element that breaks.

  • You start it: When you start it

What it does

The task

Open each URL in this list: urls. View each page at widths of 360, 390, 768, 1024 and 1440 pixels. Look for text or images that overflow, sideways scrolling, elements that overlap, tap targets smaller than 24 by 24 pixels and menus that do not open. Take a screenshot of each problem. Write a list in a new Google Doc with the URL, the width, the element and the problem, the worst first.

  • It works in any website and Google Docs, in the workspace you pick, and signs in with passwords from your Cuiar vault.
  • It runs once, when you start it.

What you give it

BlankWhat to giveExample
urlsThe pages to check, separated by commashttps://brightleaf.app/, https://brightleaf.app/pricing, https://brightleaf.app/signup

What you get back

An example run with the example values above. Your run uses your own data.

3 pages at 5 widths: 6 problems

URLWidthElementProblem
/pricing360Plan tableScrolls sideways, the last column is cut off
/768Main menuThe menu button does not open the menu
/pricing390Start trial buttonCovers the price text
/signup360Terms linkTap target is 16 x 14 px

... 2 more

Screenshots are in the doc "Responsive check, 4 Nov".

Run it in Cuiar

  1. 01

    Open it

    Click Use in Cuiar on this page. The side panel opens with the task in the composer.

  2. 02

    Fill in the blank

    Type urls. Tab moves to the next blank.

  3. 03

    Run it

    Run sends it to the agent. Follow each step in the panel, and stop it at any time.

From the terminal

cuiar exec "Open each URL in this list: https://brightleaf.app/, https://brightleaf.app/pricing, https://brightleaf.app/signup. View each page at widths of 360, 390, 768, 1024 and 1440 pixels. Look for text or images that overflow, sideways scrolling, elements that overlap, tap targets smaller than 24 by 24 pixels and menus that do not open. Take a screenshot of each problem. Write a list in a new Google Doc with the URL, the width, the element and the problem, the worst first."

Run it from your AI agent

Claude Code, Codex, Cursor and other MCP clients reach Cuiar at https://mcp.cuiar.com/mcp. Add the server one time, then ask for the task in plain words, or call run_task yourself.

1. Add Cuiar to Claude Code

claude mcp add --transport http cuiar https://mcp.cuiar.com/mcp

2. Ask your agent

Use the Cuiar tool run_task to run my "Check your pages at phone, tablet and desktop sizes" template with urls = https://brightleaf.app/, https://brightleaf.app/pricing, https://brightleaf.app/signup.

Setup for other agents: AI agents.

The tool call

{
  "name": "run_task",
  "arguments": {
    "task": "Open each URL in this list: https://brightleaf.app/, https://brightleaf.app/pricing, https://brightleaf.app/signup. View each page at widths of 360, 390, 768, 1024 and 1440 pixels. Look for text or images that overflow, sideways scrolling, elements that overlap, tap targets smaller than 24 by 24 pixels and menus that do not open. Take a screenshot of each problem. Write a list in a new Google Doc with the URL, the width, the element and the problem, the worst first."
  }
}
All engineering templates