feat(skills): add social-media-dashboard skill + Totality Festival design system (#678)

* feat(skills): add social-media-dashboard skill + Totality Festival design system - New skill 'social-media-dashboard': single-screen creator analytics dashboard with platform switcher (X / GitHub / LinkedIn / YouTube / Instagram), KPI row, growth chart with annotations, top-post / top-PR preview, trending topics, and top comments. Includes a self-contained example.html (Totality Festival styled, X + GitHub tabs, live KPI ticker, GitHub contributors grid, world-map audience geography). - New design system 'totality-festival': cosmic-premium dark glassmorphic system with amber corona highlights and cyan atmospheric accents. Mirrors Google Labs' design.md spec example so skills can be validated against an upstream reference. - Fix swatches parser in apps/daemon/src/design-systems.ts so it recognises the '- **Name:**' bold-with-inner-colon form used by several existing systems (ant, totality-festival, ...). Previously only the '**Name** (`#hex`)' form was matched, which left their picker thumbnails empty. * feat(skills): polish social-media-dashboard example + add PR preview - Top Post media block: replace empty gold frame with an inline SVG thumbnail (radial glow + ascending data curve + amber/cyan pulse dots + play icon + 'LIVE · 0:22' caption). Visually echoes the live-artifact story the post copy is selling. - Hoist the brand-mark linearGradient into a global SVG defs block at the top of <body> so all three avatars (header, user, top-post) can reference url(#brandRing) and render the teal arrow consistently. Previously only the header SVG carried the gradient definition, so the user and post avatars rendered as empty rings under headless capture. - Add hero.png preview to .preview/ for the PR description. --------- Co-authored-by: Tuola Ge <gexingli@refly.ai>
2026-05-31 19:04:39 +07:00 · 2026-05-06 21:50:23 +08:00 · 2026-05-06 21:50:23 +08:00 · 42e4d080bd
commit 42e4d080bd
parent 98e40c1cfc
5 changed files with 1863 additions and 2 deletions
--- a/apps/daemon/src/design-systems.ts
+++ b/apps/daemon/src/design-systems.ts
@ -111,8 +111,11 @@ function extractSwatches(raw) {
    seen.add(key);
    colors.push({ name: cleanName, value: v });
  }
-  // Form A: "- **Background:** `#FAFAFA`"
-  const reA = /^[\s>*-]*\**\s*([A-Za-z][A-Za-z0-9 /&()+_-]{1,40}?)\s*\**\s*[:：]\s*`?(#[0-9a-fA-F]{3,8})/gm;
+  // Form A: "- **Background:** `#FAFAFA`" — the colon may sit inside the
+  // bold markers (`**Name:**`) or outside them (`**Name**:`). Both variants
+  // are common in hand-authored DESIGN.md files, so we allow the colon in
+  // either position around the closing `**`.
+  const reA = /^[\s>*-]*\**\s*([A-Za-z][A-Za-z0-9 /&()+_-]{1,40}?)\s*[:：]?\s*\**\s*[:：]?\s*`?(#[0-9a-fA-F]{3,8})/gm;
  let m;
  while ((m = reA.exec(raw)) !== null) push(m[1], m[2]);
  // Form B: "**Stripe Purple** (`#533afd`)"
--- a/design-systems/totality-festival/DESIGN.md
+++ b/design-systems/totality-festival/DESIGN.md
@ -0,0 +1,206 @@
+---
+name: Totality Festival Design System
+colors:
+  surface: "#121318"
+  surface-dim: "#121318"
+  surface-bright: "#38393f"
+  surface-container-lowest: "#0d0e13"
+  surface-container-low: "#1a1b21"
+  surface-container: "#1e1f25"
+  surface-container-high: "#292a2f"
+  surface-container-highest: "#34343a"
+  on-surface: "#e3e1e9"
+  on-surface-variant: "#d0c6ab"
+  inverse-surface: "#e3e1e9"
+  inverse-on-surface: "#2f3036"
+  outline: "#999077"
+  outline-variant: "#4d4732"
+  surface-tint: "#e9c400"
+  primary: "#fff6df"
+  on-primary: "#3a3000"
+  primary-container: "#ffd700"
+  on-primary-container: "#705e00"
+  inverse-primary: "#705d00"
+  secondary: "#bdf4ff"
+  on-secondary: "#00363d"
+  secondary-container: "#00e3fd"
+  on-secondary-container: "#00616d"
+  tertiary: "#fcf3ff"
+  on-tertiary: "#3b2754"
+  tertiary-container: "#e7d1ff"
+  on-tertiary-container: "#6b5586"
+  error: "#ffb4ab"
+  on-error: "#690005"
+  error-container: "#93000a"
+  on-error-container: "#ffdad6"
+  background: "#121318"
+  on-background: "#e3e1e9"
+  surface-variant: "#34343a"
+typography:
+  headline-xl:
+    fontFamily: Space Grotesk
+    fontSize: 72px
+    fontWeight: "700"
+    lineHeight: 80px
+    letterSpacing: -0.04em
+  headline-lg:
+    fontFamily: Space Grotesk
+    fontSize: 48px
+    fontWeight: "600"
+    lineHeight: 56px
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Space Grotesk
+    fontSize: 32px
+    fontWeight: "600"
+    lineHeight: 40px
+  body-lg:
+    fontFamily: Inter
+    fontSize: 18px
+    fontWeight: "400"
+    lineHeight: 28px
+  body-md:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: "400"
+    lineHeight: 24px
+  label-md:
+    fontFamily: Space Grotesk
+    fontSize: 14px
+    fontWeight: "500"
+    lineHeight: 20px
+    letterSpacing: 0.1em
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  unit: 8px
+  container-max: 1280px
+  gutter: 24px
+  margin-mobile: 16px
+  margin-desktop: 64px
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.label-md}"
+    rounded: "{rounded.lg}"
+    padding: 12px
+    height: 48px
+  button-primary-hover:
+    backgroundColor: "{colors.primary-fixed}"
+  button-secondary:
+    backgroundColor: transparent
+    textColor: "{colors.secondary}"
+    typography: "{typography.label-md}"
+    rounded: "{rounded.lg}"
+    padding: 12px
+    height: 48px
+  card-glass-level-2:
+    backgroundColor: rgba(52, 52, 58, 0.2)
+    rounded: "{rounded.xl}"
+    padding: "{spacing.gutter}"
+  input-field:
+    backgroundColor: "{colors.surface-container-lowest}"
+    textColor: "{colors.on-surface}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 12px
+  hero-headline:
+    textColor: "{colors.primary}"
+    typography: "{typography.headline-xl}"
+  badge-celestial:
+    backgroundColor: "{colors.tertiary-container}"
+    textColor: "{colors.on-tertiary-container}"
+    typography: "{typography.label-md}"
+    rounded: "{rounded.full}"
+    padding: 4px
+---
+
+# Design System Inspired by Totality Festival
+
+> Category: Themed & Unique
+> Surface: web
+> A cosmic-premium, glassmorphic dark system that captures the visceral awe of a solar eclipse — obsidian surfaces, amber "corona" highlights, and cyan atmospheric accents.
+
+## 1. Visual Theme & Atmosphere
+
+"Cosmic Premium" — the visceral tension and awe of a solar eclipse. The aesthetic blends the stark mystery of deep space with the explosive brilliance of the solar corona. Surfaces appear as translucent obsidian slabs floating over nebula-like gradients. High-energy amber accents represent the "diamond ring" flash — they make the interface feel luminous and alive rather than heavy or muted.
+
+- **Visual style:** dark, glassmorphic, cinematic
+- **Color stance:** obsidian neutral, amber corona accent, cyan atmospheric
+- **Design intent:** Keep outputs recognizable as a premium festival / creator product; use radial gradients for backgrounds to simulate the circular nature of the eclipse.
+
+## 2. Color
+
+- **Primary:** `#fff6df` — Amber / white-gold, the solar corona and "diamond ring" flash. Used for critical CTAs and high-importance highlights.
+- **Primary Container:** `#ffd700` — Pure corona gold. Reserved for the single most important highlight on a screen.
+- **Secondary:** `#bdf4ff` — Soft cyan, the atmospheric thinning and ethereal glow of the sky during totality. Used for interactive states and secondary emphasis.
+- **Secondary Container:** `#00e3fd` — Vivid cyan for interactive ambient glow rims.
+- **Tertiary:** `#fcf3ff` — Faint lavender-white for subtle tinted highlights.
+- **Tertiary Container:** `#e7d1ff` — Deep indigo haze, celestial badges.
+- **Surface:** `#121318` — Obsidian / near-black foundation.
+- **Surface Container:** `#1e1f25` — Slightly elevated obsidian for cards.
+- **Surface Container High:** `#292a2f` — Elevated panels, active states.
+- **Text:** `#e3e1e9` — Warm off-white for primary body copy and headlines.
+- **Text Muted:** `#d0c6ab` — Warm parchment tone for metadata and labels.
+- **Outline:** `#999077` — Low-contrast warm gray for hairline borders.
+
+- Favor Primary (#fff6df) and Primary Container (#ffd700) for the "corona flash" moments — max 3 per screen.
+- Use Secondary (#bdf4ff / #00e3fd) for interactive states, never for decorative flourishes.
+- Surfaces stack as semi-transparent glass: `rgba(255, 255, 255, 0.05-0.1)` with `backdrop-filter: blur(20px)` and a 1px `rgba(255, 255, 255, 0.1)` inner border to simulate light refraction.
+
+## 3. Typography
+
+A dual-font strategy to balance cinematic impact with utility.
+
+- **Display / Headings:** Space Grotesk — geometric, technical, futuristic-astronomical tone. Tight letter spacing (`-0.02em` to `-0.04em`) on large headings to feel "locked" and monumental.
+- **Body / Long-form:** Inter — neutral, highly legible in low-light environments.
+- **Labels:** Space Grotesk with wide tracking (`0.1em`) and uppercase, to read as "coordinates" or "readouts" rather than UI chrome.
+
+Apply a subtle text-shadow or low-opacity primary-colored glow to `headline-xl` elements on the darkest backgrounds for a truly cinematic feel — radiant, not static.
+
+## 4. Layout & Spacing
+
+- **Grid:** 12-column fixed grid on desktop with generous outer margins (64–80px) to simulate the isolation of a celestial body in the void. Fluid model on mobile with 16px margins.
+- **Rhythm:** 8px base unit. Internal component spacing tight (8 / 16px); external section margins wide (64 / 80px) to create distinct "islands" of content.
+- **Max width:** 1280px for content containers.
+- **Negative space is a feature, not a cost.** Prefer breathing room over density.
+
+## 5. Elevation & Depth
+
+Depth is achieved through **glassmorphism** and light-based layering — not traditional drop shadows.
+
+- **Level 1 (Base):** Deep obsidian surface with an optional radial gradient vignette in `#1a1b21` → `#121318`.
+- **Level 2 (Panels):** Semi-transparent surfaces at `rgba(52, 52, 58, 0.2)` with `backdrop-filter: blur(20px)` and a 1px inner stroke at `rgba(255, 255, 255, 0.1)` to simulate refraction on a glass edge.
+- **Level 3 (Interactive / Active):** An **ambient glow** — a soft, diffused shadow tinted with Secondary (`#00e3fd`) or Primary Container (`#ffd700`), creating the impression of light bleeding from behind the object.
+
+## 6. Shapes
+
+Shape language is **soft-technical**. Geometric overall, but small corner radii soften aggression.
+
+- **Buttons, inputs:** `rounded-lg` (8px).
+- **Cards, featured containers:** `rounded-xl` (12px).
+- **Badges, pills:** `rounded-full`.
+- **Decorative elements:** circles and perfect arcs are encouraged to mirror the orbital / eclipse theme.
+
+## 7. Components
+
+- **Primary button:** Amber fill on obsidian, with a luminous amber glow on hover (mimics the diamond-ring flash). Space Grotesk label, uppercase, `0.1em` tracking.
+- **Secondary button:** Transparent fill, cyan outline and label — suggests the sky's transition during totality.
+- **Glass card (level 2):** `rgba(52,52,58,0.2)` + 20px blur + 1px inner white stroke + generous internal padding.
+- **Input field:** Anchored in the deepest surface (`#0d0e13`) for maximum contrast; cyan border on focus.
+- **Badges:** Pill-shaped with the tertiary container color; reserved for "celestial" metadata (status, live indicators).
+
+## 8. Do's & Don'ts
+
+- **Do** use Primary Container (`#ffd700`) no more than 3 times per screen — it's the flash, not the background.
+- **Do** pair large Space Grotesk headlines with a subtle primary-colored glow on dark surfaces.
+- **Do** tint shadows and glows with Primary or Secondary — never use pure gray shadows.
+- **Don't** use solid opaque fills for cards — break the glass illusion.
+- **Don't** combine amber and cyan glows on the same element — choose one depending on state (amber = highlight / CTA; cyan = interactive / focus).
+- **Don't** use sharp 0-radius corners except for data tables where structure outweighs warmth.
--- a/skills/social-media-dashboard/.preview/hero.png
+++ b/skills/social-media-dashboard/.preview/hero.png
--- a/skills/social-media-dashboard/SKILL.md
+++ b/skills/social-media-dashboard/SKILL.md
@ -0,0 +1,118 @@
+---
+name: social-media-dashboard
+description: |
+  Creator-facing social media analytics dashboard in a single HTML file.
+  A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI
+  cards (followers, engagement rate, likes, reposts), a follower-growth
+  chart, a "top post this week" preview, and a trending topics / top
+  comments side panel. Use when the brief mentions a "social media
+  dashboard", "creator analytics", "social analytics", or names specific
+  platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together
+  with metrics like followers, engagement, likes, reposts.
+triggers:
+  - "social media dashboard"
+  - "social analytics"
+  - "creator dashboard"
+  - "creator analytics"
+  - "social media analytics"
+  - "社媒后台"
+  - "创作者后台"
+  - "社交媒体仪表盘"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: creator
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  example_prompt: "Create a social media analytics dashboard using my Design System. Show X, LinkedIn, YouTube, Instagram with follower counts, engagement rate, likes, reposts, trending topics, and top comments."
+---
+
+# Social Media Dashboard Skill
+
+Produce a single-screen, creator-facing social media analytics dashboard.
+
+## Workflow
+
+1. **Read the active DESIGN.md** (injected above). Colors, typography,
+   spacing, radii, and component styling all come from it. Do not invent
+   new tokens; do not hard-code brand colors of the platforms — let the
+   DESIGN.md carry the visual identity, and reference platforms only by
+   name and monogram.
+2. **Identify** which platforms the brief calls out. Default to
+   X / LinkedIn / YouTube / Instagram if unspecified. Keep the platform
+   switcher to a single row, max 5 entries.
+3. **Generate plausible data**, never `Metric A / Metric B` placeholders.
+   Pick a creator persona (default: "AI / design indie creator") and
+   derive consistent numbers across the page — e.g. follower counts on
+   the switcher must match the KPI row when X is selected.
+4. **Lay out** the page top-to-bottom:
+   - **Header bar**: brand mark + section label ("ANALYTICS"), a
+     dark/light toggle, time-range tabs (7D · 30D · 90D · YTD), and a
+     creator avatar block on the right.
+   - **Hero strip**: a one-sentence summary in display type
+     ("You shipped 14 posts on X this week."), one supporting line of
+     metadata, and two CTAs ("Export report", "New post →").
+   - **Ask bar**: a single-line input styled as a search field, with
+     ghost-text suggestions ("top performing last week",
+     "comments from verified accounts").
+   - **Platform switcher**: 4 cards in one row, each with platform
+     monogram, name, follower count, and a `+X.XK this week` delta. The
+     active platform uses an elevated surface from DESIGN.md.
+   - **KPI row**: 4 cards — Followers · Engagement Rate · Likes (7D) ·
+     Reposts (7D). Each card has a label (uppercase, label-md), a big
+     value (display or headline-lg), a delta vs prior period, and a
+     small footnote ("vs. 4.4% last week", "Aug 9–17 · 14 posts").
+   - **Main grid (2/3 + 1/3)**:
+     - Left: **Follower Growth · 30D** — a full-width inline SVG line
+       chart with a soft area fill underneath, axis ticks at start /
+       midpoint / end, and two labelled annotation dots
+       ("Newsletter drop +842", "Viral thread +1.2K").
+     - Right: **Top Post · This Week** — a card showing the rendered
+       post (avatar, handle, post body, optional 16:9 media block), with
+       a header tag "click-through rate 5.6%" in the DS accent.
+   - **Lower grid (1/2 + 1/2)**:
+     - **Trending topics on this platform**: 5–7 chip-style rows with
+       topic name + post count + 24h delta sparkline (10 polyline
+       points, no labels).
+     - **Top comments**: 3 cards, each with avatar, handle (verified
+       check if relevant), comment body (2 lines max, ellipsised), and
+       a small `❤ 312 · 💬 18` row in muted text.
+5. **Write** one self-contained HTML document:
+   - `<!doctype html>` through `</html>`, CSS in one inline `<style>` block.
+   - CSS Grid for page-level layout; Flexbox inside cards.
+   - Semantic HTML: `<header>`, `<main>`, `<section>`, `<article>`.
+   - Tag each logical region with `data-od-id="slug"` for comment mode:
+     `header`, `hero`, `ask`, `platform-switcher`, `kpis`,
+     `follower-growth`, `top-post`, `trending`, `top-comments`.
+6. **Charts**: inline SVG only, no JS libraries.
+   - Line chart: `<path>` for the curve, a second `<path>` with low-alpha
+     fill for the area, two `<circle>` annotation dots with text labels.
+   - Sparklines: `<polyline>` with 10 points, no axes, ~16px tall.
+   - Use the DS accent for highlights and the DS `on-surface-variant` for
+     muted text. Accent appears at most three times on the page.
+7. **Self-check**:
+   - Every color resolves to a DESIGN.md token (or a documented
+     `rgba(token, alpha)` for glass surfaces).
+   - Numbers are internally consistent (switcher follower count matches
+     the active platform's KPI).
+   - Header bar and hero strip are sticky; main content scrolls.
+   - Density follows the DS mood: glass / cosmic DSes get more breathing
+     room and ambient glow on the active platform; clean / corporate DSes
+     tighten gaps and drop the glow.
+
+## Output contract
+
+Emit between `<artifact>` tags:
+
+```
+<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+
+One sentence before the artifact, nothing after.
--- a/skills/social-media-dashboard/example.html
+++ b/skills/social-media-dashboard/example.html