---
name: screens-builder
description: Create, revise, inspect, and export App Store or Google Play screenshot compositions through the Screens website and its window.screens browser API. Use when a user asks an agent to generate a screenshot set, apply a Screens template or preset, refine screenshot copy or layout, place supplied app imagery into Screens, or export Screens compositions as PNG or ZIP files.
---

# Screens Builder

Build screenshot sets through the supported browser API at `https://screens.uicomet.com/`.

This file is the public agent instruction set for Screens. Fetch the API reference at
[https://screens.uicomet.com/skill/api.md](https://screens.uicomet.com/skill/api.md) before
constructing API calls.

## Workflow

1. Open Screens in a desktop-sized browser viewport. Use the deployed URL unless the user asks to
   work against a local build.
2. Read [https://screens.uicomet.com/skill/api.md](https://screens.uicomet.com/skill/api.md) before
   constructing API calls.
3. Evaluate `await window.screens.ready()` in the page, then inspect
   `window.screens.getCapabilities()` and `window.screens.getState()`.
4. Gather the user's product name, core benefits, desired story order, brand colors, and supplied
   screenshots or artwork. Prefer user-provided assets. Do not invent product claims.
5. Compose one clear idea per screen. Use short headlines, supporting copy only when useful, and
   consistent color and device treatment across the set.
6. Use `replaceAll` only when the user intends to replace the current composition. Otherwise use
   `add`, `update`, `applyPreset`, or `applyTemplate`.
7. Await every mutation, call `render()`, and visually inspect the complete canvas. Check text
   wrapping, contrast, image crops, screen order, and consistency. Refine with focused `update`
   calls and inspect again.
8. Export with `exportPng` or `exportZip`. Leave downloads enabled for browser-driven delivery.

## Asset Handling

- Prefer `data:image/*` URLs for deterministic export.
- Use ordinary HTTP(S) image URLs only when the host permits cross-origin loading; remote images
  can render in a browser yet still fail capture because of CORS.
- Use supplied artwork as-is unless the user explicitly requests image generation or editing.
- Never claim the page API can read an arbitrary local filesystem path. Convert or upload local
  assets through capabilities available in the controlling environment.

## Failure Handling

Catch errors and inspect `error.code` plus `error.details`. Correct invalid payloads rather than
clicking around the UI to bypass validation. If rendering reports a failed asset, replace that
asset with an export-safe source and render again.

Preserve the user's existing composition unless replacement is part of the request. Each mutation
is one undoable editor action.