Run any Skill in Manus with one click

frontend

Stars2

Forks0

UpdatedJuly 6, 2026 at 19:51

Next.js pages-router UI: src/pages (admin/pos/order catch-all tab pages), src/components (admin, cart, menu, pos, form/field system, core), zustand store with _local/_session persistence (src/lib/client/store), trpc client types (MenuData, CartData, COM naming), image/R2 resources, Tailwind twData conventions.

Installation

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.

Run Skill in Manus

Source

MoonShineVFX

MoonShineVFX/meal-system

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	frontend
description	Next.js pages-router UI: src/pages (admin/pos/order catch-all tab pages), src/components (admin, cart, menu, pos, form/field system, core), zustand store with _local/_session persistence (src/lib/client/store), trpc client types (MenuData, CartData, COM naming), image/R2 resources, Tailwind twData conventions.

Frontend (Next.js pages router + Tailwind)

Layer map

Path	Role
`src/pages/_app.tsx`	Global shell: Navigation + overlays (`EventListener`, `AuthValidator`, `Notification`, `RouteProgress`), wrapped by `trpc.withTRPC`
`src/pages/{admin,pos,order}/[[...Args]].tsx`	Optional catch-all "tab" pages — path segment picks a tab, validated in `getServerSideProps`
`src/components/admin/*`	One component per admin tab
`src/components/form/`	`FormDialog` + declarative field system (`field/index.tsx`, `field/define.tsx`); base inputs in `form/base/`
`src/lib/client/trpc.ts`	tRPC client + ALL derived data types (`MenuData`, `CartData`, `POSLiveDatas`…) + global error-toast link
`src/lib/client/store/`	Zustand store (notification / ui / setting slices)
`src/lib/client/{printer,sw,pusher,r2}.ts`	POS label printer API, service-worker handler, pusher client, image upload

Conventions & invariants

"COM" = CommodityOnMenu everywhere (COMCard, COMDialog, MenuCOMField).
UI copy is Traditional Chinese; tab routing maps zh-TW names to URL paths. Adding an admin tab touches TAB_NAMES, TAB_PATHS, dividers and the render switch in src/pages/admin/[[...adminArgs]].tsx plus a new src/components/admin/<Name>.tsx.
Zustand persistence is keyed by suffix: state keys ending _local persist to localStorage, _session to sessionStorage (custom storage in store/index.ts). A new persisted key needs BOTH the suffix and an entry in partialize. Unsuffixed keys are memory-only.
Server state belongs in react-query via tRPC hooks; cache freshness is driven by Pusher events (see realtime) — do not add polling.
Images use a custom Next loader; build URLs with getResourceUrl() / getResourceUrlByWidth() (src/lib/common.ts, size variants xs/sm/md/lg). Uploads go to Cloudflare R2 via presigned URLs (src/lib/server/r2.ts + image router).
Tailwind state styling uses twData({ selected, loading, busy, available }) which writes a data-ui attribute; variants target it (see tailwind.config.cjs). Merge classes with twMerge.
Formatting: prettier with semi: false, single quotes, prettier-plugin-tailwindcss. No ESLint config — prettier is the only formatter.
Root / redirects to /live (next.config.js).

More from this repository

same repository

database

MoonShineVFX/meal-system

Prisma schema, migrations, and the data-access layer: prisma/schema.prisma, prisma/migrations, pnpm db-migrate/db-generate/db-seed, src/lib/server/database/* (transaction, order, menu, cart, user, deposit, bonus), point vs credit balances, TransactionType, OrderStatus, MenuType, soft-delete isDeleted, fixed LIVE/RETAIL menus, optionSets Json fields.

2026-07-062

deposit-newebpay

MoonShineVFX/meal-system

NewebPay (藍新金流) deposit/儲值 flow: src/lib/server/deposit/newebpay.ts (createMPGRequest AES/SHA encryption, handleTradeNotify), src/pages/api/deposit/newebpay/{notify,return}.ts callbacks, Deposit model and DepositStatus transitions, DEPOSIT_RATIO credit conversion, src/pages/deposit pages.

2026-07-062

realtime

MoonShineVFX/meal-system

Realtime + notifications: Pusher channels and PUSHER_EVENT enum (src/lib/common/pusher.ts), emitPusherEvent/emitPusherWebhook (src/lib/server/pusher.ts), EventListener.tsx react-query invalidation map, web push notifications/badges (src/lib/server/webpush.ts), Cronicle scheduled menu-publish notify (src/lib/server/cronicle.ts).

2026-07-062

server-api

MoonShineVFX/meal-system

tRPC API layer and REST util endpoints: src/lib/trpc/api/* routers, src/lib/trpc/trpc.ts procedures (commonProcedure/userProcedure/staffProcedure/adminProcedure), rate limiting via meta, meal_token cookie auth, external AUTH_API login/AD sync, and src/pages/api/utils/* endpoints (recharge, sync-users, menu-publish-notify, complete-dishedup).

2026-07-062

name	frontend
description	Next.js pages-router UI: src/pages (admin/pos/order catch-all tab pages), src/components (admin, cart, menu, pos, form/field system, core), zustand store with _local/_session persistence (src/lib/client/store), trpc client types (MenuData, CartData, COM naming), image/R2 resources, Tailwind twData conventions.

Frontend (Next.js pages router + Tailwind)

Layer map

Path	Role
`src/pages/_app.tsx`	Global shell: Navigation + overlays (`EventListener`, `AuthValidator`, `Notification`, `RouteProgress`), wrapped by `trpc.withTRPC`
`src/pages/{admin,pos,order}/[[...Args]].tsx`	Optional catch-all "tab" pages — path segment picks a tab, validated in `getServerSideProps`
`src/components/admin/*`	One component per admin tab
`src/components/form/`	`FormDialog` + declarative field system (`field/index.tsx`, `field/define.tsx`); base inputs in `form/base/`
`src/lib/client/trpc.ts`	tRPC client + ALL derived data types (`MenuData`, `CartData`, `POSLiveDatas`…) + global error-toast link
`src/lib/client/store/`	Zustand store (notification / ui / setting slices)
`src/lib/client/{printer,sw,pusher,r2}.ts`	POS label printer API, service-worker handler, pusher client, image upload

Conventions & invariants

"COM" = CommodityOnMenu everywhere (COMCard, COMDialog, MenuCOMField).
UI copy is Traditional Chinese; tab routing maps zh-TW names to URL paths. Adding an admin tab touches TAB_NAMES, TAB_PATHS, dividers and the render switch in src/pages/admin/[[...adminArgs]].tsx plus a new src/components/admin/<Name>.tsx.
Zustand persistence is keyed by suffix: state keys ending _local persist to localStorage, _session to sessionStorage (custom storage in store/index.ts). A new persisted key needs BOTH the suffix and an entry in partialize. Unsuffixed keys are memory-only.
Server state belongs in react-query via tRPC hooks; cache freshness is driven by Pusher events (see realtime) — do not add polling.
Images use a custom Next loader; build URLs with getResourceUrl() / getResourceUrlByWidth() (src/lib/common.ts, size variants xs/sm/md/lg). Uploads go to Cloudflare R2 via presigned URLs (src/lib/server/r2.ts + image router).
Tailwind state styling uses twData({ selected, loading, busy, available }) which writes a data-ui attribute; variants target it (see tailwind.config.cjs). Merge classes with twMerge.
Formatting: prettier with semi: false, single quotes, prettier-plugin-tailwindcss. No ESLint config — prettier is the only formatter.
Root / redirects to /live (next.config.js).