ui-iteration
Iterate on UI visuals by editing code, hot reloading, capturing screenshots, and refining in loops.
Best use case
ui-iteration is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Iterate on UI visuals by editing code, hot reloading, capturing screenshots, and refining in loops.
Teams using ui-iteration should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ui-iteration/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ui-iteration Compares
| Feature / Agent | ui-iteration | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Iterate on UI visuals by editing code, hot reloading, capturing screenshots, and refining in loops.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
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.
Related Skills
ai-eval-design-and-iteration
Develop "quizzes" (evals) to measure model performance on specific tasks. Use these benchmarks to guide fine-tuning, determine product UX patterns, and track performance improvements over time. Use this when launching a new AI feature, switching between model versions, or optimizing for high-stakes accuracy.
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
voxanne-branding-expert
Strategic branding, business development, and UI/UX design expertise for Voxanne AI. Combines business strategy, visual design principles, and market positioning to create enterprise-grade branding assets and go-to-market strategies. Use when designing logos, creating brand guidelines, developing marketing strategies, or positioning products against competitors like ChatGPT, Anthropic, and Google.
vibe-techdesign
Create a Technical Design Document for your MVP. Use when the user wants to plan architecture, choose tech stack, or says "plan technical design", "choose tech stack", or "how should I build this".
vapor-ui
Vapor UI design system component and icon guide, UI mockup generator, and Figma design converter. Provides component catalog, icon lookup, usage patterns, props documentation, and converts Figma designs to production-ready vapor-ui code. Use when user asks "vapor-ui components", "vapor-ui icons", "아이콘 찾기", "vapor-ui 사용법", "vapor-ui를 사용해서 시안 구현", "convert figma", "figma to code", "implement design from figma", provides a Figma URL, or mentions specific components like "Button", "Input", "Modal".
ux-visualizer
Analyzes source code or requirements to generate high-fidelity screen and state transition diagrams. Specialized in SPA state mapping.
ux-ui-exp
UI/UX design intelligence with Bootstrap 5, Font Awesome, SweetAlert2. Use: /ux-ui-exp {command}
ux-spec-author
Converts UX/design intent into testable design specifications that feed requirements. Use when defining user flows, accessibility, or design constraints.
ux-expert-dialogue
Runs interactive expert review sessions where a senior UX composite persona (Nielsen, Krug, Kahneman, Cialdini, Ilincev) challenges decisions, provides direct critique with data-backed reasoning, and brainstorms alternatives section-by-section. Use when creating a new website/landing page and need expert challenge, want section-by-section review with quantified impact estimates, need an opponent who questions assumptions, brainstorming design alternatives, or preparing for major redesign or launch. Trigger phrases include "expert review", "critique my design", "challenge my assumptions", "section-by-section review". NOT for quick fixes with known solutions (use ux-optimization), implementing proven patterns directly, or when you want agreement rather than challenge.
ux-audit
AI skill for automated design audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.
understando
Pre-commit quiz that tests your understanding of code changes before allowing commits. Use when committing code through Claude Code to ensure engineers understand what they're committing. Requires hook installation - see repository README for setup.