DataTalksClub / DataTalksClub/website
Generate only the missing dark-theme illustration companions
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 0
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
Problem
Dark mode must show a genuine, composition-matched dark companion for every website watercolor illustration. A filename ending in -dark.webp is not sufficient: a stale scene, generic substitute, rejected treatment or light asset shown on a dark surface still means the light illustration has no accepted dark counterpart.
The supplied AI Dev Tools screenshot (20260917-222933-01-clipboard.png) is an explicit rejection reference. Its saturated electric-blue watercolor reads as a pasted cloud, and its hard/high-contrast edge does not blend into the navy page. Do not preserve or imitate that treatment.
This is a bounded missing-companion audit and generation task. Existing pairs already accepted on their real pages must remain byte-for-byte unchanged.
Normative references
- Website illustration workflow — built-in image generation, chroma recovery, native/lossless artifacts and real-page gates.
_docs/design/illustration-assets.md— asset locations, theme pairing, alpha, edge and browser verification._docs/design/course-illustrations.md— course scene meanings and installed consumers.- Primary positive references: the accepted homepage light/dark pairs and their actual homepage desktop/mobile renders (
home-hero,home-stuck,home-step-2,home-step-3). Their subdued, integrated dark watercolor treatment overrides an outdated written recipe if the two demonstrably conflict. - Negative reference:
20260917-222933-01-clipboard.png; saturated blue, pasted plate, hard edge.
Scope
Audit before generation
- Inventory every runtime-visible light watercolor under
core/static/core/illustrations/and every template/include that selects its theme companion. - For each light slot, classify the dark side as exactly one of:
accepted_match— same intended scene/composition, already visually accepted on the real dark surface;missing_file— no dark asset resolves;stale_or_generic— a file resolves but is not the light scene's companion;rejected_quality— a nominal pair exists but fails the accepted dark treatment/edge contract.
- Record path, dimensions, SHA-256 and consuming routes for each pair under
.tmp/illustration-sources/issue-419/inventory.*. Filename-pair tests are input to this audit, not proof of visual acceptance. - The AI Dev Tools dark asset/treatment shown in the supplied negative screenshot is
rejected_qualityand requires a new candidate. Identify any additional failures from evidence; do not assume every course asset needs regeneration.
Generate/install only confirmed gaps
- Use the
website-illustrationsskill and its built-in image-generation path. Never request an API key. If the built-in backend version is not exposed, record it as unverified and continue. - For each
missing_file,stale_or_genericorrejected_qualityslot, use its accepted light illustration as the exact scene/composition anchor and the accepted homepage dark artwork/render only as the dark-style/edge reference. - Generate each dark companion independently. Preserve subject, action, pose, object count, geometry, crop, white fills, green/indigo accents, line weight and semantic meaning from its own light anchor. Do not recolor the light bitmap or copy another illustration's cloud silhouette.
- Use a uniform saturated chroma exterior and the repository finishing workflow to recover real transparency. Retain native lossless PNG working sources in
.tmp/; install lossless WebP at the expected-dark.webppath only after acceptance. - Update the owning include/map only where the audit found an incorrect/missing selection. Preserve decorative image semantics, loading behavior and dimensions.
- If comparison with the accepted homepage assets proves a narrow statement in the illustration guidance outdated, amend only that statement and record the evidence. Do not rewrite the workflow or retroactively redefine accepted assets.
Non-goals
- No regeneration, recoloring, recompression, resizing or metadata rewrite of an
accepted_matchlight or dark file. - No changes to illustration concepts, foreground composition, page copy/layout, SVGs, logos, event banners, portraits or unrelated media.
- No CSS filter, opacity, blend-mode, blur, clipping or dark overlay used to disguise an asset defect.
- No shared/copy-pasted watercolor cloud across scenes.
- No archive/ZIP deliverable and no generated preview committed from
.tmp/.
Dependencies
- No code dependency or external credential is required. Generation uses the built-in tool.
- The exact target list is produced by the audit. Work must stop expanding once every non-accepted slot in that frozen inventory has an accepted companion.
Acceptance criteria
- The inventory covers every runtime-visible light illustration, its resolved dark selection, all consuming routes, dimensions and SHA-256. It detects scene/quality mismatches rather than relying only on
-darkfilenames. - Every pre-existing
accepted_matchfile has the same SHA-256 before and after the task. No accepted light/dark pair is regenerated or re-encoded. - The rejected AI Dev Tools treatment is replaced by a newly generated, composition-matched candidate; the saturated electric-blue pasted cloud and hard edge shown in
20260917-222933-01-clipboard.pngare absent. - Only inventory entries classified
missing_file,stale_or_genericorrejected_qualityreceive new production assets or mapping changes. - Each new dark asset preserves its light anchor's scene, subject/action, pose, proportions, object count, crop, foreground fills and course meaning. It introduces no extra people, robots, props, labels, logos or text.
- Dark watercolor is subdued slate-indigo/lilac and visually integrated with the actual navy surface. It has natural restrained pigment variation and a gradual irregular transparent fade; there is no bright-blue plate, halo, glow, rim, hard contour, rectangle, clipping, jagged fringe, key spill or disconnected edge noise.
- White faces/pages/screens remain opaque; navy ink, hands, limbs and object connections are intact; green/indigo accents remain legible. Native-size inspection at 200–400% finds no malformed anatomy, generated compression noise or accidental transparency holes.
- Every installed production asset is genuine-alpha lossless WebP at its declared/native canvas. The retained PNG and WebP RGBA are equivalent under the workflow verifier; all four borders contain transparency, while both opaque and partially transparent artwork remain.
- Theme selection renders exactly one appropriate image at a time. Dark mode never flashes/retains the light asset after decode, and light mode remains unchanged.
- Real-page dark-mode screenshots are captured after
complete,naturalWidth > 0anddecode()at 1440×900, 390×844 and 320×844 for every affected route/slot. Each screenshot is opened and checked for scale, composition, clipping, edge integration and surrounding-surface contrast. - A light-mode regression screenshot confirms each corresponding light anchor and layout are unchanged. Shared consumers (course family hero,
/coursescards/collage,/tour/docs uses where applicable) are checked when their include/map changes. -
core/tests/test_illustration_assets.py, focused illustration/page tests, the skill's finishing/verifier checks and applicable Playwright tier pass. Tests assert both asset existence and correct light/dark source selection. - The generation record names the exact light/style references, prompt, built-in tool, backend version or
unverified, raw/final paths, hashes, chroma-removal command/parameters, pixel/alpha checks, affected routes and reviewed screenshots.
Browser scenarios
Dark desktop
- Open each affected real route at 1440×900 with dark mode active.
- Wait for both theme images to decode and confirm only the dark companion is visible.
- Compare against the accepted light composition and homepage dark treatment; reject any pasted/high-saturation cloud, hard boundary, semantic drift or scale/layout change.
Dark mobile
- Repeat at 390×844 and 320×844.
- Verify artwork remains complete and subordinate to copy, with no crop, overflow, halo or edge plate exposed by the narrower surface.
Light regression and theme switch
- Render the affected slots in light mode and compare hashes/layout with the pre-task evidence.
- Switch light→dark→light, waiting for decode each time.
- Verify the correct companion appears without two visible variants, an empty slot or a changed light asset.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read .agents/skills/website-illustrations/SKILL.md and the three design references, then inventory runtime-visible assets under core/static/core/illustrations/ and their consuming includes or maps. Use core/tests/test_illustration_assets.py and the focused illustration/page tests as the first checks, followed by the required Playwright screenshots at affected routes. Done means only confirmed non-accepted slots have accepted dark companions, existing accepted hashes and light renders are unchanged, and the verifier and applicable tests pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- playwright, python
- Domain
- design, frontend, testing
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100