Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
f1d17475822559642f952b2336ee958898fedee8
ComfyUI_frontend/.claude/commands/verify-visually.md
Alexander Brown 1b83d6b5a6 Migration: pnpm (#5215) 
* migration: npm to pnpm
Step 1, package and lockfile

* migration: npm to pnpm
Step 2: docs / LLM instructions

* migration: npm to pnpm
Step 3: More documentation updates

* migration: npm to pnpm
Step 4: Even more documentation

* migration: npm to pnpm
Step 5: GitHub Actions

* migration: npm to pnpm
Step 6: PNPM installation in actions. This merge is going to be painful.

* migration: npm to pnpm
Unignore and add pnpm lockfile.

* migration: npm to pnpm
package-lock.json -> pnpm-lock.yaml

* migration: explicit @primeuix/styled, move glob to prod deps

* migration: more explicit deps required by the importmap plugin and vite

* fix: missed merge artifact

* fix: Make sure pnpm is available to install wrangler

* migration: pnpm for dev-release.yaml

* migration: new setup action version
Won't work until that is updated and a new release is cut.

* migration: Playwright needs uuid

* migration: Add explicit deps for lobehub

* chore(version-bump.yaml): change cache from npm to pnpm to optimize package management and improve build performance

* migration: install pnpm in version-bump action

---------

Co-authored-by: snomiao <snomiao@gmail.com>
2025-08-27 06:10:15 -07:00

2.2 KiB
Raw Blame History

Your task is to perform visual verification of our recent changes to ensure they display correctly in the browser. This verification is critical for catching visual regressions, layout issues, and ensuring our UI changes render properly for end users.

Follow these steps systematically to verify our changes:

  1. Server Setup

    • Check if the dev server is running on port 5173 using browser navigation or port checking
    • If not running, start it with pnpm dev from the root directory
    • If the server fails to start, provide detailed troubleshooting steps by reading package.json and README.md for accurate instructions
    • Wait for the server to be fully ready before proceeding

  2. Visual Testing Process

    • Navigate to http://localhost:5173/
    • For each target page (specified in arguments or recently changed files):
      • Navigate to the page using direct URL or site navigation
      • Take a high-quality screenshot
      • Analyze the screenshot for the specific changes we implemented
      • Document any visual issues or improvements needed

  3. Quality Verification Check each page for:

    • Content accuracy and completeness
    • Proper styling and layout alignment
    • Responsive design elements
    • Navigation functionality
    • Image loading and display
    • Typography and readability
    • Color scheme consistency
    • Interactive elements (buttons, links, forms)
Common issues to watch for: - Broken layouts or overlapping elements - Missing images or broken image links - Inconsistent styling or spacing - Navigation menu problems - Mobile responsiveness issues - Text overflow or truncation - Color contrast problems For each page tested, provide: 1. Page URL and screenshot 2. Confirmation that changes display correctly OR detailed description of issues found 3. Any design improvement suggestions 4. Overall assessment of visual quality

If you find issues, be specific about:

  • Exact location of the problem
  • Expected vs actual behavior
  • Severity level (critical, important, minor)
  • Suggested fix if obvious

Remember: Take your time with each screenshot and analysis. Visual quality directly impacts user experience and our project's professional appearance.