메뉴
优化 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 切换无错位。