martin65536/liquid-glass-webgl/social-card-data-kpi

Social Card Data / KPI Template

Use when the card is driven by numbers, rankings, growth, score, ROI, benchmark, funnel, or result summary.

Core Rule

A data card must have one clear claim. Do not show numbers without explaining what decision or insight they support.

Structure Options

• one hero number + explanation
• KPI tower: 3-5 stacked metrics
• before / after metric comparison
• horizontal bar mini-chart
• ranking table with one highlighted row
• ROI/result card with assumptions

Must Do

• Label units, time windows, and data source / placeholder status.
• Make one number visually primary.
• Use consistent alignment and numeric tabular spacing where possible.
• If numbers are invented placeholders, mark them as sample/demo.

Avoid

• Fake market size, fake growth rate, fake client proof.
• Chartjunk.
• Tiny chart labels.
• More than 5 competing metrics on one social card.

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.