القائمة
Execute required visual UI validation using VS Code integrated browser (Simple Browser) with screenshot evidence recorded in test-plan.md.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Visual UI testing using Playwright MCP to interact with the Wavecraft web UI. Use this skill when testing UI components, verifying visual appearance, taking screenshots, or validating UI behavior that requires browser interaction. Requires the dev server running (cargo xtask dev).
Create new processor UI components in @wavecraft/components with default scope (component, unit test, typecheck, index exports), processorId-derived IDs, and targeted validation.
Creates a Pull Request using GitHub CLI with a PR summary file. Generates PR-summary.md in the feature-specs folder to avoid terminal pasting issues.
Ensure Wavecraft UI changes use existing design tokens and reusable patterns instead of ad-hoc values, with a fast normalization checklist for spacing, color, typography, and states.
Review Wavecraft UI changes for practical accessibility quality (semantic HTML, keyboard/focus behavior, contrast, ARIA, reduced motion) and provide fix-ready findings.
Execute Wavecraft UI/UX changes through a practical end-to-end flow: discovery, proposal, implementation, verification, and handoff with minimal-scope commits.
| name | simple-browser-ui-testing |
| description | Execute required visual UI validation using VS Code integrated browser (Simple Browser) with screenshot evidence recorded in test-plan.md. |
For any UI/visual change:
http://localhost:5173 in VS Code Simple Browsertest-plan.mdpkill -f "cargo xtask dev" only if you started them for this sessionTesting is incomplete until screenshot evidence is documented.
Run this check before starting anything:
pgrep -f "cargo xtask dev" >/dev/null || lsof -ti tcp:5173 >/dev/null
0: server already running → reuse itcargo xtask devCheck if server is already running:
pgrep -f "cargo xtask dev" >/dev/null || lsof -ti tcp:5173 >/dev/null
If check passed, reuse the existing server. If not, start dev server:
cargo xtask dev
In VS Code, open Command Palette and run Simple Browser: Show
Enter URL: http://localhost:5173
Validate changed visual states and interactions
Capture screenshots and store evidence paths
Document results and evidence in docs/feature-specs/{feature}/test-plan.md
If you started a new server in step 2, shut it down when done:
pkill -f "cargo xtask dev"
| Issue | Solution |
|---|---|
| Port 5173 already in use | Re-run pre-check; if a server exists, reuse it instead of starting another |
| Page does not load | Confirm http://localhost:5173 and wait for Vite startup if you just started the server |
| Accidentally stopped shared server | Restart with cargo xtask dev and rerun validation steps |
docs/guides/visual-testing.md