القائمة
优化 express233 Web 控制台 UI/UX。遵循 AGENTS.md 与 New API 暗黑风格：深灰侧栏、翠绿主色、 左项目栏 + 内横向 Tab。修改 internal/api/web 前必读。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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 切换无错位。