# Screen-fájl struktúra — hordozható sablon **Mire való.** Ezt a fájlt add oda Claude-nak egy MÁSIK projektben, és kérd: *„Az itt leírt struktúra szerint építsd a screen-mock HTML-fájlokat."* Projekt-független: nincs benne hivatkozás konkrét spec-re, organizmusra vagy fájlra — csak a minta. --- ## 0. Mappa-szerkezet ``` design-system/ colors_and_type.css ← tokenek (--u-* CSS-változók) + tipográfia components/.css ← per-komponens DS-CSS (button, card, input, …) -system/ data/mock.js ← chrome-mock: tenant + currentUser + navCounts organisms/ _styles.css ← MINDEN organism CSS-e egy fájlban (.mgr-* prefix) icon.jsx ← Icon-komponens (Lucide-stílusú inline SVG map) .jsx ← 1 fájl / organism, window-ra exportálva preview/screens/ -.html ← screen-mock fájlok (ez a sablon róluk szól) design-canvas.jsx ← DesignCanvas + DCSection + DCArtboard (starter komponens — kérd Claude-tól) ``` --- ## 1. A screen-fájl 4 kötelező blokkja (sorrendben) ```html <Termék> · S<N> — <Screen-azonosító> <Screen-név> (screen)

Screen-név `/url/utvonal`

1–2 mondat: mit csinál a screen, kinek. (~120–200 char)

Spec: spec-fajl.md §x.y Döntések: D-1, D-2

``` --- ## 2. CSS link-sorrend (KÖTELEZŐ) 1. `design-system/colors_and_type.css` — tokenek 2. `design-system/components/layout.css` — page-keret 3. per-screen szükséges DS-komponens-CSS-ek (csak a használtak!) 4. `-system/organisms/_styles.css` — **mindig utolsó** **Miért:** cascade — az organism-szabályoknak felül kell tudniuk írni a DS-defaultokat. ## 3. Script-sorrend (KÖTELEZŐ) 1. React + ReactDOM + Babel — **pinned verzió + integrity-hash** (l. fenti skeleton, szó szerint) 2. `data/mock.js` — chrome-mock 3. `design-canvas.jsx` 4. `organisms/icon.jsx` — mindig első organism (minden más függ tőle) 5. többi organism **függés-rendben**: ha X organism fogyasztja Y-t (`window.Y`), Y script-tagje előbb áll **Miért:** a `Object.assign(window, {…})` exportok tag-sorrendben futnak; a fogyasztó `undefined`-et kap, ha előbb fut. ## 4. Screen-header (dokumentációs banner) Kék banner a `` tetején, a `#root` ELŐTT. **Mock-only** — production-portoláskor eltűnik. CSS-e minden screen-fájl `