F-11 Frontend skeleton — Next.js 16 + Tailwind 4 + shadcn + BI tokens

Decisions taken

Stack pin (per AA + walkthrough)

• Next.js 16.2.6 (App Router) + React 19
• Tailwind CSS 4.0.6 (PostCSS plugin, не v3 config file)
• shadcn-style primitives copied как source code (Button / Card / Input / Label / Badge)
• Phosphor icons (NOT Lucide — .eslintrc.json блокирует import lucide-react)
• TanStack Query 5 от Day 1 (per AA §1)
• Zustand добавлен в deps но не used yet (Phase 1.5 client state)
• Vitest 3 (unit) + Playwright 1.50 (E2E)

Brand tokens (BI tokens applied verbatim)

• Primary: oklch(0.62 0.13 65) — тёплая охра
• Light bg: oklch(0.97 0.005 65) (warm cream — НЕ pure white)
• Dark bg: oklch(0.18 0.02 65) (warm graphite — НЕ pure black)
• Manrope (UI) + Crimson Pro (headings — serif anti-AI) + JetBrains Mono (numbers)
• Все три fonts via next/font/google Cyrillic subset

Module registry pattern (mirrors backend F-05/F-08)

• Build-time script scripts/generate-modules-registry.mjs читает packages/modules/<name>/module.yaml
• Generates src/modules/registry.generated.ts
• Filtered runtime через getVisibleModules() — P21 release stages (hidden excluded)
• Sample hello_world module появляется в sidebar (proven через Playwright smoke + unit test)

Auth skeleton (Phase 1 F-11)

• Email magic link UI — apps/web/src/app/(auth)/login/page.tsx
• POST к /api/auth/magic-link — endpoint появится в F-12; client gracefully degrade при 404 (stub success)
• Dev bypass button (только NODE_ENV !== production) даёт moc JWT для UI proof
• middleware.ts gate на cookie razmakh.jwt (Phase 1.5 → httponly cookie via F-12 verify endpoint)

Mobile-companion (M-6 — НЕ mobile-first)

• Desktop primary: sidebar fixed + main
• Mobile: hamburger header + drawer sidebar + bottom tabs
• Touch targets ≥56px (a11y)

What went well

• Research read before implementation per lesson f06-skipped-research-халтурность — все references прочитаны (AA / AE / BI / AF / P / E2 wireframes) — никаких re-discoveries через runtime errors
• Brand tokens applied точно из E2 wireframes §7 — no improvisation
• Module registry pattern полностью matches backend F-05 contract
• Mock API gracefully handles missing F-12 endpoints (404 → stub success) — UI proof не блокируется

What hurt

• Slow npm registry connections (Russia ISP) — install timed out на первом запуске для @next/swc-linux-x64-gnu native binary + next tarball
• Mitigation: добавил fetch-timeout: 300000 + fetch-retries: 5 в pnpm-workspace.yaml

Architectural notes для Block 1

• ECharts не included (per AE §1) — будет lazy-loaded в Block 7 Today widget
• Tremor blocks не included — Phase 1.5 KPI cards (optional)
• uPlot sparklines — Block 2 SKU table
• Cookie consent + DPA signature — F-15 / Phase 1.5 (E2 wireframes §8 references)
• Storybook deferred — Phase 1.5 если components proliferate

Research consultation discipline check ✅

Per lesson f06-skipped-research-халтурность:

• Read ALL references: files в frontmatter перед код-вом
• Grep по domain keywords (icon, phosphor, oklch, magic-link)
• Не использовал generic shadcn defaults (Lucide / Inter / Recharts blocked в .eslintrc)
• Brand tokens — verbatim из BI §4, не improvised

Action items / deferred

• F-12: Admin Control Panel — real magic-link endpoint + httponly cookie
• F-13: Astro Starlight docs site (separate репо, не в apps/web)
• F-15: HTTPS deploy через Caddyfile (web service reverse_proxy already wired)
• Lost Pixel visual regression baseline — Phase 1.5 (нужен running deploy)
• Lighthouse measurement — required after VPS deploy
• Real ECharts + uPlot wrappers — Block 2/7

Source

• Wireframes spec: plan/active/E2-block-1-wireframes.md
• Brand decision: research/BI-design-human-not-ai.md §3.1 (тёплая охра recommended over indigo / лесной зелёный)
• Module registry: packages/modules/hello_world/module.yaml → sidebar item “Hello World”