Menu
优化 express233 Web 控制台 UI/UX。遵循 AGENTS.md 与 New API 暗黑风格：深灰侧栏、翠绿主色、 左项目栏 + 内横向 Tab。修改 internal/api/web 前必读。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
用真实浏览器（Playwright / playwright-cli）可视化验证 express233-server 控制台全流程。 发布、git-deploy、ValidateBeforePublish 均不依赖本技能；仅在开发/验收时手动运行。
| name | express233-ui |
| description | 优化 express233 Web 控制台 UI/UX。遵循 AGENTS.md 与 New API 暗黑风格：深灰侧栏、翠绿主色、 左项目栏 + 内横向 Tab。修改 internal/api/web 前必读。 |
internal/api/web/index.html、style.css、app.js 的布局或视觉。data-testid（见 test/visual/tests/server-flows.spec.ts）。#09090b 主区，#0f0f11 侧栏，#18181b 卡片（zinc 暗色）。rgba(255,255,255,0.06)，不用黑色硬边。#10b981；悬停 #34d399。#fafafa，次 #a1a1aa（--text-muted）。--space-* 间距、侧栏 232px。rgba(34,197,94,0.12) 底。| 文件 | 职责 |
|---|---|
index.html | 结构、侧栏、Tab、data-testid |
style.css | 全部视觉（仅改变量 + 类） |
app.js | 逻辑；样式用 class 而非内联 |
run-server.cmd
visual-e2e.cmd
浏览器：登录 → 建项目 → 版本 → 预览 → 发布；侧栏与 Tab 切换无错位。