martin65536/liquid-glass-webgl/social-card-screenshot-explainer

Social Card Screenshot Explainer

Use for tool walkthroughs, product UI explanations, app feature breakdowns, AI workflow screenshots, or before/after UI captures.

Core Rule

Never drop a raw screenshot onto the canvas and call it designed. A screenshot needs a stage, readable crop, annotation hierarchy, and a reason to be there.

Structure Options

• cover + large screenshot + 3 annotations
• screenshot crop + zoomed detail + conclusion
• before / after screenshot pair
• product UI frame + numbered callouts
• 3-step workflow with one screenshot per step

Must Do

• Keep the screenshot large enough to inspect on phone.
• Crop irrelevant browser chrome unless it helps context.
• Use device/browser frames only when they clarify the source.
• Use arrows/callouts sparingly; labels must not cover key UI.
• Add one takeaway title so the card is not just a screenshot.

Avoid

• Tiny unreadable UI captures.
• Too many callout bubbles.
• Fake product screenshots.
• Decorative screenshots unrelated to the point.

Related Pattern

Use social-card-swiss as the closest pattern if a visual reference is needed.

Pattern Source Rule

Read this SKILL.md first. Do not read pattern.html by default.

Read pattern.html only when you need concrete layout rhythm, spatial relationships, or interaction/annotation behavior that this markdown cannot fully specify. When read, extract patterns only; do not copy DOM, CSS classes, exact spacing, placeholder copy, or styling wholesale.