mirror of https://github.com/nexu-io/open-design.git synced 2026-05-31 19:04:39 +07:00

Mohamed Abdallah be1b3dae40

craft: add rtl-and-bidi so OD artifacts don't break for Arabic / Hebrew / Persian users (#595 )

* feat(craft): add rtl-and-bidi + opt-ins on blog-post, docs-page, finance-report

Module 4 of 5 in the behavioral craft series proposed in #501. Modules
1 (state-coverage, #502) and 2 (animation-discipline, #515) merged.
Module 3 (accessibility-baseline, #587) open at time of authoring.

Differentiating niche per the corpus prior-art survey: zero existing
OSS RTL skill is Apache-2.0, framework-agnostic, and aligned with
UAX #9 rev 51. The closest comparators (idanlevi1/rtlify 5★, MIT;
skills-il/localization 7★, MIT) are LTR-web-skewed and don't cover
Flutter Directionality, RN I18nManager, Compose LocalLayoutDirection,
or iOS UIKit semanticContentAttribute / SwiftUI layoutDirection.

Three-loop adversarial review pass via Claude Opus 4.7 xhigh effort
(codex unavailable). Loop 1 caught five revisions (typography spin-out,
WebKit prose compression, mistakes-list trim 12→9, alreq letter-spacing
rename dropped, WebKit r94775 specific revision dropped). Loop 2 caught
one blocking SwiftUI 4 claim and three nits. Loop 3 said ship.

Skill opt-ins picked to avoid PR #587 merge surface: blog-post (long-form
text), docs-page (LTR code islands in RTL prose), finance-report
(numerals + IBAN + currency).

Refs #501.

* fix(craft): rtl-and-bidi review fixes (lefarcen 6 findings)

- P2 #1 WebKit #50949: bug is RESOLVED FIXED, not still open. Verified
  directly against bugs.webkit.org. Removed the broken-WebKit framing;
  the recommendation to prefer <bdi> over CSS now stands on UAX #9
  §2.7 ("prefer markup over CSS or control characters") rather than a
  WebKit bug. Source list updated to drop the dead reference.
- P2 #2 isolate vs embedding controls: U+202C PDF is the
  embedding/override terminator, not an isolate terminator. Split into
  two families: isolate controls (U+2066/2067/2068 + U+2069 PDI) for
  modern code, embedding/override controls (U+202A/202B/202D/202E +
  U+202C PDF) as legacy. Recommend isolates first.
- P2 #3 base direction and language: new section covering
  <html dir lang>, mixed-language subtrees, dir=auto for UGC. Without
  this, agents can follow every other rule and still ship an LTR
  document containing Arabic.
- P2 #4 phone/IBAN/card values: bare <bdi> is unreliable for
  weak/neutral character runs; updated must-mirror bullet and forms
  section to require <bdi dir="ltr">. Added common-mistake entry.
- P3 #1 native mobile budget: added a one-line opt-out hint at the
  top of the section so HTML-only skills know they can skim it. Full
  split into web/native files deferred — the table is 16 lines on a
  176-line file, the cost is bounded.
- P3 #2 lintability: restructured "common mistakes" into three groups
  — mechanically lintable, needs script detection, HTML semantics —
  with explicit exception language (chart axes, physical-object icons,
  platform-pinned UI). Avoids false positives in future linting.

Reviewed via Claude CLI Opus 4.7 xhigh effort (3 loops on the
original draft); these fixes are explicit reviewer responses with
WebKit Bugzilla state verified live.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(craft): rtl-and-bidi mrcfps round-2 precision (lang+dir, isolate picks)

Two non-blocking precision items:

- lang-without-dir scope: previous wording implied English never needs
  dir="ltr". True only at the document root in a default-LTR page.
  lang does not reset an inherited bidi base direction, so an
  <section lang="en"> inside an RTL ancestor still resolves RTL.
  Reworded to "lang without dir is fine at the document root in a
  default-LTR page; inside any opposite-direction ancestor, set both."
- Plain-text isolate picks: previous wording recommended U+2068 / U+2069
  generically. U+2068 is FSI (first-strong auto-detect) — wrong default
  for known-direction runs, especially weak/neutral-heavy values like
  phone, IBAN, card numbers (the same class this file forces to LTR in
  HTML). Split: LRI/PDI for known-LTR, RLI/PDI for known-RTL, FSI/PDI
  reserved for unknown direction. Added an explicit "don't default to
  FSI" callout.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(craft+skills): rtl-and-bidi mrcfps round-3 — skill-body conflicts + bidi semantic correction

