Stats
Actions
Tags
From company-profile
Use when adding Arabic + English (or any RTL + LTR) internationalization to a Next.js site - RTL layout, logical CSS, Arabic typography and font subsetting, locale-aware logo/wordmark, serving the default locale unprefixed at the bare domain, and next-intl routing.
How this skill is triggered — by the user, by Claude, or both
Slash command
/company-profile:bilingual-arabic-rtlThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Arabic is not English-with-a-flag. It is a different script (its own display and
Arabic is not English-with-a-flag. It is a different script (its own display and body fonts), a different direction (RTL, which must mirror the entire layout), and usually the primary audience for a KSA/GCC site (so it is the default locale). Get the four load-bearing decisions right early; retrofitting any of them is expensive.
/en. With next-intl:
localePrefix: 'as-needed' + localeDetection: false so / is deterministic
and CDN-cacheable. Add permanent redirects /ar -> / and /ar/:path* -> /:path*
in next.config (these run before middleware). Build ONE localePath(locale, path)
helper as the single source of truth for every public URL (canonical, hreflang,
sitemap, og:url, 404 links). Migrating from /ar-prefixed later touches all of
those at once.<html lang dir> set per locale in the layout. Logical CSS
only: ms/me/ps/pe/start/end, never ml/mr/left/right. Then RTL mirrors for
free and you never write a second stylesheet.web-performance-mobile.Pick a display + body face per script. The shipped set: DM Serif Display (Latin display) + Manrope (Latin body) + Reem Kufi (Arabic display) + Cairo (Arabic body). Critical detail:
// Arabic faces: Arabic subset ONLY. Embedded Latin runs (digits, brand words)
// fall through per-glyph to the Latin body face via the CSS font stacks, which
// is preloaded anyway. This cut ~51KB of preloaded font bytes.
const reemKufi = Reem_Kufi({ subsets: ['arabic'], weight: ['400','500','600','700'], variable: '--font-reem-kufi', display: 'swap' });
const cairo = Cairo({ subsets: ['arabic'], weight: ['400','500','600','700'], variable: '--font-cairo', display: 'swap' });
In globals.css, point tokens at the variables and list the Latin body face
second in the Arabic stacks so embedded Latin/digits render in it:
--font-ar: var(--font-reem-kufi), var(--font-manrope), .... Apply Arabic body
to html[lang="ar"] body, Arabic display to html[lang="ar"] h1-h4. DM Serif
has weight 400 only, so set font-synthesis: none to avoid faux-bold.
The wordmark is live text in the brand fonts, not an image, and takes a
locale prop: English in the Latin display face, Arabic in the Arabic display
face, each at its spec weight. Only the faceted mark is an <img>. To optically
center a wordmark against the mark, measure the live baseline with a zero-size
baseline-aligned probe span (getBoundingClientRect().bottom) plus canvas ink
extent; do NOT use fontBoundingBoxAscent (it ignores half-leading and pushes
the glyphs too high).
\b(ml|mr|pl|pr|left|right)- in components.307 redirect from / to /ar -> uncacheable, adds latency on every bare-domain hit. Use as-needed + redirects instead.In a real browser at both / (Arabic, RTL) and /en: dir flips, layout
mirrors, language switch lands the mirrored route and swaps font + dir, four (not
six) font files preload, and there are zero visible Latin brand leaks on the
Arabic pages.
npx claudepluginhub omaression/company-profile-plugin --plugin company-profileProvides CDSS development patterns for drug interaction checking, dose validation, clinical scoring (NEWS2, qSOFA), and alert classification integrated into EMR workflows.