admin
fc52e3865e
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.
138 lines
9.1 KiB
Markdown
138 lines
9.1 KiB
Markdown
---
|
||
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`).
|