P1 BLOCKING — skill-body physical-direction conflicts (mrcfps):

- skills/docs-page: "left nav" / "right-rail TOC" / "left-edge accent
  stripe" survive in skill body even with the rtl-and-bidi opt-in,
  because craft is injected ABOVE the skill body. An Arabic docs
  request would still see "Left nav" and emit physical-direction
  layout. Updated description, lay-out section, and self-check to
  inline-start / inline-end vocabulary; added a self-check bullet
  requiring logical CSS on rails and accent.

- skills/blog-post: pull-quote "accent rule on the left" updated to
  "accent rule on the inline-start edge" with a matching note about
  flipping under dir="rtl".

P1 craft semantic correction (mrcfps):

- HTML-semantics lint: previous wording equated <bdi dir="auto"> with
  unicode-bidi: plaintext. Not equivalent. <bdi> isolates an inline
  run from surrounding bidi resolution; unicode-bidi: plaintext
  changes how base direction is *determined* for each plaintext
  paragraph in a block. Different surfaces. Reworded the lint guidance
  to "prefer semantic isolation in HTML for inline runs; reach for
  unicode-bidi: plaintext only when that block-level paragraph
  behavior is explicitly required and tested" — and explicitly flagged
  that they are not drop-in equivalents to avoid future linters
  flagging valid CSS with a non-equivalent fix.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(craft): rtl-and-bidi mrcfps round-4 — split progress-bar from media scrubber

Non-blocking precision: prior must-mirror bullet lumped "progress-bar
fill" together with sliders, which would have flipped a video / audio
scrubber under dir="rtl" — directly conflicting with the must-not-mirror
rule for media playback controls (play/pause/FF/rewind represent tape
direction, not reading direction). The two cases collide on every audio
or video player.

- Must-mirror progress bars now scoped to "non-media" (download, upload,
  form-completion).
- Media scrubber / progress timeline added explicitly to the must-not-
  mirror media bullet.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-06 12:43:48 +08:00

2.1 KiB

Raw Blame History

name

description

triggers

finance-report

Quarterly / monthly financial report — masthead with KPIs, revenue and burn charts, P&L summary table, top-line highlights, and an outlook paragraph. Use when the brief mentions "financial report", "Q3 report", "MRR review", "P&L", or "财报".

financial report

finance report

quarterly report

p&l

mrr review

财报

财务报告

mode

platform

scenario

featured

preview

design_system

craft

example_prompt

prototype

desktop

finance

type	entry
html	index.html

requires

sections

true

color

typography

layout

components

requires

rtl-and-bidi

Build me a Q3 financial report for an early-stage SaaS — MRR, burn, gross margin, top accounts.

Finance Report Skill

Produce a single-screen financial report in one self-contained HTML file.

Workflow

Read the active DESIGN.md. Tables, KPI cards, and chart strokes use palette tokens — never invent new ones.
Classify the period (monthly / quarterly / yearly) and entity (startup, division, project) from the brief. If unspecified, assume a quarterly SaaS report and pick believable numbers.
Layout the page in this order:
- Masthead: company / period / "Confidential — Finance" badge.
- Headline KPI strip (4 cards): Revenue, Net new MRR, Gross margin, Cash runway.
- Revenue trend chart (inline SVG line + area).
- Cost breakdown chart (inline SVG bar) with a 2–3 bullet caption.
- P&L summary table (Revenue / Gross profit / Opex / Net) with current vs prior period.
- Top accounts table with logo placeholders, plan, ARR, status badge.
- Outlook paragraph + footer with author + signature line.
Write one self-contained HTML doc (CSS in one inline <style> block).
Self-check: every number ties to a labelled chart or table; deltas show direction and percentage; accent colour used at most twice.

Output contract

<artifact identifier="finance-report-q3" type="text/html" title="Q3 Finance Report">
<!doctype html>
<html>...</html>
</artifact>

2.1 KiB Raw Blame History Unescape Escape

Finance Report Skill

Workflow

Output contract

2.1 KiB

Raw Blame History