iterating-with-ai-and-mcp

Orchestrate a HotSwan MCP loop to edit, reload, screenshot, and evaluate Compose screens.

472|16|Updated Apr 29, 2026
One-click install
npx skills add https://github.com/skydoves/compose-performance-skills --skill iterating-with-ai-and-mcp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: iterating-with-ai-and-mcp
Source: https://github.com/skydoves/compose-performance-skills/tree/main/hot-reload/iterating-with-ai-and-mcp
Command: npx skills add https://github.com/skydoves/compose-performance-skills --skill iterating-with-ai-and-mcp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables an AI agent to drive a HotSwan MCP loop that edits Kotlin files, triggers hot reloads, captures device screenshots, and iterates UI toward a mock, reducing manual debugging effort.

Core Features & Use Cases

  • Seven MCP tools: exposes hotswan_get_status, hotswan_reload, hotswan_take_screenshot, hotswan_start_snapshot, hotswan_stop_snapshot, hotswan_select_variant, and hotswan_build_and_install to power end-to-end UI iteration.
  • Canonical iteration loop: edit → reload → screenshot → evaluate → decide, with optional snapshot rollback for safe experimentation.
  • Fallback safety: detects schema changes and uses a full install path when hot reload is not sufficient.
  • Use cases: QA automation, AI-assisted UI tuning against design mocks, and rapid visual iteration for Compose screens.

Quick Start

Instruct the agent to connect to the HotSwan MCP server, verify watcher state is WATCHING, start a snapshot, edit the target Kotlin file, trigger a reload, capture a screenshot, and iterate until the result matches the design intent.

Frequently Asked Questions about iterating-with-ai-and-mcp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use an AI agent to hot reload Jetpack Compose UI against a design mock?

To hot reload Jetpack Compose UI with an AI agent, orchestrate an iteration loop using HotSwan MCP tools to edit Kotlin files, trigger reloads, capture screenshots, and evaluate the screen against the mock. The agent repeats this cycle until the UI matches the design intent.

Can I automate screenshot-based UI tuning for Jetpack Compose screens?

Yes, you can automate screenshot-based UI tuning for Jetpack Compose by instructing an MCP-capable AI client to use HotSwan tools. The agent captures device screenshots after reloading edited Kotlin files and visually evaluates the results to iterate automatically.

What is the typical workflow for AI-driven UI iteration with MCP and HotSwan?

The typical AI-driven UI iteration workflow follows a canonical loop: edit the target Kotlin file, trigger a hot reload, take a screenshot, evaluate the visual output, and decide on the next change. Snapshots can be started and stopped to enable safe rollback during experimentation.

Does hot reload work for schema changes in Jetpack Compose, or do I need a fallback?

Hot reload does not handle schema changes in Jetpack Compose. When schema changes are detected, the HotSwan MCP loop uses a fallback full install path, triggering the hotswan_build_and_install tool to apply the update completely.

Do I need a running HotSwan setup to use an MCP AI agent for Compose UI iteration?

Yes, a running HotSwan setup is required alongside an MCP-capable AI client. The AI agent needs access to the HotSwan MCP server and its seven tools to verify watcher state, manage snapshots, reload, and capture screenshots for the Compose UI iteration loop.

How do snapshot rollbacks work when an AI agent edits Compose UI code?

Snapshot rollbacks work by starting a snapshot before editing Compose UI code. If the AI agent's changes produce undesirable results, the snapshot allows the agent to revert safely and try a different approach, reducing manual debugging effort.