메뉴
用真实浏览器（Playwright / playwright-cli）可视化验证 express233-server 控制台全流程。 发布、git-deploy、ValidateBeforePublish 均不依赖本技能；仅在开发/验收时手动运行。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | express233-visual-verify |
| description | 用真实浏览器（Playwright / playwright-cli）可视化验证 express233-server 控制台全流程。 发布、git-deploy、ValidateBeforePublish 均不依赖本技能；仅在开发/验收时手动运行。 |
internal/api/web/*、发布/预览/邀请相关 UI 或 API 行为后，需要肉眼级确认页面流程。git-deploy.cmd 流程中强行加入本测试（已刻意隔离）。仓库根目录：
# Windows
visual-e2e.cmd
# Linux / macOS / Git Bash
./visual-e2e.sh
# 有界面调试
cd test/visual && npx playwright test --headed
cd test/visual && npx playwright test --ui
覆盖流程：登录 → 建项目/版本 → 上传配置 → 拉取预览（含右侧全文）→ 发布前检查 → 正式发布 → server.yaml 页签 → API 文档链接。
若已启用浏览器或 Playwright MCP，按此顺序人工/半自动核对：
run-server.cmd 或 go run ./cmd/express233-server -addr :23380http://127.0.0.1:23380/data-testid 定位（见 internal/api/web/index.html）：
login-submit → app-shelladd-project / add-version / file-inputpreview-server-id / preview-rendered-bodyvalidate-version / publish-versionver-status 为 published，download-version 可见。Playwright CLI（可选，见 ~/.codex/skills/playwright）：
export PWCLI="$CODEX_HOME/skills/playwright/scripts/playwright_cli.sh"
"$PWCLI" open http://127.0.0.1:23380 --headed
"$PWCLI" snapshot
| 环节 | 是否跑可视化 E2E |
|---|---|
Web「发布前检查」ValidateBeforePublish | 否（仅目录/唯一 basename/server.yaml 引用） |
POST .../publish | 否 |
git-deploy.cmd / deploy-github | 否 |
go test ./... | 否（测试在 test/visual，独立 npm 包） |
GitHub release.yml | 否 |
visual-e2e.cmd / workflow Visual E2E | 是（开发验收） |
EXPRESS233_VISUAL_PORT=39235 与 EXPRESS233_BASE_URL。CI=1 时 Playwright reuseExistingServer 为 true。test/visual/playwright-report/ 或 npx playwright show-report。Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
GitHub CLI (gh), Actions CI/Lint gates, release policy, and Node 24 LTS for express233. Use when fixing CI, pushing tags, creating releases, inspecting workflow logs, or addressing PR checks.
优化 express233 Web 控制台 UI/UX。遵循 AGENTS.md 与 New API 暗黑风格：深灰侧栏、翠绿主色、 左项目栏 + 内横向 Tab。修改 internal/api/web 前必读。