open-slide-best-practices

open-slide Best Practices for Israeli Developers

Adapted from 1weiho/open-slide (MIT). Hebrew and RTL adaptations by skills-il.

Problem

open-slide ships an opinionated authoring system: a fixed 1920×1080 React canvas, a typed DesignSystem const, a themes folder, an inspector that drops @slide-comment markers in source, and five built-in skills (slide-authoring, create-slide, create-theme, apply-comments, current-slide). None of those touch Hebrew or RTL. Out of the box, a deck written by a coding agent comes out left-aligned, system-font only, with paddingLeft that fights the Hebrew reading order, and no guidance for mixed Hebrew+English text. Israeli developers waste hours retrofitting RTL, loading Hebrew Google Fonts, and discovering that the type scale (140–200px hero) which works in Inter looks cramped in Heebo at the same weight.

Instructions

When to use

Use this skill whenever you are writing or editing code under slides/<id>/ in an open-slide project, creating a theme under themes/, or processing inspector comments — especially when any of that content is in Hebrew or bilingual.

New project setup

When in an empty folder or workspace with no existing open-slide project, scaffold one using:

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

Replace my-slide with a suitable project name. The scaffolder ships with the upstream agent skills preconfigured; this skill provides Hebrew and RTL adaptations on top.

Hebrew and RTL

For any Hebrew or bilingual deck, load ./rules/hebrew-rtl.md first. It covers:

• Hebrew Google Fonts (Heebo, Rubik, Assistant, Noto Sans Hebrew) with subset=hebrew
• The <html dir="rtl"> set-up vs per-page dir attribute (the canvas root is the page component, not the document)
• CSS logical properties (paddingInlineStart, marginInlineStart, insetInlineStart) instead of paddingLeft/marginLeft/left
• flexDirection: 'row-reverse' vs setting dir on the flex container
• Bidirectional text with <bdi> for mixed Hebrew + Latin (brand names, code, URLs)
• Hebrew-aware type scale tuning (Hebrew renders ~10–15% wider per character at the same px size)
• Hebrew DesignSystem.fonts.display and fonts.body choices that work at hero size
• RTL-aware theme markdown patterns under themes/
• Hebrew typography pitfalls: nikkud rendering, sofit letter spacing, hyphen vs maqaf