SKILL.md
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 takescreenshot <DEVICETARGET> /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.