Home

Welcome to the Qahera UI Kit Wiki

Qahera UI Kit (قاهرة لتصميم الواجهات) is the premier, contract-governed, AI-native design system engineered for bidirectional (Arabic RTL / English LTR) digital platforms. Built by Alwkala Studio, it synthesizes:

1. shadcn-style Source Ownership: Developers own the code directly in their repository without runtime framework lock-in.
2. daisyUI-style Token Utility: 335+ semantic design tokens and 13 authentic Cairo neighborhood themes.
3. Preline-style Multi-Stack Parity: 100% semantic vocabulary parity across React 19 / RSC, PHP 8.x Plates, Native HTML, Web Components, and HTMX.
4. Sovereign AI Decision Layer: Native Model Context Protocol (MCP) server providing autonomous coding agents with machine-readable contracts and deterministic guardrails.

---

The Core Equation

$$\mathbf{\text{Qahera UI Kit}} = \mathbf{\text{Design System}} + \mathbf{\text{Registry}} + \mathbf{\text{AI Decision Layer}}$$

Unlike traditional component libraries that merely dump CSS classes on screen, Qahera is structured as an authoritative compiler pipeline:

• Contracts (contracts/): Define the canonical vocabulary, props, and accessibility roles.
• Recipes (recipes/): Map tokens to scoped atomic CSS.
• Tokens (tokens/): W3C Design Tokens Community Group (DTCG) specification with day/night light/dark modes.
• Behaviors (behavior/): Zero-dependency Alpine.js hydration modules.
• Multi-Target Renderers (renderers/): Deterministic code generators for 5 production environments.

---

Quick Navigation

Knowledge Domain	Description	Wiki Link
Getting Started	CLI quickstart (npx qahera-ui), CDN, Next.js, and PHP setup	Getting-Started
Architecture & Invariants	The 17 non-negotiable invariants, Zero-Custom-CSS, and Logical CSS	Architecture-and-Invariants
AI Decision Layer & MCP	Local MCP Server (Stdio & HTTP), 7 AI tools, and IDE integration	AI-Decision-Layer-and-MCP
Component & Pattern Registry	The 49 canonical components and 21 compositional patterns	Components-and-Patterns
Cairo Atlas Themes	13 authentic Cairo neighborhood themes and cultural movements	Cairo-Atlas-Themes
Contributing Guide	Quality gates, WCAG AA audits, and Pull Request workflow	Contributing

---

System Health & Verifications (v1.7.0 Certified)

• Schema & Invariant Integrity: 49 Contracts · 49 Recipes · 21 Patterns · 47 Icons (100% Passed)
• TypeScript Strictness: 0 Errors across React, Next.js 16, and template files
• WCAG 2.1 AA Contrast: All color combinations verified $\ge 4.5:1$ (up to $19.21:1$)
• Performance Budget: CSS Raw 238.06 KB / Gzip 32.51 KB (Under 35 KB limit)
• React Server Components (RSC): 32 Pure Server Components (0kb Client JS) + 15 Leaf Client Components
• Bidirectional RTL/LTR: 100% Logical CSS properties (margin-inline-start, padding-inline)
• Arabic Typography Discipline: Alexandria (Headings) and Cairo (Body/UI). Font Amiri banned.