skills + audit: vendor taste-skill, add the Felhom override, audit the home page
gates / gates (push) Successful in 6m30s

Part 0 and Part A of the home-page redesign. Nothing under website/ is touched.

skills/
  - design-taste-frontend installed to ~/.claude/skills/ as a VERBATIM copy of
    github.com/Leonxlnx/taste-skill @ 717446e07a (2026-10-09, MIT). Body verified
    byte-identical line by line; the only addition is a provenance block. The repo
    holds scripts (skill.sh, scripts/*.mjs) but the SKILL FOLDER holds only SKILL.md,
    so no script was copied and none was run. Not installed via npx or skill.sh.
  - skills/felhom-web-design/SKILL.md is the override layer and names every conflict:
    the static-HTML stack fence (no React/Tailwind/Motion/npm), nothing fetched from
    another server (kills taste-skill's picsum/Unsplash/SimpleIcons ladder and its
    npm icon libraries, since we have a self-hosted sprite), real images only, the
    Hungarian gondolatjel surviving the en-dash ban, the claim rule, and the SEO-keep
    list. 137 lines, check_skills.py PASS.
  - SOURCES.md records the provenance and the kept/overridden table.

documentation/audits/redesign-2026-10-10/AUDIT.md
  Measured against the LIVE site, not the file. 12 patterns to retire (R1-R12), each
  naming the taste-skill rule it breaks; 7 to keep; dial reading 3/2/4 -> 6/3/4;
  8 levers in priority order for the operator to approve at STOP 1.

  Headline measurements: 10 922 px tall at 1440 and 19 913 px at 390 (23.6 phone
  screens); 11 sections but only 8 layout families, why-grid used 3x and
  apps-showcase 2x; 18 em dashes; 16 requests / 533 KB from exactly two hosts.
  Contrast measures 7.56:1 body and 16.67:1 headings - AAA, and an accessibility win
  to preserve rather than a thing to fix.

  Method note: resize_window does not move window.innerWidth on this workstation and
  DevTools device mode could not be driven, so the page was rendered in a same-origin
  iframe at each width. Faithful, with two positive observables: the hamburger
  computes to display:block at 390, and clientWidth == scrollWidth == 375.

Gates: site, hostinstall, hub-confirm, register and the rest green. instructions and
script-tests fail on this Windows workstation for environment reasons that predate
this change (E:\git\CLAUDE.md is the deliberate Windows adaptation the gate wants
identical; fcntl missing; relpath across C:/E:; the cp1250 console trap). Re-run on
DooPlex follows.
This commit is contained in:
2026-10-10 21:32:40 +02:00
parent 7ff64f40ed
commit fc52e3865e
6 changed files with 380 additions and 0 deletions
@@ -0,0 +1,196 @@
# Home-page redesign — the audit before anything is touched
**Date:** 2026-10-10 · **Scope:** `website/index.html` (+ its English twin `website/en/index.html`)
· **Baseline:** `felhom.eu` `main` @ `7ff64f40ed`, clean, in sync with `origin/main`
· **Method:** taste-skill §11.B, run against the **live** site, not the file on disk.
Companion skill files written in the same session: `skills/felhom-web-design/SKILL.md` (the override
layer) and `skills/SOURCES.md` (provenance of the vendored `design-taste-frontend`).
---
## A. Design read (taste-skill §0.B)
> **Reading this as:** a redesign-preserve of a trust-first consumer landing page, for Hungarian
> households who are considering handing their family photographs to a box in their own hall, with a
> plain-spoken technical language, leaning toward the existing Felhom v2 token set plus real product
> photography.
The audience is the thing most of the current page gets wrong. It is not a procurement panel and not
a self-hosting hobbyist. It is a household that has to decide whether to trust **a person**. The page
currently contains no person, no box, and no evidence that either exists.
## B. How the measurements were taken
Claude in Chrome cannot resize this workstation's Chrome: `resize_window` returns success and
`window.innerWidth` stays at 1920. Chrome DevTools device mode (R-918's recipe) could not be driven
either, because the extension's keystrokes reach the page, not the browser chrome.
**What worked, and why it is faithful:** the page was rendered inside a **same-origin iframe** of the
chosen CSS width. The site frames itself, so the iframe's own width drives the media queries. Two
positive observables confirm the layout really is the mobile one rather than a squeezed desktop one:
- at 390 px the hamburger computes to `display: block` (it is `none` on desktop), and
- `document.documentElement.clientWidth === scrollWidth === 375` — the viewport minus the scrollbar,
with **no horizontal overflow**.
Both the desktop and the phone figures below come from that harness. Screenshots are cropped to the
iframe's rectangle, so what is shown is the page at that width and nothing else.
## C. Brand tokens in use (preserve)
| Token | Value | Note |
|---|---|---|
| `--bg-0 / --bg-1 / --bg-2` | `#0A1220` / `#0F1B2E` / `#16263F` | One locked dark theme. No `prefers-color-scheme` block anywhere in `site.css` |
| `--text-1 / --text-2` | `#EDF2F9` / `#94A6BF` | Measured **16.67:1** and **7.56:1** against `--bg-0`. AAA, not merely AA |
| `--blue / --blue-bright` | `#0083D8` / `#2EA8F5` | One accent, used consistently. §4.2's Color Consistency Lock already passes |
| `--radius` | `2px` | §4.4's Shape Consistency Lock already passes. `box-shadow` is in the gate's `BANNED` list |
| `--font-ui` | Plus Jakarta Sans, self-hosted | Latin + latin-ext, 48 KB |
| `--font-data` | JetBrains Mono, self-hosted | 31 KB — see finding **R6** |
The token layer is in good shape and is **not** what makes the page look AI-made. Nothing in §C is
proposed for change.
## D. Information architecture and conversion paths (preserve)
Nav: `Szolgáltatások · Alkalmazások · Technológiák · Mentések · GYIK · Kapcsolat` + language globe.
One line at desktop, hamburger below 900 px. §4.7's nav rules already pass.
Conversion path: home → `/teszteles` (primary CTA, twice) → `/kapcsolat`. Secondary paths to
`/alkalmazasok`, `/technologiak`, `/biztonsagimentes`.
**No URL, nav label, anchor ID or form field is proposed for change** (§11.F).
## E. The page as it stands, measured
| | Desktop 1440 | Phone 390 |
|---|---|---|
| Full page height | **10 922 px** | **19 913 px** |
| Screens of scrolling | ≈ 11.6 | **≈ 23.6** |
| Sections | 11 + footer | same |
| Requests / weight | **16 requests, 533 KB**, hosts: `felhom.eu` 13, `stats.felhom.eu` 2 | — |
| Em dashes (`—`) in rendered text | **18** | — |
Section inventory, in page order, with the layout family each uses:
| # | Heading | Layout family | Items | Height |
|---|---|---|---|---|
| 1 | *(hero)* | `hero-content` | 2 | 900 |
| 2 | Mit tud a doboz ma? | `why-grid` | **10** | 1732 |
| 3 | Így néz ki a vezérlőpult | `dash-grid` | 4 | 1120 |
| 4 | Miért ne a felhőszolgáltatók? | `problem-grid` | 3 | 610 |
| 5 | Miért válaszd a saját szervered? | **`why-grid` again** | 4 | 755 |
| 6 | Hogyan működik? | `process-steps` | 5 | 715 |
| 7 | Mit kapsz tőlünk? | `service-list` | 5 | 1010 |
| 8 | Telepíthető Alkalmazások | `apps-showcase` | 10 | 939 |
| 9 | Professzionális Technológiák | **`apps-showcase` again** | 7 | 939 |
| 10 | Adataid biztonságban | `backup-content` | 2 | 519 |
| 11 | Zárt teszt | **`why-grid` a third time** | 3 | 1056 |
| 12 | Érdekel? Beszéljünk! | `contact-box` | 2 | 500 |
## F. Patterns to keep
1. **The token layer and the contrast wins** (§C). Honour them; §11.C.
2. **"Mit tud a doboz ma?"** — the content is the best thing on the site. Ten concrete, hedged,
honest facts. The *layout* is wrong, the *writing* is right.
3. **"Ismert korlátok"** — naming the shared household password and the missing DLNA is the single
most trust-building paragraph on the page. It stays, and it should be easier to find.
4. **The four real dashboard screenshots.** Real product images, already vendored, already with
captions that are claims. They are the asset the hero is missing.
5. **The picture viewer** (`gallery.js`), and its JS-off behaviour.
6. **The whole SEO head block** (§H).
7. **The nav, the footer and both CTAs' wording.** `Jelentkezem tesztelőnek` is one label for one
intent, used twice — §4.5's No-Duplicate-CTA-Intent already passes.
## G. Patterns to retire
Each row names the taste-skill rule it breaks.
| # | Pattern | Where | Rule broken |
|---|---|---|---|
| **R1** | **The hero's "visual" is the logo** (`logo.png`, 49 KB), beside a claim that states nothing. The real product pictures sit three sections lower | hero | §4.8 "Hero needs a real visual"; a logo fills the slot without showing the product |
| **R2** | **Hero content floats in the middle of a 900 px band**, roughly 300 px of empty space above it; on the phone the logo takes the top half and pushes the CTA to the fold | hero | §4.7 HERO TOP PADDING CAP — "reads as a layout bug, not as intentional space" |
| **R3** | **"Professzionális otthoni szerver telepítés és üzemeltetés"** as the one-line value proposition. Also "Ipari szintű megoldások", "Professzionális Technológiák", "Kulcsrakész megoldások, professzionális kivitelezéssel" | hero + §7 + §9 | §9.D filler verbs; `felhom-web-design` §5 — an empty word with no fact beside it |
| **R4** | **The same section header shape 11 times out of 11:** centred `h2` of two words with a blue-coloured tail in a `<span>`, then a centred grey sub-line | every section | §4.3 anti-centre bias; the templated rhythm the operator describes |
| **R5** | **Three layout families carry five sections.** `why-grid` runs three times, `apps-showcase` twice | §2, §5, §11 / §8, §9 | §4.7 Section-Layout-Repetition Ban — a family may appear **once** |
| **R6** | **`process-steps` numbered 1–5 and `service-list` numbered 01–05.** These 13 elements are also the **only** users of JetBrains Mono on the page: retiring them drops a 31 KB font | §6, §7 | §9.F "NO generic step labels"; "NO section-number eyebrows" |
| **R7** | **`problem-grid` is three equal feature cards** | §4 | §9.C — banned outright |
| **R8** | **A ten-card grid** under "Mit tud a doboz ma?", 1732 px tall, every card the same weight | §2 | §4.9 "Long lists need a different UI component, not a longer list" (> 5 items) |
| **R9** | **18 em dashes** in the rendered text | throughout | §9.G, kept in full; in Hungarian the gondolatjel is ` – ` anyway |
| **R10** | **Two sections are a catalogue of someone else's logos in words** — app names and technology names as plain text in identical tiles | §8, §9 | §4.9 content density; they duplicate `/alkalmazasok` and `/technologiak`, which both already exist |
| **R11** | **Nobody is behind it.** The only human trace on the page is "Üzemeltető: Nagyfenyvesi Viktor" in the legal footer line | whole page | The brief's core finding; §0.A audience |
| **R12** | **"Miért ne a felhőszolgáltatók?"** argues against Google before the page has said what Felhom *is* | §4 | §4.9 — the fourth section is too early for a competitor argument |
## H. SEO baseline — carried over unchanged
From `audits/seo-2026-10-10/` (6 indexed, 7 not indexed, nothing wrong with the home page) and the
file itself. **These exact strings are preserved** unless the operator says otherwise:
- `<title>Felhom.eu — Saját felhőd, saját szabályaid | Otthoni szerver szolgáltatás</title>`
- `meta description` (the "58 telepíthető alkalmazás, háromszintű automatikus mentés…" line)
- `canonical` `https://felhom.eu/`; `hreflang` hu / en / x-default
- All Open Graph and Twitter tags, and the `LocalBusiness` JSON-LD block
- `h1` text: *Saját felhőd, saját szabályaid*
> **One conflict to settle at STOP 1.** The `<title>` and three OG/Twitter titles contain an **em
> dash**, and the JSON-LD `description` contains "Professzionális". R3 and R9 would change them, the
> SEO-keep rule says do not. **Recommendation: leave all four alone this round.** They are the
> strings Google has indexed, the em dash is invisible to a visitor in a browser tab, and a title
> change is worth doing deliberately on its own, not as a side effect of a layout change.
## I. Dial reading (taste-skill §1)
| Dial | Current site | Proposed | Why |
|---|---|---|---|
| `DESIGN_VARIANCE` | **3** — every section is a centred header over a symmetric grid | **6** | §1.A "redesign - preserve" says match existing; 3 is what *causes* R4 and R5. 6 buys asymmetry and a real hero without touching the brand |
| `MOTION_INTENSITY` | **2** — CSS hover only, `prefers-reduced-motion` block already present | **3** | Trust-first audience (§1.A row 5 reads 2-3). Deliberately below 4 so §6.B's mandate and the no-JS-library fence never collide |
| `VISUAL_DENSITY` | **4** | **4** | Unchanged. The density is not the problem; the repetition is |
Mode: **redesign — preserve**.
## J. The levers, in priority order (taste-skill §11.D)
Each is one plain sentence. This is the list the operator approves, changes or cuts at STOP 1.
1. **Give the hero a real picture and a sentence that says something.** Replace the logo with the
Indítópult screenshot, and "Professzionális otthoni szerver telepítés és üzemeltetés" with a
concrete sentence drawn from the facts already on the page. *(R1, R2, R3)*
2. **Put a face and a name on the page.** A new "Ki áll mögötte" section with the operator's
photograph and three or four sentences in his own words. *(R11)*
3. **Break the eleven-times-identical section header.** Vary alignment and shape so that no two
consecutive sections open the same way. *(R4)*
4. **Give each section its own layout family.** Split the ten-card grid into a short scannable list,
and stop reusing `why-grid` and `apps-showcase`. *(R5, R7, R8)*
5. **Re-order so the page answers "what is it" before "why not Google".** *(R12)*
6. **Drop the two word-catalogue sections to a single line each with the link they already carry.**
*(R10)*
7. **Retire the numbered step and service lists**, which also removes a 31 KB font. *(R6)*
8. **Sweep every em dash** out of the rendered text. *(R9)*
**Levers deliberately NOT proposed:** no new colour, no new font, no light mode, no animation
library, no nav change, no URL change, no change to the four SEO strings in §H.
## K. Known risks when this ships
1. **`site_gates.py` walks every `*.html` under `website/` at any depth** (R-423) and fails on a page
that is in neither `TWINS` nor `NO_TWIN`. The preview page must be registered before the gate can
pass, and a registered Hungarian page must carry a nav and footer **byte-identical** to
`index.html`'s after normalisation — which is a second, independent reason not to touch the nav.
2. **`site.css` is shared by every page, and scoping it has already bitten in both directions.**
A base-element change made for the home page leaks into `/gyik`, `/teszteles` and the legal pages;
but `69035f4af5` (2026-10-10) is the opposite failure — `.info-card` and `.highlight-box` were
scoped to `.page-technologiak` / `.page-biztonsagimentes`, so the new `.page-teszteles` pages got
**no card chrome at all** and rendered as unstyled text runs. That commit's own conclusion was to
fix base rules **site-wide** rather than patch per page.
**So the rule here is not "always scope":** a genuinely shared improvement (a base `a`, `ul` or
`code` rule) goes site-wide on purpose; only a rule that is specifically the home page's new
composition hides under `body.page-index`. Either way the mitigation is the same and is not
optional — **every other page is screenshotted at 1440 before the switch**, which is step D.3.
3. **The English twin** must move in the same commit, or the twin gate fails.
4. **The `?v=` cache-bust** on `site.css` must be bumped, or the change looks like it did not deploy.
## L. Register
Nothing here is filed as an `OPEN-ITEMS.md` row yet: the whole list is this session's work and will
be closed in it. Anything on the list that the operator cuts at STOP 1, or that is not finished by
the end of the session, becomes a row before the session ends.
Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

+47
View File
@@ -2,6 +2,8 @@
The four **product-domain** skills — `felhom-app-catalog`, `felhom-build-deploy`, `felhom-testing`,
`felhom-ui-design` — are original, written from this project's own measured failures.
`felhom-web-design` (2026-10-10) is original too, but exists only to **override** a vendored skill;
see its own section below.
The five **process-domain** skills added 2026-08-25 are **adaptations, not copies**, of material from
two public MIT-licensed collections:
@@ -42,3 +44,48 @@ Recorded here so a future session that finds the upstream repos can see these we
deliberate design being reported as a defect.
6. **Everything naming a tool this project does not use** — Cursor commands and transcript paths,
model names, Linear / Sentry / Notion / Slack sources, GitHub issue trackers.
---
## `design-taste-frontend` (taste-skill) — vendored verbatim, 2026-10-10
The one skill in this workspace that is a **copy, not an adaptation**.
- **Source:** <https://github.com/Leonxlnx/taste-skill>, file `skills/taste-skill/SKILL.md`
(the repo's default skill; its own frontmatter name is `design-taste-frontend`).
- **Commit:** `717446e07a78d4e6d7918b1fde1a263378eebac9`, dated 2026-10-09. Pinned deliberately —
re-read the diff before moving to a newer commit.
- **Licence:** MIT, Copyright (c) 2026 Leonxlnx. `LICENSE` is copied alongside the skill.
- **Installed to:** `~/.claude/skills/design-taste-frontend/` on the Windows workstation. It is a
**plain copy**, not a junction into this repo, because this repo is not its home.
- **How it was taken:** `git clone` into a scratch folder outside the repo, then one file copied by
hand. The repo's `npx` path and its `skill.sh` installer were **not** used.
- **What was NOT copied:** the repo holds helper scripts (`skill.sh`, `scripts/*.mjs`) and nine other
skill variants. The skill folder itself holds **only `SKILL.md`** — no script was copied and none
was run. The other nine skills, the `research/` folder and all marketing assets were left behind.
- **Modification:** the body is **byte-identical to upstream** (verified line by line). The only
addition is a provenance block: one YAML comment inside the frontmatter and a seven-line
blockquote directly under it. The frontmatter still opens on line 1, because a provenance line
placed above `---` would stop the skill loading at all.
### What was taken, and what was overridden
`skills/felhom-web-design/SKILL.md` is the override layer and names every conflict. In short:
| Kept in full | Overridden |
|---|---|
| §0 design read; §1 the three dials | §3.A the whole React/Next/Tailwind/Motion stack — this site is static HTML with no build step |
| §4.7 layout discipline, §4.3 anti-centre bias, §9.C no three equal cards | §3.C npm icon libraries — the site has a self-hosted `icons.svg` sprite |
| §4.9 content density and the copy self-audit | §4.8's asset ladder (image-gen, picsum, Unsplash, Simple Icons CDN) — **real images only, nothing from another server** |
| §9 the AI tells, including the em-dash ban | §9.G's **en-dash** half — in Hungarian the gondolatjel is ` – ` |
| §11.B audit-first, §11.D the lever order, §11.F what never changes silently | §4.10's `"…"` quotes — Hungarian uses `„…"` |
| §14 the pre-flight check, run in writing | §6.C dual light/dark — the site is one locked dark theme by brand decision |
| §4.8's ban on div-built fake screenshots (we agree, and go further) | §4.1's font advice — Plus Jakarta Sans is the brand and stays |
### Why vendored rather than adapted
The five process-domain skills above were rewritten in Felhom's terms because their value was the
*idea*. This one's value is the **specific list** — the named tells, the exact banned patterns, the
mechanical counts in §14. Paraphrasing it would lose precisely what makes it useful, and the MIT
licence permits the copy. The Felhom-specific half therefore lives in a separate file that says
which rule wins, instead of being merged in.
+137
View File
@@ -0,0 +1,137 @@
---
name: felhom-web-design
description: How to redesign or extend the felhom.eu public website without making it look AI-made. Use together with the vendored `design-taste-frontend` (taste-skill) skill, which this one OVERRIDES wherever they conflict. Triggers - redesigning or adding a page under `website/`, changing `website/assets/site.css`, writing or rewriting Hungarian marketing copy, choosing an image for the site, or being asked to make the site "look less generic". Contains the stack fence (static HTML, no build, no external request), the real-images rule, Hungarian typography, the claim rule, and the SEO-keep list.
---
# Felhom web design
**Read `design-taste-frontend` first, then this file.** That skill is a vendored copy of
[taste-skill](https://github.com/Leonxlnx/taste-skill) at `717446e07a` (MIT; provenance in
`skills/SOURCES.md`). It is good on *what makes a page look AI-made* and that half is kept in full.
It assumes React/Next/Tailwind/npm and a generic brand, and on both counts it is wrong about this
site. **Where the two conflict, this file wins**, and every conflict is listed below.
Tokens, badges and Hungarian tone: **`felhom-ui-design`**. BOM, twins, gates, deploy:
`.claude/rules/website.md`. This file restates neither.
## 1. The stack fence — taste-skill §3.A does not apply
| taste-skill | Here |
|---|---|
| React / Next, Server Components | **Plain HTML files**, one per page, served by git-sync + nginx |
| Tailwind v4 | **One hand-written stylesheet**, `website/assets/site.css` |
| Motion, GSAP (§5.A-C) | **No JS animation library.** CSS transitions only |
| `next/font` | Self-hosted `@font-face`, already done |
| check `package.json` (§3.F) | **There is none.** No build step, no npm dependency. Do not create one |
| install a design system (§2.A) | **No.** `felhom-ui-design` v2 already is one, shared with hub + controller |
**Small vanilla JS is allowed** (nav toggle, `assets/gallery.js`) and must work with JS off: the page
renders, every link resolves. A library, if one ever earns its place, is self-hosted, justified in one
line, and gated behind `prefers-reduced-motion`.
## 2. Nothing is fetched from another server
The privacy notice tells visitors this, so it is a **promise, not a preference**.
- **No external fonts, scripts, stylesheets or images.** `site_gates.py` already bans the Google Fonts
hosts. The only permitted non-`felhom.eu` host is `stats.felhom.eu` (self-hosted Umami).
- **This kills taste-skill §4.8's asset ladder** — no `picsum.photos`, no Unsplash, no
`cdn.simpleicons.org` logo wall. App logos are vendored in `website/assets/`.
- **And §3.C's npm icon libraries.** The site has one self-hosted sprite, `website/assets/icons.svg`
(`<svg class="ico-lg"><use href="/assets/icons.svg?v=N#i-name"/></svg>`). A missing glyph is added
to it. "Never hand-roll SVG icons" does not apply: the sprite *is* the library.
- **Check it, do not assume it.** Load the page and list every request. Measured home-page baseline
(2026-10-10): **16 requests, 533 KB, two hosts** — `felhom.eu` 13, `stats.felhom.eu` 2.
## 3. Real images only
taste-skill §4.8 reaches for an image-generation tool first. **Here that is banned.**
- **Allowed:** screenshots from a real Felhom box (`website/assets/dashboard-*.webp`), photographs of
real hardware or of the operator, app screenshots and logos already in `website/assets/`.
- **Banned:** AI-generated images, stock, `picsum.photos`, and — agreeing with §4.8 and §9.F —
**product previews built from `<div>` rectangles**.
- **A logo is not a product visual.** Putting the Felhom logo where a screenshot belongs fails the
same way a fake screenshot does: it fills the slot without showing the product.
- **A phone photo carries its location.** Strip ALL metadata before the file enters this public repo
and **verify by reading the file back** that no GPS tag survived. The original stays outside the repo.
- If a section needs a picture nobody has, leave an HTML comment naming it and say so. Do not invent one.
## 4. Hungarian typography overrides the dash ban
§9.G bans the em dash **and** the en dash. The em-dash half is kept and is the most useful rule in
that document. The en-dash half cannot be: the Hungarian *gondolatjel* is an en dash with spaces.
- **`—` (U+2014): banned everywhere** — headings, body, captions, buttons, alt text, meta, `<title>`.
The clearest AI tell in Hungarian, and also simply wrong punctuation.
- **` – ` (U+2013, spaced): the correct gondolatjel.** Allowed, and **rationed to one per paragraph**.
A page needing more dashes needs shorter sentences.
- **Ranges and compounds take a plain hyphen**: `3-2-1`, `2018-2026`, `ár-érték`.
- **Quotes are `„…"`** — never `"…"`, and not §4.10's `"…"`.
- **Count before shipping:** `grep -c '—'` on the page must return 0.
## 5. Every sentence is a fact the box does today
Stricter than §4.9's copy audit, and the rule the operator cares about most.
- **Empty marketing words are banned unless a concrete fact stands beside them:** `professzionális`,
`ipari szintű`, `innovatív`, `kulcsrakész`, `megoldás`, `élmény`, `garantált`. "Professzionális
otthoni szerver telepítés" says nothing; "A telefonod fotói automatikusan feltöltődnek a saját
gépedre" says something.
- **A claim needs a PROVEN-LIVE or IMPLEMENTED row** in `architecture/00-capability-map.md`; the last
full pass is `audits/website-refresh-2026-10-08/claims.md`. A claim without a row is cut, never
softened into a vaguer version of itself.
- **The home page's "Mit tud a doboz ma?" list is the source of truth.** A redesign re-orders and
re-writes those facts; it does not add new ones.
- **Name the known limits** (one shared household password, no DLNA). Quietly dropping a limitation
is a new promise.
- **No invented numbers.** Counts come from the catalog, times from a measurement.
## 6. Preserved, and what needs the operator's word
- **Without asking:** logo and wordmark; the `:root` colour tokens, `2px` radius, no-shadow rule;
self-hosted Plus Jakarta Sans (§4.1 recommends Geist/Satoshi — the brand wins); nav labels, URLs,
anchor IDs, the contact form's fields and endpoint.
- **The page is dark and every section is dark.** §6.C demands both modes; this site has one locked
dark theme and no `prefers-color-scheme` block. That is a brand decision and satisfies §4.11.
- **The contrast wins are an accessibility win to honour (§11.C):** body text measures **7.56:1**,
headings **16.67:1**. Landing below that is a regression, not a restyle.
- **Needs the operator first:** a new accent colour, a different type pairing, any nav label or URL
change, a light mode, any new external dependency.
## 7. SEO is the redesign's biggest risk
§11.B says so and it is right. Here specifically: `<title>`, `meta description`, `canonical`, every
`hreflang`, the OG and Twitter tags and the JSON-LD block are **carried over unchanged** unless the
operator approves otherwise; heading text with Search Console impressions changes only deliberately;
**the English twin moves in the same commit**. Baseline: `audits/seo-2026-10-10/`.
## 8. Kept from taste-skill in full — do not re-derive
§0 the one-line design read. §1 the three dials, reasoned from the brief. **§4.7 layout discipline**
(hero fits the viewport, top padding capped, max 4 hero text elements, nav on one line, the
**section-layout-repetition ban**, eyebrows rationed to 1 per 3 sections, split-header ban, zigzag
cap, exact bento cell counts). §4.3 anti-centre bias and §9.C no three equal feature cards. §4.9
content density and the copy self-audit. §9 the AI tells minus the en-dash clause — no section-number
eyebrows, no generic step labels ("1 / 2 / 3", "01 / 02"), no scroll cues, no decorative status dots,
no version footers, no pills over images, no locale strips. §11.B audit-first and §11.D the lever
order, stopping as soon as the brief is satisfied. §14 the pre-flight, **run in writing**.
## 9. Pre-flight additions, after §14
- [ ] Every page file still starts with the **UTF-8 BOM**; **zero emoji**; **zero `—`** incl. meta.
- [ ] **No `<style>` block** in the HTML, and the `site.css` `?v=` bumped.
- [ ] Every request goes to `felhom.eu` or `stats.felhom.eu` — **listed from the browser**, not assumed.
- [ ] Page weight compared with the previous version, and said out loud.
- [ ] Body-text contrast at or above the §6 baseline; focus visible; reduced motion honoured.
- [ ] **No horizontal scroll at 390 px** (`clientWidth == scrollWidth`).
- [ ] The English twin moved in the same commit, promising nothing the Hungarian does not.
- [ ] `python3 scripts/repo_gates.py` green, with any new page registered in `site_gates.py`.
## 10. Looking at a page at a chosen width
`resize_window` reports success on this workstation and `window.innerWidth` does not move. The
method that works, with the harness and its proof: `audits/redesign-2026-10-10/AUDIT.md` §B. Short
form: render the page in a **same-origin iframe** of the chosen width and screenshot that region —
the media queries fire on the iframe's width. For a page that is not same-origin the iframe is
refused; use DevTools device mode **with a reload afterwards** (R-918, `CLOSED-ITEMS.md`).