docs: refresh README hero for better visibility#1863
Merged
coliff merged 3 commits intohtmlhint:mainfrom Apr 22, 2026
Merged
Conversation
Replaces the existing 1200x200 hero.gif with a 1200x260 retina-rendered refinement (+30% vertical, 2x pixel density, ~30% type size) while preserving the split-stage composition, palette, and animation. The smaller text in the previous version rendered fuzzy on GitHub's content column and was hard to read at a glance; this version lands ~13-15 CSS pixels on-screen after GitHub's downscale and stays crisp on high-DPI displays. Also adds the editable hero.html source and a short maintenance README so future contributors can update embedded text and re-render without archaeology.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request introduces a new hero marquee for the website, including the source HTML/CSS/JS animation and a README with instructions and a Puppeteer script for re-rendering the GIF. Feedback was provided to synchronize the capture duration with the animation loop, update deprecated Puppeteer options, and improve the maintainability of the animation source by dynamically calculating summary statistics.
…teer cleanup - hero.html: summary line (problems / rules fired) now derives from the HITS array at render time, so editing HITS keeps the summary in sync automatically (instead of two hardcoded 5s that silently drift). - capture script (in README.md): DURATION_MS 20700 -> 20000 and dropped the '+ 200' cutoff pad so the capture stops exactly at TIMELINE.loopEnd, avoiding a 700ms sliver of the next cycle bleeding into the GIF. - capture script: headless: 'new' -> headless: true per the current Puppeteer API. - hero.gif: re-captured with the above settings (still 2x retina, 2400x520, ~110 KB).
Contributor
Author
|
Thanks for the review @gemini-code-assist — all four points addressed in
The re-capture uses all three fixes, so the shipped |
This comment was marked as resolved.
This comment was marked as resolved.
livlign
added a commit
to livlign/claude-skills
that referenced
this pull request
Apr 22, 2026
Two lessons from htmlhint/HTMLHint#1863 where a 1x 1200x200 hero with 11.5 px body text shipped visibly fuzzy: - §2.4 adds a 'Retina quality is mandatory' rule with a MacBook-retina benchmark, minimum source font sizes (~15.5 px body after GitHub's 0.83x column downscale), and a pointer to the GIF-specific workaround. - §4.3g is rewritten for mandatory 2x capture. Chromium's screencast API silently ignores deviceScaleFactor, so the recipe now sets the viewport to 2W x 2H, applies body zoom: 2, and overrides the preview-only media query so the stage stays flush at (0, 0). Also removes the +200 ms cutoff pad and switches headless: 'new' to headless: true, matching the review outcome on #1863.
Member
|
GIF looks good -if you could kindly remove the HTML and MD I'll get it merged. thanks! |
Keeping the scope minimal — only the refreshed hero.gif remains.
Contributor
Author
|
Removed |
livlign
added a commit
to livlign/claude-skills
that referenced
this pull request
Apr 22, 2026
Flips the §5.1 guidance: the mandatory artifact is the image file plus the README embed, nothing else. Do not preemptively commit hero.html, docs/images/README.md, capture scripts, or any supporting files. Supporting files are ONLY added when (a) the reviewer asks, (b) the target repo has precedent, or (c) the user explicitly requests it. Cites both real incidents so the skill carries both lessons: - SonarSource/sonarqube#3427 — reviewer requested source + maintenance doc; adding them turned a 2-item review into a merged PR. - htmlhint/HTMLHint#1863 — maintainer's feedback was literally 'GIF looks good — if you could kindly remove the HTML and MD I'll get it merged.' Anything beyond the image can be scope imposition.
coliff
approved these changes
Apr 22, 2026
livlign
added a commit
to livlign/claude-skills
that referenced
this pull request
Apr 22, 2026
PR htmlhint/HTMLHint#1863 merged 2026-04-22 — a 2x retina re-render of the existing 1200x200 marquee at 1200x260 with ~30% larger fonts. Same path on main, but the entry now carries a ?v=retina cache-buster (so CDN returns the new bytes) and a PR link so readers can see what changed vs the original marquee.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The existing hero renders a little small and slightly fuzzy on GitHub's ~1000 px content column (it's captured at 1× so text softens after GitHub's downscale). This PR is a visibility refinement, not a redesign — same split-stage composition, same palette, same animation sequence, same content.
What changed
After GitHub's downscale to column width, terminal text now lands at ~13 CSS px (close to README body) instead of ~10 px, and retina displays get pixel-perfect rendering instead of subpixel blur.
Files
website/src/assets/img/hero.gif— replaced with the 2× renderwebsite/src/assets/img/hero.html— new: editable source, single self-contained HTML file (open in any browser to preview)website/src/assets/img/README.md— new: documents the stats embedded in the hero and the Puppeteer + ffmpeg re-render pipeline so future updates don't need archaeologyPreview note
The existing embed in the root README uses an absolute
raw.githubusercontent.com/.../main/...URL, so GitHub's PR diff won't render the updated GIF until merge. Click thehero.giffile in the "Files changed" tab to see the new render directly; I can also switch the embed to a relative path in a follow-up if that aligns with the project's conventions.Test plan
website/src/assets/img/hero.gifin the PR — verify the 2× render plays cleanly and text is crisp.hero.giffrom git history; delete the two new files.Feel free to close if the direction doesn't suit the project — happy to iterate or drop it.