メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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.
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.
| name | applying-conference-branding |
| description | 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. |
Tailwind CSS v4 uses @theme inline in CSS instead of tailwind.config.js:
@theme inline {
--color-navy: #000011; /* Background */
--color-teal: #00c0b5; /* Primary accent */
--color-teal-dim: #01968f; /* Muted accent */
--color-teal-glow: rgba(0, 192, 181, 0.15);
--color-cyan: rgb(230, 248, 246); /* Primary text */
/* Text hierarchy via opacity variants */
--color-cyan-60: rgba(230, 248, 246, 0.7); /* Secondary */
--color-cyan-30: rgba(230, 248, 246, 0.5); /* Tertiary */
--color-cyan-10: rgba(230, 248, 246, 0.15); /* Borders */
/* White variants for overlays */
--color-white: #ffffff;
--color-white-10: rgba(255, 255, 255, 0.1);
/* Accent / gradient colors */
--color-gradient-1: #bbc446; /* Gold/lime highlights */
--color-gradient-2: #00c0b5; /* Teal */
--color-gradient-3: #ff00e1; /* Magenta (aurora only) */
--color-gradient-4: #1f1b9f; /* Deep indigo (aurora only) */
/* Font stacks */
--font-mono: "JetBrains Mono", "Courier New", monospace;
--font-heading: "OCR-RBCN", "OCR-A", "JetBrains Mono", monospace;
}
These tokens become Tailwind utilities: text-cyan, bg-navy, border-teal, etc.
Place .woff2 files in public/fonts/:
@font-face {
font-family: "OCR-RBCN";
src: url("/fonts/OCR-RBCN.woff2") format("woff2");
font-display: swap;
}
Load JetBrains Mono via Next.js font optimization in layout.tsx:
import { JetBrains_Mono } from "next/font/google";
const mono = JetBrains_Mono({ subsets: ["latin"] });
| Element | Font | Size (Desktop) | Color |
|---|---|---|---|
| Conference title | --font-heading | 3xl | text-cyan |
| Talk titles | --font-heading | 3xl | text-cyan |
| Section labels | --font-heading | base | text-cyan-60 |
| Clock | --font-mono | 5xl | text-teal |
| Body text | --font-mono | base | text-cyan-30 |
| Speaker names | --font-mono | xl | text-cyan/90 |
--font-heading is a CSS variable, apply inline:
<h2 style={{ fontFamily: "var(--font-heading)" }}>Talk Title</h2>
rgba(..., 0.06-0.15))rgba(0, 192, 181, 0.04))