felhom.eu/skills/felhom-web-design/SKILL.md

name, description

name

description

felhom-web-design

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