calm-typography-and-rtl

Enforces Flutter typography, font bundling, and RTL numeral rules for six locales.

Updated Sep 2, 2026
One-click install
npx skills add https://github.com/zakariaf/Odova --skill calm-typography-and-rtl-zakariaf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: calm-typography-and-rtl
Source: https://github.com/zakariaf/Odova/tree/main/.claude/skills/calm-typography-and-rtl
Command: npx skills add https://github.com/zakariaf/Odova --skill calm-typography-and-rtl-zakariaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Flutter apps supporting Arabic-script locales often ship clipped descenders, mixed digit sets, monospace hacks for aligned figures, and truncated German button labels. This Skill codifies one design system's typographic decisions — a nine-step type scale with a 13px floor, bundled Vazirmatn with metric compensation, region-based numeral and calendar resolution — so every rendered string follows the same rules. ## Core Features & Use Cases - Type scale enforcement: Nine named TextStyle roles (display through caption) with a hard 13px floor, three weight slots, em-to-pixel tracking conversion, and a shell script that fails the build on violations. - Font bundling and script handling: Bundles variable Vazirmatn as TTF with LicenseRegistry registration, cmap-based coverage tests for fa/ar/ckb codepoints, and compensated Arabic-script line heights with zero letter-spacing. - Numerals, dates, and RTL: Region-based (not language-based) resolution of digit sets and calendars, Jalali date display, always-Latin fields like VIN and export JSON, and exactly six mirrored glyphs. - Use Case: When adding a new user-visible string or formatting a price in a Flutter app shipping en/de/fr/fa/ar/ckb, apply this Skill to pick the correct CalmType role, shape digits last, and pass the check_type_floor.sh gate before the PR. ## Quick Start Ask the assistant to apply the Calm typography rules when adding a new localized label or formatting an odometer value in the Flutter codebase, then run scripts/check_type_floor.sh to verify compliance.

Frequently Asked Questions about calm-typography-and-rtl

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

FAQPage Schema
How do I align columns of numbers in Flutter without a monospace font?

Apply FontFeature.tabularFigures() and FontFeature.liningFigures() to your existing TextStyle via copyWith. This gives fixed advance widths on the same humanist face, and you should verify the bundled font ships tnum for both Latin and Arabic-Indic digit blocks.

How do I bundle a custom font like Vazirmatn in a Flutter app?

Declare the variable TTF under flutter/fonts in pubspec.yaml and let FontWeight drive the wght axis without extra FontVariation entries. Ship the OFL.txt license as an asset and register it with LicenseRegistry before runApp; never use google_fonts in an offline app.

Should Arabic locales use the same line heights as Latin text in Flutter?

No. Arabic script stacks dots above letters and drops tails below the baseline, so Latin-tuned line boxes clip descenders silently. Use a compensated variant with taller line heights, slightly larger caption and label sizes, and letterSpacing set to zero.

Does digit shaping depend on language or device region?

Digit and calendar resolution should come from the device region, not the language subtag. For example ar-MA gets Latin digits with Maghrebi separators while ckb-IR gets Jalali dates, and shaping is a 1:1 codepoint display transform applied after NumberFormat grouping.

Why do German button labels break Flutter layouts?

German runs roughly 30% longer than English, and large type sizes compound the overflow inside fixed-height pills. Buttons should wrap to two lines with reserved space rather than truncate, ellipsise, or auto-shrink, and layouts must survive 200% text scale.

Which icons should mirror in RTL Flutter layouts?

Only directional glyphs mirror: back and disclosure chevrons, backspace, swap, undo, and prev/next. Object glyphs like vehicles, pumps, gauges, and clocks keep one canonical asset because mirroring them makes false claims about the physical world.