Plan: Add "View image" link to media-library gallery cards

Objective

Ship a direct "View image" link on every media library gallery card so users can open the generated PNG in the browser without navigating through the HTML card page.

Implement

Read and implement all steps in the plan at docs/plans/add-image-link-media-library-gallery.md — Add "View image" link to media-library gallery cards. Verify against the plan's Tests, Verification, and Acceptance Criteria before reporting done. If everything passed, mark completion in docs/plans/add-image-link-media-library-gallery.md — tick each step's [x] marker and each criterion's - [x], set status: completed — and re-render the HTML from the spec. If any check failed, leave status: in-progress and say which.

More ways to run this plan — goal & workflow prompts, file path

Pursue as goal — optimize for the outcome

Achieve this goal: Add "View image" link to media-library gallery cards. The plan at docs/plans/add-image-link-media-library-gallery.md describes one approach — use it as reference, but optimize for the outcome. Verify against the plan's Tests, Verification, and Acceptance Criteria before reporting done. If everything passed, mark completion in docs/plans/add-image-link-media-library-gallery.md — tick each step's [x] marker and each criterion's - [x], set status: completed — and re-render the HTML from the spec. If any check failed, leave status: in-progress and say which.

File add-image-link-media-library-gallery.html

Path docs/plans/add-image-link-media-library-gallery.html

Spec docs/plans/add-image-link-media-library-gallery.md

Definition of done 5 / 5 done

Context

The story behind this plan — what prompted the work and why it matters now.

The media-library skill scans docs/media/social/ and builds a filterable HTML gallery ( index.html ). Each card-generating skill saves both an HTML card and a PNG screenshot side-by-side in that directory. The gallery currently links each card to its HTML file so users can read the post copy — but there is no way to open the PNG image directly from the gallery UI.

The fix is a plain HTML <a> link placed below each gallery card, outside the existing <a class="gallery-card"> wrapper. Siblings can't nest, so this avoids the HTML spec violation entirely and requires no JS card-click refactoring. Each card + link pair lives inside a thin <div class="gallery-card-wrap"> container so the existing filter JS can show/hide both elements together.

Two files need updating: templates/gallery.html (CSS for the wrap and link, JS filter update) and skills/media-library/SKILL.md (the gallery entry block that the skill generates per card).

Steps

The step-by-step work, in order — each step says what to do, why it matters, and how to check it worked.

done Update gallery.html — add .gallery-card-wrap and .open-img-link CSS; update applyFilters() JS to target .gallery-card-wrap

Why

Each gallery card entry needs a thin wrapper div so the filter JS can show/hide both the card and the "View image" link together. Without a wrapper, hiding .gallery-card would leave orphaned links visible. Adding .open-img-link CSS gives the plain link a consistent visual treatment matching the dark-mode gallery theme.

Verify

Open kit/plugins/social-media-tools/templates/gallery.html . Confirm: A .gallery-card-wrap CSS rule exists (at minimum display: contents or a block wrapper with no gap impact). A .open-img-link CSS rule exists with at least font-size , color , and display declared. The applyFilters() JS function targets .gallery-card-wrap for style.display toggle, reading data-type and data-topic from the inner .gallery-card child. The var cards = grid.querySelectorAll(…) line selects .gallery-card-wrap (not .gallery-card ).

done Update SKILL.md Step 3 — wrap each card entry in <div class="gallery-card-wrap"> and add a plain <a class="open-img-link"> below the card

Why

The SKILL.md Step 3 block is the exact HTML template the skill generates per card when it builds docs/media/social/index.html . Wrapping in .gallery-card-wrap and placing the image link as a sibling after </a> (not inside it) keeps the HTML valid — no nested anchors — and no JS click handler is needed.

Verify

Open kit/plugins/social-media-tools/skills/media-library/SKILL.md and read Step 3. Confirm: The gallery entry block starts with <div class="gallery-card-wrap"> . The existing <a class="gallery-card" href="{BASENAME}" …> card is unchanged inside the wrap. After the closing </a> , a <a class="open-img-link" href="{BASENAME_PNG}" target="_blank" rel="noopener">View image</a> appears as a sibling (not a child of the card <a> ). The entry block closes with </div> (closing the wrap).

Definition of done

The plan counts as done when every statement below is true — check each one off as you verify it.

gallery.html has a .gallery-card-wrap CSS rule and a .open-img-link CSS rule.
The applyFilters() JS in gallery.html targets .gallery-card-wrap for show/hide, reading data-type and data-topic from the inner .gallery-card .
SKILL.md Step 3 wraps each entry in <div class="gallery-card-wrap"> and places <a class="open-img-link" href="{BASENAME_PNG}" target="_blank" rel="noopener">View image</a> as a sibling after the card </a> .
No nested <a> elements exist in the generated entry — the image link is a sibling of the card anchor, not a child.
After running /social-media-tools:media-library to rebuild the gallery, each card shows a "View image" link below it; clicking it opens the .png in a new browser tab, and the card filter (type chips + search) still hides both the card and its link together.

Final check

One last pass to confirm the whole change works end to end.

Rebuild the gallery by running /social-media-tools:media-library and open docs/media/social/index.html in a browser. Confirm:

Each card has a "View image" link rendered visibly below it (not inside the card).

Clicking the card body opens the HTML card file in the same tab.

Clicking "View image" opens the .png in a new tab — the gallery page does not navigate away.

Using the type filter chips or search box hides both the card and its "View image" link together — no orphaned links remain visible.

Switching between grid and list view still shows the link below each card in both layouts.

Wrapping up

Three gates that must all pass before this plan is marked completed.

Required

All step TODOs marked as done
All acceptance criteria verified and checked off
Plan status updated to completed

Completion Report

No items to report — all requirements met.

Next steps

Follow-up ideas that came up along the way — none of them are required to finish this plan.

Hide "View image" link when no PNG exists

Paste this prompt into Claude to execute this follow-up:

In kit/plugins/social-media-tools/skills/media-library/SKILL.md Step 3, update the gallery entry generation logic so the .open-img-link "View image" anchor is only emitted when a matching .png file actually exists alongside the .html card. Use a bash test (-f "$MEDIA_DIR/${BASENAME_PNG}") during the scan loop to conditionally include the link element. This prevents dead links appearing for any card whose screenshot was not captured.

Show image inline in gallery on hover

Paste this prompt into Claude to execute this follow-up:

In kit/plugins/social-media-tools/templates/gallery.html, add a lightbox overlay that opens when a user clicks the thumbnail image (not the whole card). The lightbox should: display the full-resolution PNG centered with a semi-transparent backdrop, close on Escape key or backdrop click, and be accessible (role="dialog", aria-modal="true", focus trap). Wire it up via a data-lightbox attribute on the .thumb-container img. Also update SKILL.md Step 3 to add data-lightbox="{BASENAME_PNG}" to the img tag.