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>
This commit is contained in:
Tuola-waj 2026-05-06 21:50:23 +08:00 committed by GitHub
parent 98e40c1cfc
commit 42e4d080bd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 1863 additions and 2 deletions

View file

@ -111,8 +111,11 @@ function extractSwatches(raw) {
seen.add(key); seen.add(key);
colors.push({ name: cleanName, value: v }); colors.push({ name: cleanName, value: v });
} }
// Form A: "- **Background:** `#FAFAFA`" // Form A: "- **Background:** `#FAFAFA`" — the colon may sit inside the
const reA = /^[\s>*-]*\**\s*([A-Za-z][A-Za-z0-9 /&()+_-]{1,40}?)\s*\**\s*[:]\s*`?(#[0-9a-fA-F]{3,8})/gm; // 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; let m;
while ((m = reA.exec(raw)) !== null) push(m[1], m[2]); while ((m = reA.exec(raw)) !== null) push(m[1], m[2]);
// Form B: "**Stripe Purple** (`#533afd`)" // Form B: "**Stripe Purple** (`#533afd`)"

View file

@ -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 (6480px) 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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View file

@ -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 917 · 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**: 57 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.

File diff suppressed because it is too large Load diff