Plans

Widen Social Card Templates to 1024px

High completed
2026-06-01 agentics chore High effort
Objective

Bump every social media card template and its matching copy panel from their current pixel widths (600–760px) to 1024px — the next standard browser breakpoint above 780px — so generated social images fill more screen real estate on modern displays.

Implement Read and implement all steps in the plan at docs/plans/widen-social-card-templates-to-1024px.md — Widen Social Card Templates to 1024px. Verify against the plan's Tests, Verification, and Acceptance Criteria before reporting done. If everything passed, mark completion in docs/plans/widen-social-card-templates-to-1024px.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: Widen Social Card Templates to 1024px. The plan at docs/plans/widen-social-card-templates-to-1024px.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/widen-social-card-templates-to-1024px.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 widen-social-card-templates-to-1024px.html
Path docs/plans/widen-social-card-templates-to-1024px.html
Spec docs/plans/widen-social-card-templates-to-1024px.md
Definition of done 7 / 7 done

Context

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

All seven HTML card templates in kit/plugins/social-media-tools/templates/ use hardcoded pixel widths for the .card and .copy-panel selectors. The widths were set conservatively to fit within 768px (tablet md) viewports — the largest, diff-card.html , is 760px wide. Modern desktop browsers default to viewports of 1280px or wider, and the Playwright screenshot pipeline captures the .card element directly (not the full page), so there is no screenshot-overflow risk at larger sizes.

The standard CSS breakpoint sequence above 780px is 1024px (the Tailwind/Bootstrap lg breakpoint). Moving to 1024px gives cards ~35% more horizontal canvas without crossing into the 1280px ( xl ) range that would cause overflow on smaller desktop windows.

Current widths by template:

Template Current .card Current .copy-panel Target

diff-card.html 760px 760px 1024px
snippet-card.html 720px 720px 1024px
blog-card.html 680px 680px 1024px
feature-card.html 680px 680px 1024px
video-card.html 640px 640px 1024px
quote-card.html 600px 600px 1024px
session-card.html min(720px,100%) min(720px,100%) min(1024px,100%)

Steps

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

1
done Update diff-card.html — change both width: 760px occurrences to width: 1024px
Why
The diff card is the widest existing template (760px); updating it first establishes the 1024px baseline for all others.
Verify
Run grep -n "width: " kit/plugins/social-media-tools/templates/diff-card.html and confirm both .card and .copy-panel show width: 1024px . No 760px should remain.
2
done Update snippet-card.html — change both width: 720px occurrences to width: 1024px
Why
Keeps the snippet card visually consistent with the diff card at the same breakpoint width.
Verify
Run grep -n "width: 720\|width: 1024" kit/plugins/social-media-tools/templates/snippet-card.html — must show two 1024px hits, zero 720px hits for the card/panel selectors (the max-width: 260px language-badge line is unaffected).
3
done Update blog-card.html — change both width: 680px occurrences to width: 1024px
Why
Blog cards share the same 680px width as feature cards; updating together keeps the template family at a uniform breakpoint.
Verify
Run grep -n "width: " kit/plugins/social-media-tools/templates/blog-card.html — confirm two 1024px lines, no 680px lines.
4
done Update feature-card.html — change both width: 680px occurrences to width: 1024px
Why
Feature card is the same 680px as blog card; updating in the same pass avoids divergence.
Verify
Run grep -n "width: " kit/plugins/social-media-tools/templates/feature-card.html — confirm two 1024px lines, no 680px lines.
5
done Update video-card.html — change both width: 640px occurrences to width: 1024px
Why
Video cards were the narrowest (640px); aligning to 1024px gives the thumbnail and metadata area proportionally more space.
Verify
Run grep -n "width: " kit/plugins/social-media-tools/templates/video-card.html — confirm two 1024px lines, no 640px lines for the card/panel selectors.
6
done Update quote-card.html — change both width: 600px occurrences to width: 1024px (card and copy-panel; leave the decorative width: 40px quote-mark element untouched)
Why
Quote card was the narrowest at 600px; the extra width lets the pull-quote breathe with wider line measure.
Verify
Run grep -n "width:" kit/plugins/social-media-tools/templates/quote-card.html — confirm two 1024px lines for .card and .copy-panel , and that width: 40px on the quote-mark element is unchanged.
7
done Update session-card.html — change both width: min(720px, 100%) occurrences to width: min(1024px, 100%) (preserve the min() wrapper)
Why
Session card already uses the responsive min() pattern so it can flex below 1024px on narrow viewports; preserving that wrapper maintains its fluid behaviour while raising the cap.
Verify
Run grep -n "min(" kit/plugins/social-media-tools/templates/session-card.html — confirm two hits with min(1024px, 100%) and no 720px remaining in that pattern.

Definition of done

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

Final check

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

Run the following grep across all templates and confirm zero old-width values remain on card/panel selectors:

grep -rn "width: 600\|width: 640\|width: 680\|width: 720\|width: 760\|min(720" \
kit/plugins/social-media-tools/templates/
Expected output: no matches (the command returns empty). Then open any one template in a browser at 1024px viewport width — the card and copy panel should each measure exactly 1024px with no horizontal scrollbar on the page body.

Optionally trigger a /social-media-tools:share-code run and confirm the Playwright screenshot captures a 1024px-wide card.

Wrapping up

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

Required

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.

Migrate all hardcoded widths to a shared CSS variable

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

In kit/plugins/social-media-tools/templates/, add a CSS custom property --card-width: 1024px to the :root block of each template. Replace the hardcoded width: 1024px on .card and .copy-panel with width: var(--card-width). For session-card.html use width: min(var(--card-width), 100%). This lets a single token control the width across all templates. Apply the change to all 7 template files and confirm with a grep.
Make width configurable per invocation via a template variable

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

In kit/plugins/social-media-tools/references/variables.md, add a {{CARD_WIDTH}} variable defaulting to 1024px. Update each template's :root block so --card-width is set via {{CARD_WIDTH}} substitution. Update the share-code, share-blog, share-selection, and share-session skill SKILL.md files to accept an optional --width argument that overrides the default when passed. Document the flag in the plugin README.