← AbdelRahman Atif

Project · 2026

madagent

A React design system for product teams and coding agents. Designed, built, documented, and shipped solo — from Figma-free design decisions to npm.

Visit ↗
Role
Design, code, docs, tests — solo
Stack
React, TypeScript, CSS Modules, Vite, Storybook, Vitest
Live
madagent.design ↗

41

documented components

0

runtime dependencies

560+

tests

About

Every design system claims to be accessible and themeable. madagent is also built for the way software gets written now: it ships with a structured madagent.md reference that teaches coding agents the entire system in roughly 800 tokens, so Cursor, Claude Code, or Copilot can use it without hallucinating props. RTL isn't a stylesheet bolted on at the end — it's CSS logical properties from the first component, with Arabic previews on every doc page and a Hijri calendar built in.

madagent.design landing page — design ecosystem, built for madagents and builders
madagent.design — advanced components · RTL first · zero runtime deps · agentic ready.
Component specimens rendered live from the design system — calendar, inputs, chips, metrics, rating, stepper, segmented control, switch, checkbox, select, and progress
Live specimens, not pictures of them: every tile is the real component, rendered straight from the system's Storybook.
Four chart components — stacked area, bar, donut with center label, and line with legend
Six chart types, one config API: data in, mapped series out.
BigCalendar with dual Gregorian and Hijri dates, Arabic numerals, and color-coded multi-day events
BigCalendar in Hijri mode: dual Gregorian–Hijri dates, multi-day spans, overflow handling. Built for the markets I design for, not added for them.
Data table rendered fully right-to-left in Arabic with bulk selection and a floating action bar
One prop flips the whole layout: Table running in Arabic — columns, checkboxes, bulk actions and all. Logical properties, no RTL stylesheet.
madagent.md — a token-efficient design system reference for coding agents
madagent.md — the entire system documented for LLM consumption in ~800 tokens.