[WardLu]

Stacked on #27. Review and merge #27 first; GitHub retargets this PR to main when the base branch is deleted.

Mode (user-confirmed)

README mode — visual refresh. The information architecture and copy are
unchanged; this only adds the visual layer the collection index was missing.
Pure SVG was chosen (deterministic typography/geometry, no ImageGen material),
and no GIF: there is no meaningful motion case here.

Assets

File	Job
assets/readme/hero.svg / hero.zh-CN.svg	Collection identity plus the real anatomy of one Skill
assets/readme/workflow.svg / workflow.zh-CN.svg	The four steps from a Skill change to a versioned release

Both are pure SVG, 1200-unit viewBox, own background, system fonts only, with
<title>/<desc> and no script, foreignObject, or remote references.

Facts in the visuals are taken from the repository: SKILL.md, VERSION, and
the bilingual README pair exist in all 8 Skills, while references/ and
tests/ are labelled "when needed" because only 5 of 8 Skills carry tests.

Placement: hero at the top of the existing centered block; workflow immediately
after the maintainer bullets it summarises.

Design decisions

• Palette: near-black canvas with a single #2563EB accent taken from the
  existing collection-version badge, plus two neutral grays. No new brand colour
  was invented.
• Motif: the Skill module (its real file set). No decorative grid, glow, or
  circuit pattern.
• The hero deliberately carries no value sentence: the Markdown H1 subtitle
  and intro paragraph already state it, and repeating it a third time made the
  first screen decorative rather than clearer. The hero's job is identity plus
  the anatomy the Markdown does not show.
• Locale variants are named as a document family (hero.svg /
  hero.zh-CN.svg) so the i18n parity audit compares each pair as one target —
  this is the first real use of the checker fix in docs: make release notes bilingual and backfill v0.3.0/v0.4.0 #27.

Evidence

Check	Result
audit_readme.py README.md	OK — image references and SVG basics passed (2 local images)
audit_readme.py README.zh-CN.md	OK — image references and SVG basics passed (2 local images)
audit_repo_i18n.py — root README pair	PASSED
Rendered at 900px (GitHub content width)	hero and workflow legible; inspected visually
Rendered at 360px	identity survives; diagram labels are not readable at that width, so the same facts stay in the maintainer bullets
git diff --cached --check	clean
public_repo_check.py --staged --require-feature-branch	passed
public_repo_check.py --changed-since origin/main --check-remote	passed

Not verified

• No browser preview. The in-app browser rejects local file:// URLs under
  its URL policy and the computer-use backend returned nodeRepl.fetch request failed; I did not route around either. Renders inspected locally are at
  /tmp/readme-preview/ (hero-900.png, hero.zh-CN-900.png,
  workflow-900.png, workflow.zh-CN-900.png, plus full-page renders).
• The lower half of the page was not visually inspected. The available
  thumbnail renderer only produces the top region; the workflow embed was
  verified structurally in the rendered HTML and as a standalone 900px render.

Open question for the reviewer

The hero repeats the repository name, and the Markdown # WardLu Skills H1 sits
directly below it. That is the conventional hero pattern and keeps a text title
for accessibility and search, but if you prefer, the hero can move below the
badge row, or the H1 can be dropped in favour of the hero's alt text.

Accessibility (added after review)

The first version of these assets did not meet WCAG AA. Measured contrast
showed 6 of 10 text elements below the 4.5:1 threshold for normal text:

Element	Before	Ratio	After	Ratio
Eyebrow (18u → 13.5px)	#2563EB on #0B0F14	3.72 FAIL	#6EA8FE	7.96 PASS
Card title (16u → 12px)	#2563EB on #151B23	3.35 FAIL	#6EA8FE on #171F29	6.88 PASS
Card footer (16u → 12px)	#6B7684 on #151B23	3.75 FAIL	#93A1B0 at 18u	6.30 PASS
Hero metadata (16u → 12px)	#6B7684 on #0B0F14	4.16 FAIL	#93A1B0 at 18u	7.29 PASS
Workflow index (16u → 12px)	#2563EB on #151B23	3.35 FAIL	#6EA8FE on #171F29	6.88 PASS
Workflow sublabel (16u → 12px)	#93A1B0 on #151B23	6.57 PASS	#AAB4C0 at 18u	7.91 PASS
Project name (56u → 42px bold)	#E8EDF3	16.33 PASS	unchanged	16.33 PASS
Card rows (20u → 15px)	#E8EDF3	14.71 PASS	unchanged	14.11 PASS
Workflow title (20u → 15px)	#E8EDF3	14.71 PASS	unchanged	14.11 PASS

Changes made:

• Text palette replaced with a ramp where every level clears 4.5:1 on both the
  canvas and the card surface; most levels clear 7:1.
• Accent moved from the light-theme badge blue #2563EB to a lightened tint
  #6EA8FE of the same hue, so the dark canvas keeps the project's colour
  without failing contrast.
• Smallest labels moved from 16 to 18 units (12px → 13.5px at 900px content
  width) so they leave the "nonessential metadata only" size band.
• Card surface lightened to #171F29 for clearer module separation.

Result: 0 of 10 text elements below AA; 7 clear the 7:1 AAA threshold.

Other criteria

• 1.1.1 Non-text content: <title>/<desc> inside each SVG plus meaningful
  alt on every embed.
• 1.4.5 Images of text: these are images containing text. The same facts are
  present as page text — the H1 and subtitle, the skills table, and the
  maintainer bullets that name SKILL.md, the version, README locales,
  references and tests, and the four release steps. The imagery carries identity
  and hierarchy, which is the presentational case, not the only copy of a fact.
• 1.4.11 / contrast of non-text: the card boundary is decorative; its
  separation comes from the surface fill plus a #2C3746 stroke.
• The SVG supplies its own background, so text contrast is independent of the
  reader's GitHub light/dark theme.

Not verified

Contrast was computed arithmetically from the frozen hex values and the rendered
size at 900px. No automated accessibility auditor (axe/pa11y) was run, and no
screen-reader pass was performed.