OpenSkillIndex← back to search
claude-code

Awesome-omni-skill ui-iteration

Iterate on UI visuals by editing code, hot reloading, capturing screenshots, and refining in loops.

install
source · Clone the upstream repo
git clone https://github.com/diegosouzapw/awesome-omni-skill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/design/ui-iteration" ~/.claude/skills/diegosouzapw-awesome-omni-skill-ui-iteration && rm -rf "$T"
manifest: skills/design/ui-iteration/SKILL.md
source content

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.