yiekheng/cm_bot_v2
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(spec): route web UI code through frontend-design skill

Browse Source
This commit is contained in:
yiekheng 2026-05-02 18:09:58 +08:00
parent 572b200603
commit bdcea8b9bc
1 changed files with 14 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
docs/superpowers/specs/2026-05-02-b1-nextjs-scaffold-design.md
View File

@ -131,34 +131,16 @@ The trailing-slash preservation means `GET /api/acc/` proxies to `api-server:300
### Empty UI page
`web/app/page.tsx` renders a centered card confirming the service is up:
`web/app/page.tsx` renders a placeholder confirming the service is up. The implementation plan invokes the `frontend-design` skill to generate `page.tsx` and `layout.tsx` (per user direction — frontend-design owns all web design code in this codebase). The brief handed to the skill:
```tsx
export default function Home() {
return (
<main className="flex min-h-screen items-center justify-center bg-slate-50 p-8">
<div className="rounded-xl border border-slate-200 bg-white p-8 shadow-sm">
<h1 className="text-2xl font-semibold text-slate-900">cm-web-next scaffold</h1>
<p className="mt-2 text-slate-600">
B1 scaffold. UI lands in B2.
</p>
<p className="mt-4 text-sm text-slate-500">
Try{" "}
<a href="/api/acc/" className="text-blue-600 underline">
/api/acc/
</a>{" "}
to verify the proxy reaches{" "}
<code className="rounded bg-slate-100 px-1">api-server:3000</code>.
</p>
</div>
</main>
);
}
```
- **Page purpose:** scaffold-confirmation page for `cm-web-next`. Shipped only in B1; replaced by the real dashboard in B2.
- **Required content:** product name (`CM Bot V2`), the literal text `cm-web-next scaffold` so an operator can grep the page for it, a one-line "B2 lands the real UI" note, and an obvious link to `/api/acc/` so a smoke test of the proxy is one click away.
- **Design constraints:** uses Tailwind v4 (already configured); no external font/image deps; no JS interactivity (Server Component is fine); single page, no nav. Should clearly read as a temporary scaffold (not a real dashboard) so nobody mistakes it for production UI.
- **Out of scope:** dark mode, responsive breakpoints beyond mobile-first defaults, animations.
`web/app/layout.tsx` is the standard `create-next-app` boilerplate with `<html lang="en">`, body class for Tailwind defaults, and a tab title `CM Bot V2`.
`web/app/layout.tsx` is also generated by frontend-design — minimal `<html lang="en">` shell with `<body>` Tailwind defaults and tab title `CM Bot V2`.
`web/app/globals.css` is the Tailwind v4 import (`@import "tailwindcss"`).
`web/app/globals.css` is the Tailwind v4 import (`@import "tailwindcss";`) — written by hand, no design surface.
### Dockerfile
@ -350,9 +332,15 @@ Low.
- **Trailing slashes.** `trailingSlash: true` in Next.js means `/api/acc` redirects to `/api/acc/` with a 308. The Flask version always required the slash. Behavior is parity-equivalent for clients that include the slash; clients that don't get a redirect they didn't get before. The UI we control will always include it.
- **Build context size.** Docker build context includes the whole repo unless we set up `.dockerignore`. The repo's existing `.dockerignore` excludes `__pycache__`, `*.py[cod]`, `*.log`, `.git`, `logs/`, `node_modules/`. The `node_modules/` entry already prevents copying the host's `web/node_modules/` if the operator ran `npm install` on the host — good. We don't need a new repo-root `.dockerignore` change.
## Frontend-design conventions
All web design code in this codebase (TSX components, page layouts, CSS-in-class Tailwind, etc.) goes through the `frontend-design` skill rather than being hand-written. This decision applies to B1's placeholder, B2's full UI port, and any subsequent UI work. Glue code (Route Handlers, `next.config.ts`, env wiring, the Dockerfile, package.json, etc.) is written directly.
Practical implication for the implementation plan: there is one task that explicitly invokes `frontend-design` with the brief described in the "Empty UI page" section above and writes the returned `page.tsx` and `layout.tsx` into `web/app/`. Subsequent edits to those files in B2 follow the same pattern.
## Out-of-Scope Follow-Ups
- **B2** — port the UI: tabs, two tables, sortable columns, inline cell editing, refresh, stats cards, error states.
- **B2** — port the UI: tabs, two tables, sortable columns, inline cell editing, refresh, stats cards, error states. Implementation invokes `frontend-design`.
- **B3** — PWA: `manifest.webmanifest`, `next-pwa` (or hand-rolled service worker), 192/512 icons, install prompt.
- **B4** — cutover: delete `app/cm_web_view.py`, retire `cm-web` service, rename `cm-web-next` → `cm-web` (and same for the image), update aaPanel-hardening guide and `dev.sh` accordingly.
- **Hot-reload in dev** — `command: ["npm", "run", "dev"]` in the override + bind-mount `web/` into the container. Useful but not necessary for B1; revisit when B2 starts and iteration speed matters.