schedule-design

Implement React conference schedule UIs with 2D room×time grids and filtering.

154|9|Updated Mar 27, 2026
One-click install
npx skills add https://github.com/swyxio/skills --skill schedule-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: schedule-design
Source: https://github.com/swyxio/skills/tree/main/schedule-design
Command: npx skills add https://github.com/swyxio/skills --skill schedule-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building conference schedule pages that are responsive, filterable, and intuitive requires handling dozens of edge cases like sticky table alignment, theme persistence, visible filter state, and shareable session links. This Skill eliminates repetitive trial and error by providing proven, production-vetted patterns for every core schedule UI requirement.

Core Features & Use Cases

  • Production-ready React architecture: Pre-vetted single-file component structure, build-time data normalization, and synthetic plenary session handling extracted from a real 2000-line conference schedule page.
  • Complete UX subsystem patterns: Includes ready-to-use implementations for 2D room×time grids, multi-axis filtering with visible active state, dark/light theme sync, session favorites, and debounced semantic search.
  • Use Case: If you are building a schedule page for a tech conference, use this Skill to implement a fully functional, user-friendly schedule view with filtering, favorites, and shareable session modals in a fraction of the development time.

Quick Start

Use the schedule-design skill to build a filterable 2D conference schedule grid with dark/light theme support and session favorites for your upcoming event.

Frequently Asked Questions about schedule-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a responsive conference schedule grid with React?

Build a responsive conference schedule grid in React by implementing a 2D room×time layout with sticky table alignment, build-time data normalization, and synthetic plenary session handling to ensure production-ready performance.

What is the best way to implement multi-axis session filtering for an event schedule?

The best way to implement multi-axis session filtering is to maintain visible active filter state alongside the UI, reducing user confusion by clearly displaying applied filters while supporting debounced semantic search for event sessions.

How do I create shareable session modal links using URL query parameters in React?

Create shareable session modal links by syncing the active session modal state with URL query parameters, allowing users to bookmark or share direct links to specific schedule sessions within your React application.

Can I sync dark and light theme persistence for a React schedule page without external dependencies?

Yes, you can implement theme persistence for a React schedule page using pre-vetted single-file component patterns that handle dark and light theme synchronization without requiring external dependencies.

How do I handle sticky table alignment issues in a 2D room×time schedule layout?

Handle sticky table alignment issues in a 2D room×time schedule layout by applying production-vetted CSS patterns extracted from real conference pages, ensuring synchronized scrolling and consistent visual alignment across grid cells.

Does this React conference schedule approach support session favorites and user state?

Yes, this approach includes ready-to-use UX subsystem patterns for session favorites, allowing users to bookmark preferred sessions while maintaining persistent user state across the event schedule interface.