{"id":"d7e4b4fd-2ab6-470f-bec7-5fe97a293b7d","shortId":"MM38W8","kind":"skill","title":"social-media-dashboard","tagline":"Creator-facing social media analytics dashboard in a single HTML file.\nA platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI\ncards (followers, engagement rate, likes, reposts), a follower-growth\nchart, a \"top post this week\" preview, and a trending topics / top\nc","description":"# Social Media Dashboard Skill\n\nProduce a single-screen, creator-facing social media analytics dashboard.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Colors, typography,\n spacing, radii, and component styling all come from it. Do not invent\n new tokens; do not hard-code brand colors of the platforms — let the\n DESIGN.md carry the visual identity, and reference platforms only by\n name and monogram.\n2. **Identify** which platforms the brief calls out. Default to\n X / LinkedIn / YouTube / Instagram if unspecified. Keep the platform\n switcher to a single row, max 5 entries.\n3. **Generate plausible data**, never `Metric A / Metric B` placeholders.\n Pick a creator persona (default: \"AI / design indie creator\") and\n derive consistent numbers across the page — e.g. follower counts on\n the switcher must match the KPI row when X is selected.\n4. **Lay out** the page top-to-bottom:\n - **Header bar**: brand mark + section label (\"ANALYTICS\"), a\n dark/light toggle, time-range tabs (7D · 30D · 90D · YTD), and a\n creator avatar block on the right.\n - **Hero strip**: a one-sentence summary in display type\n (\"You shipped 14 posts on X this week.\"), one supporting line of\n metadata, and two CTAs (\"Export report\", \"New post →\").\n - **Ask bar**: a single-line input styled as a search field, with\n ghost-text suggestions (\"top performing last week\",\n \"comments from verified accounts\").\n - **Platform switcher**: 4 cards in one row, each with platform\n monogram, name, follower count, and a `+X.XK this week` delta. The\n active platform uses an elevated surface from DESIGN.md.\n - **KPI row**: 4 cards — Followers · Engagement Rate · Likes (7D) ·\n Reposts (7D). Each card has a label (uppercase, label-md), a big\n value (display or headline-lg), a delta vs prior period, and a\n small footnote (\"vs. 4.4% last week\", \"Aug 9–17 · 14 posts\").\n - **Main grid (2/3 + 1/3)**:\n - Left: **Follower Growth · 30D** — a full-width inline SVG line\n chart with a soft area fill underneath, axis ticks at start /\n midpoint / end, and two labelled annotation dots\n (\"Newsletter drop +842\", \"Viral thread +1.2K\").\n - Right: **Top Post · This Week** — a card showing the rendered\n post (avatar, handle, post body, optional 16:9 media block), with\n a header tag \"click-through rate 5.6%\" in the DS accent.\n - **Lower grid (1/2 + 1/2)**:\n - **Trending topics on this platform**: 5–7 chip-style rows with\n topic name + post count + 24h delta sparkline (10 polyline\n points, no labels).\n - **Top comments**: 3 cards, each with avatar, handle (verified\n check if relevant), comment body (2 lines max, ellipsised), and\n a small `❤ 312 · 💬 18` row in muted text.\n5. **Write** one self-contained HTML document:\n - `` through ``, CSS in one inline `