菜单
Adds CSS animation effects to conference UI - progress bar shimmer sweep, current talk glow breathe, up-next border shift, and golden shimmer for special events. All pure CSS, no JavaScript. Use when adding polish animations to UI components.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Establishes conference visual identity with custom fonts, color palettes, and Tailwind CSS v4 design tokens. Covers self-hosted font setup, @theme inline configuration, and typography hierarchy. Use when applying brand styling to a conference display.
Orchestrates building a live conference agenda display from scratch using Next.js, Tailwind CSS, and animated backgrounds. Guides through 5 phases referencing specialized sub-skills. Use when starting a new conference agenda project or replicating the RoboCon 2026 display.
Builds the real-time schedule state engine with useCurrentTime hook, URL-based time simulation, and getScheduleState calculator. Handles current/past/upcoming detection, multi-day switching, and progress tracking. Use when implementing live schedule tracking logic.
Builds all conference schedule UI components - Header with live clock, CurrentTalk with speaker avatars, BreakCard with countdown, UpNext with expandable abstracts, PastTalks with collapsed view, and ProgressBar with shimmer. Use when implementing conference display UI.
Creates a multi-layer CSS aurora gradient background with twinkling stars and talk-change pulse effects. Uses GPU-accelerated CSS animations and seeded random star placement. No JavaScript animation loop. Use when adding atmospheric effects to a dark-themed display.
Creates animated SVG characters that walk along the bottom edge of the display with speech bubbles, physics interactions, and special actions like shooting, power-ups, eating, and singing duets. Uses requestAnimationFrame with direct DOM manipulation. Use when adding interactive character animations.
基于 SOC 职业分类
| name | animating-ui-elements |
| description | Adds CSS animation effects to conference UI - progress bar shimmer sweep, current talk glow breathe, up-next border shift, and golden shimmer for special events. All pure CSS, no JavaScript. Use when adding polish animations to UI components. |
Four CSS animation effects. All pure CSS — no JS animation loops.
White highlight sweeps across the progress bar every 8 seconds:
@keyframes shimmer-sweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(300%); }
}
.shimmer-bar {
position: relative;
overflow: hidden;
}
.shimmer-bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.08) 45%,
rgba(255, 255, 255, 0.12) 50%,
rgba(255, 255, 255, 0.08) 55%,
transparent 100%);
animation: shimmer-sweep 8s ease-in-out infinite;
border-radius: inherit;
}
Gentle teal box-shadow pulse on the current talk card:
@keyframes glow-breathe {
0%, 100% {
box-shadow: 0 0 20px rgba(0, 192, 181, 0.06), 0 0 60px rgba(0, 192, 181, 0.03);
}
50% {
box-shadow: 0 0 30px rgba(0, 192, 181, 0.12), 0 0 80px rgba(0, 192, 181, 0.06);
}
}
.glow-breathe { animation: glow-breathe 4s ease-in-out infinite; }
First Up Next item border shifts teal → gold:
@keyframes border-shift {
0%, 100% { border-left-color: #00c0b5; }
50% { border-left-color: #bbc446; }
}
.border-shift-active {
border-left: 3px solid #00c0b5;
animation: border-shift 10s ease-in-out infinite;
}
Special events (karaoke, after-party) get golden highlight:
@keyframes highlight-shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.upnext-highlight {
position: relative;
background: rgba(187, 196, 70, 0.06);
border: 1px solid rgba(187, 196, 70, 0.25);
overflow: hidden;
}
.upnext-highlight::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(187, 196, 70, 0.1) 45%,
rgba(255, 215, 0, 0.15) 50%,
rgba(187, 196, 70, 0.1) 55%,
transparent 100%);
background-size: 200% 100%;
animation: highlight-shimmer 4s ease-in-out infinite;
pointer-events: none;
}
All animations go in CSS files imported from globals.css:
@import "tailwindcss";
@import "./aurora.css";
@import "./shooting-stars.css";
Apply via className: shimmer-bar, glow-breathe, border-shift-active, upnext-highlight.