Verified:GitHub

planby-pro-best-practices

Enforce Planby PRO positioning and layout APIs for React EPG and timeline UIs.

Updated Aug 23, 2026

Search Tags:#timeline #react #timezone #schedule #drag-and-drop #planby-pro #epg

One-click install

npx skills add https://github.com/leonardoacosta/central-claude --skill planby-pro-best-practices

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: planby-pro-best-practices
Source: https://github.com/leonardoacosta/central-claude/tree/main/skills/planby-pro-best-practices
Command: npx skills add https://github.com/leonardoacosta/central-claude --skill planby-pro-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Planby PRO Best Practices prevents subtle layout and data errors when building EPGs, Gantt charts, and timeline UIs with the Planby PRO React library by prescribing correct positioning, data shapes, and integration patterns that avoid invisible rendering bugs and SSR hydration mismatches.

Core Features & Use Cases

Positioning correctness: Enforce channel.position top/height to match itemHeight so programs align with channels.
Native renderer guidance: Use native components such as ChannelBox and ProgramBox and the useProgram/useEpg hooks to preserve Planby's layout engine and drag/resize behaviors.
Time and snap rules: Convert snap values from time to pixels, prefer ISO datetimes with explicit times to avoid timezone off-by-one errors, and use pixel-based snap.x values for drag/resize.
SSR and styling: Wrap Planby components in client-only boundaries to avoid Emotion CSS-in-JS hydration issues in Next.js.
Debugging checklist & API reference: Includes a clear checklist for missing programs, misaligned channels, and links to a comprehensive API reference.
Use Case: Implementing a studio schedule where rooms map to channels, live programs must show current-time indicators, external drag-in from a sidebar creates new programs, and overlapping programs are handled by stack or layer modes.

Quick Start

Ask the assistant to implement a Planby PRO schedule using useEpg with channel positions that match itemHeight, ProgramBox-based renderers, a 50px horizontal snap, ISO date-time strings with explicit times, and a client-only wrapper to avoid Emotion SSR issues.

Frequently Asked Questions about planby-pro-best-practices

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

FAQPage Schema

Why are my Planby PRO EPG programs misaligned with their channels?▼

Planby PRO timeline drag-and-drop requires converting snap values from time to pixels, using pixel-based snap.x values for drag and resize operations to maintain accurate snapping behavior.

How do I fix Emotion CSS-in-JS hydration errors with Planby in Next.js?▼

Handle overlapping programs in a React timeline EPG by using Planby PRO stack or layer modes. These modes manage program overlaps while preserving the layout engine via useEpg and useProgram hook contracts.

Do I need to use ISO datetimes for Planby PRO schedule data?▼

Use ISO datetimes with explicit times for Planby PRO schedule data to avoid timezone off-by-one errors. Preserving ISO datetime formats ensures accurate timeline rendering and positioning.

Can I use custom React renderers for EPG channels and programs without breaking drag-and-drop?▼

Use native Planby components like ChannelBox and ProgramBox with useProgram and useEpg hooks to preserve the layout engine and drag-and-drop behaviors when implementing custom React renderers for EPG channels and programs.