frontend

Estrelas2

Forks0

Atualizado6 de julho de 2026 às 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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

MoonShineVFX

MoonShineVFX/meal-system

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores webInformática e Matemática·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).

Mais deste repositório

mesmo repositório

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).