Vercel Composition Patterns
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
Design patterns and lessons for building conference schedule pages with React.
Install Schedule Design
$ npx skills add swyxio/skills --skill schedule-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install swyxio/skills schedule-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/swyxio/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/schedule-design .claude/skills/schedule-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "schedule-design" agent skill from https://github.com/swyxio/skills/tree/main/schedule-design into .claude/skills/schedule-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "schedule-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/swyxio/skills/tree/main/schedule-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add swyxio/skills --skill schedule-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install swyxio/skills schedule-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/swyxio/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/schedule-design .agents/skills/schedule-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "schedule-design" agent skill from https://github.com/swyxio/skills/tree/main/schedule-design into .agents/skills/schedule-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "schedule-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add swyxio/skills --skill schedule-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install swyxio/skills schedule-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/swyxio/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/schedule-design .cursor/skills/schedule-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "schedule-design" agent skill from https://github.com/swyxio/skills/tree/main/schedule-design into .cursor/skills/schedule-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "schedule-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/swyxio/skills.git --path schedule-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add swyxio/skills --skill schedule-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install swyxio/skills schedule-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/swyxio/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/schedule-design .gemini/skills/schedule-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "schedule-design" agent skill from https://github.com/swyxio/skills/tree/main/schedule-design into .gemini/skills/schedule-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "schedule-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install swyxio/skills schedule-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add swyxio/skills --skill schedule-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/swyxio/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/schedule-design .github/skills/schedule-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "schedule-design" agent skill from https://github.com/swyxio/skills/tree/main/schedule-design into .github/skills/schedule-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "schedule-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add swyxio/skills --skill schedule-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install swyxio/skills schedule-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/swyxio/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/schedule-design .opencode/skills/schedule-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "schedule-design" agent skill from https://github.com/swyxio/skills/tree/main/schedule-design into .opencode/skills/schedule-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "schedule-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
schedule-design- GitHub stars
- 176
- Token cost
- ~2.3k tokens
- SKILL.md length
- 1,260 words
- Files
- 1
- Skills in repo
- 89
- Repo updated
- First seen
- Licence
- MIT
At a glance
Design patterns and lessons for building conference schedule pages with React.
- Works in 3 steps: The "Filters" button turns… → A compact summary strip below the header… → The session count in the header (92/214)…
- Modifying schedule views
- SKILL.md covers Architecture, Theme System, 2D Grid Overview (Room × Time) and Filter System, plus 2 more sections
- Calls npx
What it does
Schedule Design is an agent skill from swyxio/skills. Design patterns and lessons for building conference schedule pages with React. Covers theme systems, 2D grid overviews, filter UX, sticky layouts, modals, favorites, and data normalization. Use when building or modifying schedule views, grid tables, filter panels, or conference UI components.
Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development, covering Design patterns and Database schema design. It works with React. The repository describes itself as: Agent skills for Claude Code and other AI agents. The licence is MIT.
When your agent uses it
- Modifying schedule views
- Conference UI components
Example prompts
- “/schedule-design”
Requirements
- Node.js
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- The "Filters" button turns purple/highlighted with badge count: Filters (3) ▼.
- A compact summary strip below the header shows active filter chips.
- The session count in the header (92/214) turns bold + accent color.
What it can do on your machine
Read from SKILL.md and the folder at commit 038ef34. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Schedule Design loads about 2.3k tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 1,260 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from swyxio/skills at commit 038ef34, republished under its MIT licence (© swyxio). 1,260 words, ~2,336 tokens.
Download SKILL.mdSave it as
.claude/skills/schedule-design/SKILL.md (or your agent's skills folder).- name
- schedule-design
- description
- Design patterns and lessons for building conference schedule pages with React. Covers theme systems, 2D grid overviews, filter UX, sticky layouts, modals, favorites, and data normalization. Use when building or modifying schedule views, grid tables, filter panels, or conference UI components.
Schedule Design Patterns
Lessons extracted from building the /europe/schedule page — a single-file (~2000 line) React component with a 2D room×time grid, 1D session list, modal detail view, multi-axis filtering, favorites, theming, and semantic search.
Architecture
Single-file component is fine for schedule pages
The entire page lives in one .tsx file. Sub-components (TypeBadge, SpeakerPhoto, SessionModal, GridOverview, SessionCard, FilterPill, StarButton) are defined in the same file. This avoids prop-drilling across module boundaries and keeps the schedule self-contained. Extract to separate files only when reuse is needed elsewhere.
Build-time data extraction with getStaticProps
Raw JSON (with nullable/optional fields) is normalized at build time into clean ScheduleSession objects with guaranteed string fields (empty string, not null). This eliminates null checks throughout the render logic.
Synthetic plenary sessions
Plenary/logistics sessions (breakfast, lunch, expo hours) are hardcoded as a PLENARY_SESSIONS array and merged with speaker sessions at build time. They get id: 10000 + i to avoid collisions.
Theme System
Semantic token objects, not CSS variables
Define a Theme type with ~40 semantic tokens (bg, bgCard, text, textSecondary, border, accent, gridHeaderBg, starActive, etc.). Create DARK_THEME and LIGHT_THEME constants. Pass t: Theme and isDark: boolean to every sub-component.
Theme persistence across pages
Store preference in localStorage under a shared key (eu-theme). On mount, check localStorage first, then fall back to window.matchMedia('(prefers-color-scheme: light)'). This syncs theme between /europe and /europe/schedule.
Global styles must also be themed
Body background, scrollbar colors (::webkit-scrollbar-*), text selection (::selection), and any <style jsx global> blocks must reference theme tokens. Don't forget the logo image — use filter: invert(1) for light mode if the logo is white-on-transparent.
2D Grid Overview (Room × Time)
HTML <table> for the grid, not CSS grid
A real <table> with <thead>, <tr>, <th>, <td> handles column alignment, sticky headers, and horizontal scroll correctly. CSS Grid struggles with sticky columns in a scrollable container.
Sticky header and sticky first column(s)
- Day header row:
position: sticky; top: 0; zIndex: 20withcolSpan={rooms.length + 1}so it spans full width on horizontal scroll. - Room header row:
position: sticky; top: 30px(offset by day header height). - Time column:
position: sticky; left: 0; zIndex: 10. - Priority column (e.g. Plenary):
position: sticky; left: 48px(offset by time column width),zIndex: 10.
Plenary column spanning
Plenary sessions span across the full day, so the Plenary column needs special logic: track which plenary sessions are "active" (started before, ending after) each time slot, and render continuing sessions with reduced opacity and a "continues" label.
Room sort order matters
Sort rooms: Plenary first → Keynote rooms → Regular rooms (alphabetical) → Special rooms (e.g. Leadership Lunch) → Expo rooms. Use a numeric group assignment for sorting.
Bright pastel grid cell colors with dark text
Grid cells use a separate GRID_COLORS palette with bright pastel backgrounds and dark text — different from the badge colors which use dark backgrounds with light text. This improves readability in the dense grid.
Cell overflow
Set maxHeight: 80 and overflowY: 'auto' on grid cell content divs so dense cells scroll rather than expanding the row.
Grid cell click → modal
Clicking a grid cell opens a SessionModal overlay (not inline expansion). The modal uses position: fixed; inset: 0 with backdrop blur, and closes on ESC, backdrop click, or close button. Lock body scroll (document.body.style.overflow = 'hidden') while modal is open.
Filter System
Type grouping for cleaner filters
Map granular types into user-friendly groups. Example: track_keynote, talk, and lightning all map to a single "talks" filter group via a TYPE_FILTER_GROUPS record and typeFilterGroup() function. Individual session badges still show the specific type — only the filter pills are grouped.
Inclusive multi-select with Set<string>
Each filter axis (day, type, track) uses a Set<string>. Empty set = no filter (show all). Use a toggleSet helper to add/remove values immutably.
Filter panel is collapsible, but active state must be obvious
When the filter panel is collapsed:
- The "Filters" button turns purple/highlighted with badge count:
Filters (3) ▼. - A compact summary strip below the header shows active filter chips.
- The session count in the header (
92/214) turns bold + accent color.
Without these, users don't realize filters are active — this was a real usability issue.
Filter layout: grouped rows with labels
Each filter axis gets its own row with an uppercase label (DAY, TYPE, TRACK). A separate row at the bottom holds "Starred", "Clear all filters", and a count summary. This is much clearer than a single inline row of mixed pills.
Starred/favorites in localStorage
Use localStorage key aie-schedule-favorites storing a JSON array of session IDs. Wrap in a useFavorites hook returning { favorites, toggleFavorite, isFavorited }. Starred items get a golden border/glow in the grid: boxShadow: '0 0 8px rgba(250,204,21,0.5)'.
Show full SKILL.md (501 more words)Show less
Session Display
Title first, then speaker attribution
Grid cells and cards show the session title first, then speaker info below. Speaker attribution format: {name} - {company}, {role} with graceful fallbacks — omit dash/comma segments if company or role is missing.
TBD speaker detection
Use regex /^tbd\b/i to detect placeholder speaker names and render them with reduced opacity.
Speaker photos with initials fallback
SpeakerPhoto component tries to load the image, falls back to a circular badge with initials (extracted from name) on error. Use loading="lazy" on images.
URL State
Modal state syncs to URL query param
Opening a modal sets ?session=<id> via shallow router replace. On mount, check router.query.session to restore the modal. This makes session links shareable.
Persistent identity must be stable across schedule rebuilds
Never use array indexes, sort positions, or regenerated numeric ordinals as identities for detail API lookups, cache keys, favorites, or new deep links. Schedule restructuring changes those numbers and can pair a current title with another session's cached description.
- Use the stable scheduled-occurrence/assignment ID; fall back to a stable slot ID for assignment-less logistics such as lunch.
- Store stable IDs in favorites and deep links. Keep numeric-link parsing only as a temporary compatibility path.
- When session details load separately from the page payload, include the schedule version in the request/cache key and return it in the response.
- Reject a page/API schedule-version mismatch instead of merging potentially unrelated content.
- Add a regression test that reorders slots and proves each stable session ID still resolves to the same description.
Semantic Search
Debounced API call with request-ID guard
Each keystroke increments a semanticRequestIdRef. Only the response whose ID matches the latest ref is applied — stale/out-of-order responses are silently dropped. Use AbortController for cleanup. Debounce delay: 400ms.
Common Pitfalls
next lintdoesn't work in Next.js 16 — usenpx tsc --noEmitinstead.- Sticky
positionin tables:position: stickyon<td>requires explicitbackground— otherwise transparent cells show content underneath during scroll. colSpanon day headers: Without propercolSpanspanning all columns, the day header won't stretch when scrolling horizontally.- Plenary contrast: Dark-on-dark or light-on-light plenary badges are easy to miss. Give plenary sessions distinct, high-contrast colors in both palettes.
- Line height in dense grid cells: Default line height is too spacious for 9-10px text in grid cells. Use
lineHeight: 1.15. - Room name typos: Always validate room names against the source data (e.g. "Westley" vs "Wesley"). A bulk rename in the JSON source is safer than patching in rendering code.
- Filter state invisible to users: The most common UX complaint was "I don't know why I'm seeing fewer sessions." Always make active filter state visible even when the filter panel is collapsed.
- Ordinal IDs are not cache keys: A positional session ID may point to a different talk after any insertion, removal, or reorder. Lazy detail endpoints keyed by ordinals can transiently attach the wrong abstract to a title when page and API caches come from different schedule builds. Use stable occurrence IDs plus schedule-versioned requests.
© swyxio, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in schedule-design of swyxio/skills.
Open the folder on GitHubat commit 038ef34
Compare with similar skills
Schedule Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Schedule Design this skillswyxio/skills | 176 | — | ~2.3k | Automated safety check: Pass | MIT | |
| Vercel Composition Patternssupabase/supabase | 111k | 58 repos | ~726 | Automated safety check: Pass | MIT | |
| Effect TSmattiacerutti/supernova | 185 | — | ~2.8k | Automated safety check: Pass | MIT | |
| Swiftdata ArchitectureKartikLabhshetwar/better-shot | 2.4k | 2 repos | ~1.2k | Automated safety check: Pass | Custom licence | |
| React Render Types CompositionHorusGoul/eslint-plugin-react-render-types | 111 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Senior Fullstackdavila7/claude-code-templates | 33k | 7 repos | ~1.1k | Automated safety check: Notes | MIT |
Similar skills
- Official
Effect TS
mattiacerutti/supernova
Write idiomatic Effect v4 TypeScript following official best practices from effect-solutions and the Effect source.
Swiftdata Architecture
KartikLabhshetwar/better-shot
Deep dive into SwiftData design patterns and best practices.
React Render Types Composition
HorusGoul/eslint-plugin-react-render-types
Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.
Senior Fullstack
davila7/claude-code-templates
Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL.
Composition Patterns
sickn33/agentic-awesome-skills
A skill your agent uses when working with composition-patterns tasks or workflows
More from swyxio/skills
All 89 skills in this repoProgrammatic Agents
swyxio/skills
Run a selected coding-agent CLI programmatically, with latency, error, usage, cost, and trace logging.
Reserved Handle Policy
swyxio/skills
Design, implement, audit, or refresh protected username and handle namespaces for public products.
New Mac Setup
swyxio/skills
Fully automated new Mac setup for fullstack web developers and AI engineers.
Youtube API
swyxio/skills
Manage YouTube videos programmatically via the YouTube Data API v3 — upload video files, upload custom thumbnails, update video metadata (titles, descriptions, tags), and query video/channel info…
Youtube Studio Batch Upload
swyxio/skills
Batch YouTube Studio upload workflow for videos sourced from Airtable, Google Drive, Loom, YouTube, or local files.
Deep Trajectory Analysis
swyxio/skills
Reconstruct and visually analyze paired agent, game, or policy trajectories to determine whether changed actions produced their intended effects.
Related
Works with
Categories
Questions about Schedule Design
What does Schedule Design do?
Design patterns and lessons for building conference schedule pages with React. Schedule Design is an agent skill from swyxio/skills. Design patterns and lessons for building conference schedule pages with React.
When should I use Schedule Design?
Schedule Design fits situations like: modifying schedule views; conference UI components.
How do I install Schedule Design in Claude Code?
Run `npx skills add swyxio/skills --skill schedule-design -a claude-code`. Or copy the skill folder (schedule-design in swyxio/skills) into .claude/skills/schedule-design in your project. Claude Code loads it when a task matches its description.
How do I install Schedule Design in Codex?
Run `npx skills add swyxio/skills --skill schedule-design -a codex`. Or copy the skill folder (schedule-design in swyxio/skills) into .agents/skills/schedule-design in your project. Codex loads it when a task matches its description.
Can I use Schedule Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add swyxio/skills --skill schedule-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/schedule-design, .gemini/skills/schedule-design, .github/skills/schedule-design and .opencode/skills/schedule-design in your project.
What does Schedule Design need to run?
Going by SKILL.md and its folder, Schedule Design needs the command-line tools its instructions call (npx). Our summary lists: Node.js.
Does Schedule Design access the network?
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Schedule Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Schedule Design use?
Schedule Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Schedule Design use?
About 2.3k tokens (SKILL.md is roughly 9.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Schedule Design?
Skills that share tags, products or a category with Schedule Design: Vercel Composition Patterns (supabase/supabase, 111k stars), Effect TS (mattiacerutti/supernova, 185 stars), Swiftdata Architecture (KartikLabhshetwar/better-shot, 2.4k stars) and React Render Types Composition (HorusGoul/eslint-plugin-react-render-types, 111 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Schedule Design?
swyxio (a GitHub user) maintains it in swyxio/skills, which has 176 GitHub stars. The repository holds 89 skills in this directory. The repository was last updated on October 5, 2026.
Source: swyxio/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.