How do I install the UI Iteration skill?

Run npx skillmds@latest add diegosouzapw/ui-iteration in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is UI Iteration safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Iteration?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI Iteration free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI Iteration?

diegosouzapw (@diegosouzapw) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI Iteration by diegosouzapw — Agent Skill

Name: UI Iteration
Rating: 4.2 (5 reviews)
Author: diegosouzapw

File contents

Use this skill when the user wants iterative UI refinements with live preview and screenshots.

Core loop (repeat until objectives are met):

Inspect the current UI state and related code.
Make a small, focused UI change.
Hot reload.
Capture a screenshot with a timestamped filename.
Review the screenshot, explain what changed, and decide the next tweak.

Requirements:

Follow the user-provided commands for hot reload and screenshots when given.
If the user asks to use specific tools/commands, use them exactly as written.
Save screenshots with timestamped names (e.g., TEST-YYYYMMDD-HHMMSS.png) so progress is traceable.
Keep each iteration small and intentional; avoid large refactors during visual tuning.
If you temporarily mock states (enabled/disabled, demo text, forced visibility), revert the mocks before the final response.
Call out any errors from hot reload or rendering and fix them before continuing.
If a screenshot command requires elevated permissions, request the needed approval or ask the user to run it.

Mocking guidance:

It is acceptable to add temporary flags or demo strings to preview UI states.
Keep mock logic clearly isolated and easy to remove.
Always remove mock flags/values in the final deliverable.

Screenshot notes:

Use the device ID and output path specified by the user.
Include the full output path in your response each iteration.
If the wrong app is in front, ask the user to bring the target UI forward, then re-capture.

Tooling and command usage (examples):

Timestamp for filenames (shell):
- date +%Y%m%d-%H%M%S
Flutter hot reload:
- scripts/flutter-runctl reload -d <DEVICE_ID> -t r
- Flutter hot reload command must be run outside of sandbox environment.
Screenshot capture:
- scripts/device-screenshot take_screenshot <DEVICE_TARGET> /full/path/TEST-<TIMESTAMP>.png
- Screenshot capture command must be run outside of sandbox environment.

If the user supplies different tooling or a different platform, replace the above with their commands.

Finish criteria:

The UI meets the user's aesthetic and usability goals.
Mock code and preview-only data are removed.
Provide the final screenshot path and a concise summary of changes.

---name: ui-iterationdescription: Iterate on UI visuals by editing code, hot reloading, capturing screenshots, and refining in loops.---Use this skill when the user wants iterative UI refinements with live preview and screenshots.Core loop (repeat until objectives are met):1) Inspect the current UI state and related code.2) Make a small, focused UI change.3) Hot reload.4) Capture a screenshot with a timestamped filename.5) Review the screenshot, explain what changed, and decide the next tweak.Requirements:- Follow the user-provided commands for hot reload and screenshots when given.- If the user asks to use specific tools/commands, use them exactly as written.- Save screenshots with timestamped names (e.g., `TEST-YYYYMMDD-HHMMSS.png`) so progress is traceable.- Keep each iteration small and intentional; avoid large refactors during visual tuning.- If you temporarily mock states (enabled/disabled, demo text, forced visibility), revert the mocks before the final response.- Call out any errors from hot reload or rendering and fix them before continuing.- If a screenshot command requires elevated permissions, request the needed approval or ask the user to run it.Mocking guidance:- It is acceptable to add temporary flags or demo strings to preview UI states.- Keep mock logic clearly isolated and easy to remove.- Always remove mock flags/values in the final deliverable.Screenshot notes:- Use the device ID and output path specified by the user.- Include the full output path in your response each iteration.- If the wrong app is in front, ask the user to bring the target UI forward, then re-capture.Tooling and command usage (examples):- Timestamp for filenames (shell): - `date +%Y%m%d-%H%M%S`- Flutter hot reload: - `scripts/flutter-runctl reload -d <DEVICE_ID> -t r` - Flutter hot reload command must be run outside of sandbox environment.- Screenshot capture: - `scripts/device-screenshot take_screenshot <DEVICE_TARGET> /full/path/TEST-<TIMESTAMP>.png` - Screenshot capture command must be run outside of sandbox environment.If the user supplies different tooling or a different platform, replace the above with their commands.Finish criteria:- The UI meets the user's aesthetic and usability goals.- Mock code and preview-only data are removed.- Provide the final screenshot path and a concise summary of changes.

Frequently asked questions

UI Iteration