{ "name": "aiarabicdev", "description": "A free, hand-checked directory of open source landing page templates, UI component libraries, agent frameworks, MCP servers, agent skills, starter kits and design systems. Every entry says what it is good for and where it falls short.", "url": "https://aiarabicdev.com", "license": "MIT", "generatedFrom": "typed content modules in src/content", "telegram": "https://t.me/arabic_Intelligence", "counts": { "resources": 47, "categories": 8 }, "categories": [ { "slug": "landing-pages", "name": "Landing page templates", "shortName": "Landing pages", "tagline": "Whole pages you can ship this afternoon", "description": "Open source hero sections, pricing blocks and complete marketing pages. Everything here is code you paste into your own project, not a hosted page builder you rent.", "question": "Which template gets my page live fastest without looking generic?", "url": "https://aiarabicdev.com/landing-pages", "markdownUrl": "https://aiarabicdev.com/landing-pages.md", "resourceCount": 6 }, { "slug": "ui-components", "name": "UI component libraries", "shortName": "UI components", "tagline": "The buttons, inputs and overlays underneath everything", "description": "Component libraries and primitive sets for React and the wider web. Split by the decision that actually matters: do you want components you own, or a dependency you upgrade.", "question": "Do I want unstyled primitives, or components that already look finished?", "url": "https://aiarabicdev.com/ui-components", "markdownUrl": "https://aiarabicdev.com/ui-components.md", "resourceCount": 7 }, { "slug": "ai-agents", "name": "AI agents you can run", "shortName": "AI agents", "tagline": "Finished agents, not frameworks to build one with", "description": "Agents you install and use: a personal assistant that lives on your machine, and coding agents that work in your terminal. These are applications rather than libraries, so the question is which one to run, not which one to write against.", "question": "Which agent should I actually install?", "url": "https://aiarabicdev.com/ai-agents", "markdownUrl": "https://aiarabicdev.com/ai-agents.md", "resourceCount": 4 }, { "slug": "ai-workspaces", "name": "Self hosted AI workspaces", "shortName": "AI workspaces", "tagline": "Run the chat and image tools on your own machine", "description": "Open source applications that replace a paid AI subscription with something you host: chat front ends, document assistants and image and video studios. You still pay for model usage, but the interface, the history and the data stay yours.", "question": "Can I host this myself instead of renting it?", "url": "https://aiarabicdev.com/ai-workspaces", "markdownUrl": "https://aiarabicdev.com/ai-workspaces.md", "resourceCount": 6 }, { "slug": "mcp-servers", "name": "MCP servers", "shortName": "MCP servers", "tagline": "Give your agent hands", "description": "Model Context Protocol servers that let an agent drive a browser, query a database, read a repository or fetch live documentation. Each entry says what the server can touch and what it cannot.", "question": "What can this server actually do to my systems?", "url": "https://aiarabicdev.com/mcp-servers", "markdownUrl": "https://aiarabicdev.com/mcp-servers.md", "resourceCount": 6 }, { "slug": "skills", "name": "Agent skills and instruction sets", "shortName": "Skills", "tagline": "Reusable instructions that change how a model works", "description": "Skills, command packs and instruction files that turn a general model into something that follows a specific process. The newest and least settled shelf in the directory.", "question": "Which instruction set will actually change the output I get?", "url": "https://aiarabicdev.com/skills", "markdownUrl": "https://aiarabicdev.com/skills.md", "resourceCount": 6 }, { "slug": "boilerplates", "name": "Full stack starter kits", "shortName": "Starter kits", "tagline": "Auth, database and billing already wired together", "description": "Starters that hand you a working application on day one: routing, sessions, a database and often payments. The trade you are making is speed now against someone else's decisions later.", "question": "How much of this starter will I have to unpick later?", "url": "https://aiarabicdev.com/boilerplates", "markdownUrl": "https://aiarabicdev.com/boilerplates.md", "resourceCount": 6 }, { "slug": "design-systems", "name": "Design systems and tokens", "shortName": "Design systems", "tagline": "How large teams keep an interface coherent", "description": "Published design systems, token sets and the documentation behind them. Read these when you need a defensible reason for a spacing scale rather than another component to install.", "question": "What can I borrow from a team that already solved this at scale?", "url": "https://aiarabicdev.com/design-systems", "markdownUrl": "https://aiarabicdev.com/design-systems.md", "resourceCount": 6 } ], "resources": [ { "slug": "watermelon-ui", "category": "landing-pages", "name": "Watermelon UI", "tagline": "Technical, animated landing templates installed through the shadcn CLI", "summary": "Watermelon UI publishes complete landing page templates and animated components as shadcn registry items, so a whole page arrives as files in your repository rather than a dependency. The house style is dark, monospaced and heavy on crosshairs and hairline rules. This site runs on its landing-01 template.", "url": "https://aiarabicdev.com/landing-pages/watermelon-ui", "markdownUrl": "https://aiarabicdev.com/landing-pages/watermelon-ui.md", "links": { "homepage": "https://ui.watermelon.sh", "repo": "https://github.com/WatermelonCorp/watermelon-platform" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Add a landing template", "command": "pnpm dlx shadcn@latest add @watermelon/landing-01" } ], "bestFor": [ "you want a finished page, not a box of parts", "the product is technical and the audience reads monospace without flinching", "you would rather own the files than track a dependency" ], "watchOut": [ "some registry blocks import demo components that are not published with them, so a card or two arrives empty and needs filling", "hero and template sections reference images on the project's own CDN, which you should replace with your own assets rather than hotlink", "the style is strongly opinionated, so a warm consumer brand will fight it" ], "tags": [ "shadcn", "motion", "template", "dark", "react" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "magic-ui", "category": "landing-pages", "name": "Magic UI", "tagline": "A large catalogue of animated marketing components for React", "summary": "Magic UI is a collection of animated components aimed squarely at marketing pages: marquees, beams, orbiting circles, text reveals and number tickers. It installs through the shadcn CLI and is built on Tailwind and Motion, so it drops into most React projects without a new styling layer.", "url": "https://aiarabicdev.com/landing-pages/magic-ui", "markdownUrl": "https://aiarabicdev.com/landing-pages/magic-ui.md", "links": { "homepage": "https://magicui.design", "repo": "https://github.com/magicuidesign/magicui" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free-tier", "selfHostable": true }, "install": [ { "label": "Add a component", "command": "pnpm dlx shadcn@latest add https://magicui.design/r/marquee.json" } ], "bestFor": [ "you have a plain page and need three moments of motion in it", "you already use Tailwind and shadcn/ui", "you want the effect without writing the Motion choreography yourself" ], "watchOut": [ "the finished page templates are a paid product, the individual components are the free part", "heavy effect components can cost real frame time on mid range phones, so measure before shipping several", "it is a component shelf, not a design system, so the coherence of the page is still your job" ], "tags": [ "animation", "shadcn", "motion", "marketing", "react" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "aceternity-ui", "category": "landing-pages", "name": "Aceternity UI", "tagline": "Big, cinematic hero effects with the code shown in full", "summary": "Aceternity UI is a catalogue of ambitious visual effects for React: 3D card tilts, spotlight cursors, sticky scroll reveals, infinite moving cards. Each component is documented with its full source on the page, so you copy it in rather than install a package.", "url": "https://aiarabicdev.com/landing-pages/aceternity-ui", "markdownUrl": "https://aiarabicdev.com/landing-pages/aceternity-ui.md", "links": { "homepage": "https://ui.aceternity.com" }, "facts": { "license": "Free to use, per the project's own terms", "language": "TypeScript", "pricing": "free-tier", "selfHostable": true }, "install": [], "bestFor": [ "the hero needs to do something people remember", "you are comfortable owning pasted source and adapting it", "you want the effect explained rather than hidden behind an import" ], "watchOut": [ "components arrive with hardcoded colours and sizes more often than not, so budget time for token mapping", "the paid templates and pro components are a separate offer from the free component pages", "several effects depend on cursor position and have no meaningful touch equivalent, so design the mobile view separately" ], "tags": [ "animation", "hero", "motion", "copy-paste", "react" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "motion-primitives", "category": "landing-pages", "name": "Motion Primitives", "tagline": "Small, composable animation building blocks rather than finished effects", "summary": "Motion Primitives is a set of low level animated components for React: text effects, animated groups, transitions and disclosure patterns. It sits one layer below the effect catalogues, giving you the primitives to compose your own motion rather than a finished set piece.", "url": "https://aiarabicdev.com/landing-pages/motion-primitives", "markdownUrl": "https://aiarabicdev.com/landing-pages/motion-primitives.md", "links": { "homepage": "https://motion-primitives.com", "repo": "https://github.com/ibelick/motion-primitives" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free-tier", "selfHostable": true }, "install": [], "bestFor": [ "you have a clear idea of the motion and want the plumbing done", "you are building a design system and need motion primitives inside it", "you want animation that does not announce which library you used" ], "watchOut": [ "it will not give you a finished hero, that is not what it is for", "some of the larger blocks sit behind a pro tier", "composing your own motion means you own the taste calls, which is more work than pasting an effect" ], "tags": [ "animation", "motion", "primitives", "react" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "cult-ui", "category": "landing-pages", "name": "Cult UI", "tagline": "Textured, tactile components with a distinct visual point of view", "summary": "Cult UI is a shadcn compatible collection with a warmer and more tactile look than most: layered surfaces, soft dynamic islands, expandable cards and texture heavy panels. It is a style choice more than a neutral toolkit.", "url": "https://aiarabicdev.com/landing-pages/cult-ui", "markdownUrl": "https://aiarabicdev.com/landing-pages/cult-ui.md", "links": { "homepage": "https://cult-ui.com", "repo": "https://github.com/nolly-studio/cult-ui" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Add a component", "command": "pnpm dlx shadcn@latest add https://cult-ui.com/r/texture-card.json" } ], "bestFor": [ "you want a page that does not look like every other Tailwind site", "the product is consumer facing and can carry warmth", "you already run Tailwind and Motion" ], "watchOut": [ "the look is specific, and half adopting it reads worse than not adopting it", "layered surfaces and textures cost more paint time than flat panels", "the catalogue is smaller than the big libraries, so expect to write the gaps yourself" ], "tags": [ "shadcn", "texture", "motion", "react" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "flowbite", "category": "landing-pages", "name": "Flowbite", "tagline": "Hundreds of plain Tailwind blocks that work without React", "summary": "Flowbite is a large Tailwind component and block library available as plain HTML as well as React, Vue and Svelte packages. It is the least fashionable option on this shelf and often the most practical one, because it does not assume a JavaScript framework.", "url": "https://aiarabicdev.com/landing-pages/flowbite", "markdownUrl": "https://aiarabicdev.com/landing-pages/flowbite.md", "links": { "homepage": "https://flowbite.com", "repo": "https://github.com/themesberg/flowbite" }, "facts": { "license": "MIT", "language": "JavaScript", "pricing": "free-tier", "selfHostable": true }, "install": [ { "label": "Install", "command": "pnpm add flowbite" } ], "bestFor": [ "the project is server rendered templates rather than a React app", "you need a lot of ordinary blocks quickly", "the team is more comfortable in HTML than in a component API" ], "watchOut": [ "the free blocks are a subset, the large block library is the paid product", "the default look is widely recognised, so retinting is not optional", "interactive components need the Flowbite JavaScript, which is another script on the page" ], "tags": [ "tailwind", "html", "blocks", "no-framework" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "shadcn-ui", "category": "ui-components", "name": "shadcn/ui", "tagline": "Components you copy into your repository and then own outright", "summary": "shadcn/ui is a set of accessible React components distributed as source rather than as a package. The CLI writes the component into your project, where it becomes ordinary code you can edit. It also defines the registry format that most of the newer libraries in this directory publish through.", "url": "https://aiarabicdev.com/ui-components/shadcn-ui", "markdownUrl": "https://aiarabicdev.com/ui-components/shadcn-ui.md", "links": { "homepage": "https://ui.shadcn.com", "repo": "https://github.com/shadcn-ui/ui", "docs": "https://ui.shadcn.com/docs" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Initialise", "command": "pnpm dlx shadcn@latest init" }, { "label": "Add a component", "command": "pnpm dlx shadcn@latest add button dialog" } ], "bestFor": [ "you want full control of the markup and the classes", "the project already runs Tailwind", "you are building your own design system and need a credible starting point" ], "watchOut": [ "there are no upgrades, so upstream fixes only reach you if you go and get them", "it assumes Tailwind, and retrofitting it into a CSS-in-JS codebase is not worth the effort", "the defaults are widely recognised, so a project that ships them untouched looks like every other one" ], "tags": [ "react", "tailwind", "registry", "accessible", "copy-paste" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "21st-dev", "category": "ui-components", "name": "21st.dev", "tagline": "A searchable marketplace of community components with a prompt for each one", "summary": "21st.dev is a directory of React and Tailwind components published by the community. Each component has a live preview, its source, and a copyable prompt written to hand to a coding agent. It is the fastest way to answer the question of what a section could look like before you build it.", "url": "https://aiarabicdev.com/ui-components/21st-dev", "markdownUrl": "https://aiarabicdev.com/ui-components/21st-dev.md", "links": { "homepage": "https://21st.dev" }, "facts": { "license": "Varies by component, most are MIT", "language": "TypeScript", "pricing": "free-tier", "selfHostable": false }, "install": [], "bestFor": [ "you need to see twenty versions of a section before deciding", "you work with a coding agent and want a precise description to hand it", "you are looking for one specific block rather than adopting a library" ], "watchOut": [ "quality varies a lot between authors, so read the source before trusting it", "accessibility is inconsistent, and keyboard behaviour is the usual casualty", "licensing is per component rather than per site, so check before shipping commercially" ], "tags": [ "react", "tailwind", "directory", "prompts", "agents" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "radix-primitives", "category": "ui-components", "name": "Radix Primitives", "tagline": "Unstyled, accessible behaviour for the components that are hard to get right", "summary": "Radix Primitives implements the interaction and accessibility layer for dialogs, menus, popovers, tooltips, selects and the rest of the genuinely difficult components, with no styling at all. It is the layer most polished React libraries, including shadcn/ui, are built on.", "url": "https://aiarabicdev.com/ui-components/radix-primitives", "markdownUrl": "https://aiarabicdev.com/ui-components/radix-primitives.md", "links": { "homepage": "https://www.radix-ui.com/primitives", "repo": "https://github.com/radix-ui/primitives" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Install", "command": "pnpm add radix-ui" } ], "bestFor": [ "you have your own visual language and need the behaviour underneath it", "accessibility is a requirement rather than an aspiration", "you are building a component library other teams will use" ], "watchOut": [ "the composition API is verbose, and that never stops being true", "nothing is styled, so evaluating it means doing the styling work first", "React only, with no story for other frameworks" ], "tags": [ "react", "accessibility", "primitives", "unstyled", "headless" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "base-ui", "category": "ui-components", "name": "Base UI", "tagline": "Headless primitives from the people behind MUI and Radix", "summary": "Base UI is an unstyled React component library built by contributors from MUI, Radix and Floating UI. It covers the same ground as Radix Primitives with a newer API, a smaller surface and a shared team behind the anchoring and positioning logic.", "url": "https://aiarabicdev.com/ui-components/base-ui", "markdownUrl": "https://aiarabicdev.com/ui-components/base-ui.md", "links": { "homepage": "https://base-ui.com", "repo": "https://github.com/mui/base-ui" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Install", "command": "pnpm add @base-ui-components/react" } ], "bestFor": [ "a new project that wants headless components with a modern API", "you already use Floating UI and want the same positioning model", "you find the Radix composition style too verbose" ], "watchOut": [ "younger than the alternatives, so expect fewer components and fewer answered questions", "the API has moved between releases, so pin versions and read changelogs", "mixing it with Radix in one app causes portal and focus conflicts" ], "tags": [ "react", "headless", "accessibility", "primitives" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "react-aria", "category": "ui-components", "name": "React Aria", "tagline": "Adobe's accessibility and interaction layer, hooks first", "summary": "React Aria is Adobe's library of hooks and components implementing the behaviour and accessibility of a wide component set, including internationalisation, right to left layouts, date and number formatting, and touch and pointer handling that most libraries treat as an afterthought.", "url": "https://aiarabicdev.com/ui-components/react-aria", "markdownUrl": "https://aiarabicdev.com/ui-components/react-aria.md", "links": { "homepage": "https://react-spectrum.adobe.com/react-aria", "repo": "https://github.com/adobe/react-spectrum" }, "facts": { "license": "Apache-2.0", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Install", "command": "pnpm add react-aria-components" } ], "bestFor": [ "the interface must work in right to left languages and multiple locales", "accessibility is audited rather than assumed", "you want hooks, not markup, so you control every element" ], "watchOut": [ "the learning curve is the steepest on this shelf", "the abstraction is heavy for a simple project", "bundle size needs attention if you pull in large parts of the collection" ], "tags": [ "react", "accessibility", "i18n", "rtl", "hooks" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "ark-ui", "category": "ui-components", "name": "Ark UI", "tagline": "The same headless components across React, Vue, Svelte and Solid", "summary": "Ark UI implements its component logic as framework agnostic state machines and then ships thin bindings for React, Vue, Svelte and Solid. If you maintain interfaces in more than one framework, it is the only way to get identical behaviour in all of them.", "url": "https://aiarabicdev.com/ui-components/ark-ui", "markdownUrl": "https://aiarabicdev.com/ui-components/ark-ui.md", "links": { "homepage": "https://ark-ui.com", "repo": "https://github.com/chakra-ui/ark" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Install for React", "command": "pnpm add @ark-ui/react" } ], "bestFor": [ "you ship the same design system to more than one framework", "you want component state to be explicit and inspectable", "you are building a component library rather than an application" ], "watchOut": [ "the state machine model is an extra concept to learn", "a React only team gains little over a React only library", "smaller community than the incumbents, so fewer existing answers" ], "tags": [ "react", "vue", "svelte", "solid", "headless", "state-machines" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "hero-ui", "category": "ui-components", "name": "HeroUI", "tagline": "Styled, finished components for when you do not want to design them", "summary": "HeroUI, previously NextUI, is a styled React component library built on Tailwind and React Aria. Unlike the headless options on this shelf it arrives already designed, with a coherent look, a theming layer and dark mode handled.", "url": "https://aiarabicdev.com/ui-components/hero-ui", "markdownUrl": "https://aiarabicdev.com/ui-components/hero-ui.md", "links": { "homepage": "https://www.heroui.com", "repo": "https://github.com/heroui-inc/heroui" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Install", "command": "pnpm add @heroui/react" } ], "bestFor": [ "an internal tool or dashboard where the interface is not the differentiator", "a small team with no designer", "you want a real theming layer rather than utility class overrides" ], "watchOut": [ "a styled library is a ceiling on how distinctive the interface can get", "it is a package dependency, so upgrades can move your visuals", "the rename from NextUI means older tutorials reference the old package names" ], "tags": [ "react", "tailwind", "styled", "react-aria", "theming" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "openclaw", "category": "ai-agents", "name": "OpenClaw", "tagline": "A personal agent that lives on your machine and answers in your chat apps", "summary": "OpenClaw runs a local gateway between a model and the things on your own computer: files, the browser, and messaging apps like WhatsApp, Telegram, Slack and iMessage. You talk to it where you already talk to people, and it does the work on your machine rather than in someone's cloud.", "url": "https://aiarabicdev.com/ai-agents/openclaw", "markdownUrl": "https://aiarabicdev.com/ai-agents/openclaw.md", "links": { "homepage": "https://openclaw.ai", "repo": "https://github.com/openclaw/openclaw" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "you want an assistant that can touch your actual files and apps", "you would rather message an agent than open another web interface", "you are comfortable administering something that runs continuously" ], "watchOut": [ "an always on agent with file, browser and messaging access is a serious security surface, and anything it reads is untrusted input", "model usage is billed to you, and continuous proactive automation costs far more than chat use", "the licence is MIT with third party notices recorded separately, so read those if you are redistributing" ], "tags": [ "agents", "assistant", "self-hosted", "automation", "messaging" ], "addedAt": "2026-08-24", "updatedAt": "2026-08-24" }, { "slug": "hermes", "category": "ai-agents", "name": "Hermes Agent", "tagline": "Drives a chat subscription you already pay for instead of a metered API", "summary": "Hermes Agent is an open source agent from Nous Research that can sign in with a consumer subscription, ChatGPT, Claude Max or SuperGrok among them, and use its included quota rather than a per token API bill. It also exposes that session as a local OpenAI compatible endpoint other tools can point at.", "url": "https://aiarabicdev.com/ai-agents/hermes", "markdownUrl": "https://aiarabicdev.com/ai-agents/hermes.md", "links": { "homepage": "https://hermes-agent.nousresearch.com", "repo": "https://github.com/NousResearch/hermes-agent" }, "facts": { "license": "MIT", "language": "Python", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "an unpredictable API bill is the thing actually stopping you", "you already pay for a chat subscription and want more out of it", "you want one local endpoint your other tools can share" ], "watchOut": [ "subscription rate limits make throughput lower and less predictable than an API", "driving a consumer subscription from outside the vendor's own client may run against its terms, which differ per provider, so check yours", "not suited to long unattended runs or anything a business depends on" ], "tags": [ "agents", "subscription", "self-hosted", "proxy" ], "addedAt": "2026-08-24", "updatedAt": "2026-08-24" }, { "slug": "opencode", "category": "ai-agents", "name": "OpenCode", "tagline": "A terminal coding agent that is not tied to one model vendor", "summary": "OpenCode is an open source coding agent built for the terminal, with a client and server split so the agent can run on your machine while you drive it from elsewhere. It works against Anthropic, OpenAI, Google or a local model, which is the main thing separating it from the vendor tools it resembles.", "url": "https://aiarabicdev.com/ai-agents/opencode", "markdownUrl": "https://aiarabicdev.com/ai-agents/opencode.md", "links": { "homepage": "https://opencode.ai", "repo": "https://github.com/anomalyco/opencode" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Install", "command": "curl -fsSL https://opencode.ai/install | bash" }, { "label": "Or with npm", "command": "npm install -g opencode-ai" } ], "bestFor": [ "you want to change models without changing agent", "you work in a terminal and want the agent to live there too", "you want to start a task on one machine and check it from another" ], "watchOut": [ "model usage is billed by whichever provider you point it at, so the agent being free is only half the cost", "the repository has moved organisation more than once, so older install instructions and links go stale", "results vary a lot by model, so judge the harness and the model separately when it disappoints" ], "tags": [ "agents", "coding", "terminal", "multi-provider" ], "addedAt": "2026-08-24", "updatedAt": "2026-08-24" }, { "slug": "pi-agent", "category": "ai-agents", "name": "Pi", "tagline": "A coding agent and the parts to build your own, in one repository", "summary": "Pi is an agent toolkit from Mario Zechner: a coding agent CLI you can use directly, plus the pieces underneath it as separate packages. A unified multi provider model API, an agent loop with tool calling and state, and terminal and web interface libraries. It is the closest thing to a build your own agent starter kit.", "url": "https://aiarabicdev.com/ai-agents/pi-agent", "markdownUrl": "https://aiarabicdev.com/ai-agents/pi-agent.md", "links": { "repo": "https://github.com/earendil-works/pi" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "you want to build your own agent and would rather not write the loop", "you want an agent whose tool surface is small enough to audit", "you need a provider agnostic model API as a separate piece" ], "watchOut": [ "a monorepo of packages rather than one finished product, which takes a moment to navigate", "much smaller community than the vendor agents, so unusual problems mean reading source", "the project has moved organisation, so older links point at the previous location" ], "tags": [ "agents", "coding", "toolkit", "terminal", "typescript" ], "addedAt": "2026-08-24", "updatedAt": "2026-08-24" }, { "slug": "open-generative-ai", "category": "ai-workspaces", "name": "Open Generative AI", "tagline": "One self hosted studio for image, video and lip sync models", "summary": "Open Generative AI is a self hosted studio that puts a large catalogue of image and video models behind one interface: text to image, image to video, and audio driven lip sync. It replaces the habit of keeping six generation tabs open, and it is MIT licensed.", "url": "https://aiarabicdev.com/ai-workspaces/open-generative-ai", "markdownUrl": "https://aiarabicdev.com/ai-workspaces/open-generative-ai.md", "links": { "homepage": "https://muapi.ai/open-generative-ai", "repo": "https://github.com/Anil-matcha/Open-Generative-AI" }, "facts": { "license": "MIT", "language": "JavaScript", "pricing": "free-tier", "selfHostable": true }, "install": [], "bestFor": [ "you compare the same prompt across several models regularly", "you want prompts and outputs kept in one place you control", "you would rather run an interface than pay for another subscription" ], "watchOut": [ "generation is routed through a commercial model API you pay per use, so the free part is the interface", "that routing is a third party dependency, which undercuts the usual reason for self hosting", "model coverage moves quickly, so check the current list rather than trusting a screenshot or a README count" ], "tags": [ "images", "video", "self-hosted", "workspace", "generative" ], "addedAt": "2026-08-24", "updatedAt": "2026-08-24" }, { "slug": "open-webui", "category": "ai-workspaces", "name": "Open WebUI", "tagline": "The most complete self hosted chat front end, with a licence to read", "summary": "Open WebUI is a self hosted chat interface that works against local models through Ollama and against any OpenAI compatible API. It covers the things a paid chat subscription gives you: conversation history, documents, multiple users, model switching and a plugin layer.", "url": "https://aiarabicdev.com/ai-workspaces/open-webui", "markdownUrl": "https://aiarabicdev.com/ai-workspaces/open-webui.md", "links": { "homepage": "https://openwebui.com", "repo": "https://github.com/open-webui/open-webui" }, "facts": { "license": "Modified BSD-3, with branding conditions", "language": "Python", "pricing": "free-tier", "selfHostable": true }, "install": [ { "label": "Run with Docker", "command": "docker run -d -p 3000:8080 -v open-webui:/app/backend/data ghcr.io/open-webui/open-webui:main" } ], "bestFor": [ "you want one internal chat interface over several model providers", "you need conversation history and documents kept on your own infrastructure", "you are running local models and want a real interface for them" ], "watchOut": [ "the licence restricts removing the project's branding, so white labelling it needs a licence or an exemption", "it is a substantial application to host, not a single binary, and the feature surface grows quickly", "retrieval over your documents needs tuning before it is genuinely useful" ], "tags": [ "chat", "self-hosted", "ollama", "rag", "workspace" ], "addedAt": "2026-08-24", "updatedAt": "2026-08-24" }, { "slug": "librechat", "category": "ai-workspaces", "name": "LibreChat", "tagline": "A genuinely MIT chat front end that speaks to every provider", "summary": "LibreChat is a self hosted chat interface supporting many providers at once, with conversation branching, agents, code execution, file handling and multi user authentication. It is the option to reach for when a clean MIT licence matters as much as the feature list.", "url": "https://aiarabicdev.com/ai-workspaces/librechat", "markdownUrl": "https://aiarabicdev.com/ai-workspaces/librechat.md", "links": { "homepage": "https://librechat.ai", "repo": "https://github.com/danny-avila/LibreChat" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Clone and run", "command": "git clone https://github.com/danny-avila/LibreChat && docker compose up -d" } ], "bestFor": [ "you need a permissive licence because you will brand or resell it", "you switch between providers and want it in one interface", "you need real multi user authentication rather than a single seat" ], "watchOut": [ "it is a stack with a database and services, so budget for actual maintenance", "configuration is broad and file based, which is slow to learn", "you still pay every provider you connect, so the hosting saving is not the whole picture" ], "tags": [ "chat", "self-hosted", "multi-provider", "workspace", "mit" ], "addedAt": "2026-08-24", "updatedAt": "2026-08-24" }, { "slug": "comfyui", "category": "ai-workspaces", "name": "ComfyUI", "tagline": "Node graphs for image and video generation, with nothing hidden", "summary": "ComfyUI is a node based interface for diffusion models where every step of the pipeline is a node you wire up yourself. It is the tool serious image and video work converges on, because it exposes the whole process rather than a prompt box.", "url": "https://aiarabicdev.com/ai-workspaces/comfyui", "markdownUrl": "https://aiarabicdev.com/ai-workspaces/comfyui.md", "links": { "homepage": "https://www.comfy.org", "repo": "https://github.com/Comfy-Org/ComfyUI" }, "facts": { "license": "GPL-3.0", "language": "Python", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "generation is your actual work and reproducibility matters", "you want the whole pipeline visible rather than a prompt box", "you have the GPU to run models locally" ], "watchOut": [ "the learning curve is steep, and starting from a blank graph is the wrong way in", "it needs real local hardware, so a laptop without a capable GPU will disappoint", "GPL-3.0 is copyleft, which constrains how you can build a product on top of it" ], "tags": [ "images", "video", "diffusion", "self-hosted", "node-graph" ], "addedAt": "2026-08-24", "updatedAt": "2026-08-24" }, { "slug": "anything-llm", "category": "ai-workspaces", "name": "AnythingLLM", "tagline": "Point it at your documents and get a private assistant over them", "summary": "AnythingLLM is a self hosted application built around retrieval over your own material: drop in documents, and it handles the chunking, the embeddings and the vector store, then answers over them. It runs as a desktop app or a server with workspaces and users.", "url": "https://aiarabicdev.com/ai-workspaces/anything-llm", "markdownUrl": "https://aiarabicdev.com/ai-workspaces/anything-llm.md", "links": { "homepage": "https://anythingllm.com", "repo": "https://github.com/Mintplex-Labs/anything-llm" }, "facts": { "license": "MIT", "language": "JavaScript", "pricing": "free-tier", "selfHostable": true }, "install": [], "bestFor": [ "you want to know whether retrieval helps before building one", "the documents must stay on infrastructure you control", "you need separate contexts for separate bodies of material" ], "watchOut": [ "the retrieval internals are less exposed than a pipeline you built, which limits how far you can tune it", "a hosted cloud offering is sold alongside the open source project", "answer quality depends on the embedding and chat models you configure, so judge those separately" ], "tags": [ "rag", "documents", "self-hosted", "workspace", "chat" ], "addedAt": "2026-08-24", "updatedAt": "2026-08-24" }, { "slug": "lobe-chat", "category": "ai-workspaces", "name": "Lobe Chat", "tagline": "The best looking self hosted chat interface, and it knows it", "summary": "Lobe Chat is a self hosted chat front end with an unusually polished interface, a plugin system, an assistant marketplace and support for many providers. Where the other options on this shelf lead on features or licence, this one leads on design.", "url": "https://aiarabicdev.com/ai-workspaces/lobe-chat", "markdownUrl": "https://aiarabicdev.com/ai-workspaces/lobe-chat.md", "links": { "homepage": "https://lobehub.com", "repo": "https://github.com/lobehub/lobehub" }, "facts": { "license": "Apache-2.0, with additional conditions", "language": "TypeScript", "pricing": "free-tier", "selfHostable": true }, "install": [], "bestFor": [ "the interface will be seen by people comparing it to a paid product", "you want per task assistants set up once and reused", "personal or internal use where the licence conditions do not bite" ], "watchOut": [ "additional licence conditions around commercial use and branding, so read the file before a client deployment", "a hosted paid version is sold alongside the open source project", "the feature surface is large, and more of it than you need is switched on by default" ], "tags": [ "chat", "self-hosted", "design", "plugins", "workspace" ], "addedAt": "2026-08-24", "updatedAt": "2026-08-24" }, { "slug": "chrome-devtools-mcp", "category": "mcp-servers", "name": "Chrome DevTools MCP", "tagline": "Let the agent open the page and read what actually rendered", "summary": "Chrome DevTools MCP gives an agent a real Chrome instance: navigate, screenshot, click, evaluate scripts, read the console and inspect network requests. It closes the loop between writing frontend code and knowing whether it worked.", "url": "https://aiarabicdev.com/mcp-servers/chrome-devtools-mcp", "markdownUrl": "https://aiarabicdev.com/mcp-servers/chrome-devtools-mcp.md", "links": { "repo": "https://github.com/ChromeDevTools/chrome-devtools-mcp" }, "facts": { "license": "Apache-2.0", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Add to Claude Code", "command": "claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest" } ], "bestFor": [ "the agent writes frontend code and needs to see the result", "debugging a hydration or console error you cannot reproduce by reading", "measuring performance rather than guessing at it" ], "watchOut": [ "screenshots consume a lot of context, so ask for them at decision points only", "it drives a real browser that can log in and submit forms, so scope what it may reach", "a visible Chrome window competes with your own browsing session" ], "tags": [ "mcp", "browser", "chrome", "debugging", "frontend" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "playwright-mcp", "category": "mcp-servers", "name": "Playwright MCP", "tagline": "Browser automation through the accessibility tree instead of pixels", "summary": "Playwright MCP exposes browser automation to an agent using Playwright's accessibility snapshot rather than screenshots. The agent reads a structured description of the page, which is dramatically cheaper in context than an image and often more precise to act on.", "url": "https://aiarabicdev.com/mcp-servers/playwright-mcp", "markdownUrl": "https://aiarabicdev.com/mcp-servers/playwright-mcp.md", "links": { "repo": "https://github.com/microsoft/playwright-mcp" }, "facts": { "license": "Apache-2.0", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Add to Claude Code", "command": "claude mcp add playwright -- npx -y @playwright/mcp@latest" } ], "bestFor": [ "the agent needs to walk a multi step flow and assert the outcome", "you want browser automation that does not burn context on screenshots", "generating end to end tests from a described journey" ], "watchOut": [ "the accessibility tree is useless on a canvas heavy or badly labelled page", "browser binaries need installing, which is a slow first run", "it can act on any site it can reach, so scope its access deliberately" ], "tags": [ "mcp", "browser", "playwright", "testing", "automation" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "context7-mcp", "category": "mcp-servers", "name": "Context7", "tagline": "Current library documentation, fetched instead of remembered", "summary": "Context7 serves up to date documentation and code examples for a large set of libraries through MCP. It exists to solve one specific failure: a model confidently writing an API that was correct two versions ago.", "url": "https://aiarabicdev.com/mcp-servers/context7-mcp", "markdownUrl": "https://aiarabicdev.com/mcp-servers/context7-mcp.md", "links": { "homepage": "https://context7.com", "repo": "https://github.com/upstash/context7" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free-tier", "selfHostable": true }, "install": [ { "label": "Add to Claude Code", "command": "claude mcp add context7 -- npx -y @upstash/context7-mcp" } ], "bestFor": [ "working with a library that has changed since the model's cutoff", "you keep getting APIs that were correct one major version ago", "you want documentation in context without pasting it yourself" ], "watchOut": [ "coverage varies by library, and obscure packages are often missing", "broad questions pull in far more documentation than the task needs", "the hosted service has usage limits, and self hosting is the way around them" ], "tags": [ "mcp", "documentation", "context", "versions" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "github-mcp-server", "category": "mcp-servers", "name": "GitHub MCP Server", "tagline": "Issues, pull requests and code search without leaving the agent", "summary": "GitHub's official MCP server gives an agent typed access to repositories, issues, pull requests, actions and code search. It replaces a pile of gh CLI calls with a defined tool surface and a scoped token.", "url": "https://aiarabicdev.com/mcp-servers/github-mcp-server", "markdownUrl": "https://aiarabicdev.com/mcp-servers/github-mcp-server.md", "links": { "repo": "https://github.com/github/github-mcp-server" }, "facts": { "license": "MIT", "language": "Go", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Add to Claude Code", "command": "claude mcp add --transport http github https://api.githubcopilot.com/mcp/" } ], "bestFor": [ "triaging issues or reviewing pull requests with an agent", "searching code across many repositories at once", "giving an agent scoped repository access instead of your shell" ], "watchOut": [ "write access means the agent can post where colleagues will see it, so start read only", "listings on large repositories return a lot of data, so ask narrowly", "the token you issue is the real security boundary, so scope it rather than trusting prompts" ], "tags": [ "mcp", "github", "code-search", "pull-requests" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "supabase-mcp", "category": "mcp-servers", "name": "Supabase MCP", "tagline": "Let the agent read your schema instead of imagining it", "summary": "Supabase's MCP server exposes project management, schema inspection, SQL execution and log access. The single biggest win is that an agent writing queries can read the actual tables, columns and policies rather than inferring them from your code.", "url": "https://aiarabicdev.com/mcp-servers/supabase-mcp", "markdownUrl": "https://aiarabicdev.com/mcp-servers/supabase-mcp.md", "links": { "homepage": "https://supabase.com/docs/guides/getting-started/mcp", "repo": "https://github.com/supabase-community/supabase-mcp" }, "facts": { "license": "Apache-2.0", "language": "TypeScript", "pricing": "free-tier", "selfHostable": true }, "install": [ { "label": "Add read only", "command": "claude mcp add supabase -- npx -y @supabase/mcp-server-supabase@latest --read-only" } ], "bestFor": [ "the agent writes queries against a schema it should not have to guess", "debugging a row level security policy from the actual error", "keeping types and tables in step without pasting the schema in" ], "watchOut": [ "run it read only unless you have a specific reason not to", "a project access token is a real credential, so scope it to one project", "apply migrations yourself rather than letting an agent run them unattended" ], "tags": [ "mcp", "database", "postgres", "supabase", "schema" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "reference-mcp-servers", "category": "mcp-servers", "name": "Reference MCP Servers", "tagline": "The canonical implementations to read before writing your own", "summary": "The Model Context Protocol organisation maintains a set of reference servers covering filesystem, fetch, git, memory and sequential thinking. They are useful as tools and more useful as the clearest available specification of how a server should behave.", "url": "https://aiarabicdev.com/mcp-servers/reference-mcp-servers", "markdownUrl": "https://aiarabicdev.com/mcp-servers/reference-mcp-servers.md", "links": { "repo": "https://github.com/modelcontextprotocol/servers" }, "facts": { "license": "MIT", "language": "TypeScript and Python", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Filesystem, scoped to one directory", "command": "claude mcp add fs -- npx -y @modelcontextprotocol/server-filesystem /path/to/project" } ], "bestFor": [ "you are writing your own MCP server and want a correct model to copy", "you want a small server you can actually audit before trusting it", "you need filesystem access scoped to specific directories" ], "watchOut": [ "some entries are reference material rather than maintained products, so check before depending on one", "a filesystem server is only as safe as the directories you scope it to", "the fetch server can reach any URL, which is worth thinking about before enabling it" ], "tags": [ "mcp", "reference", "filesystem", "git", "fetch" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "anthropic-skills", "category": "skills", "name": "Anthropic Skills", "tagline": "The reference implementation of what a skill should look like", "summary": "Anthropic publishes a set of agent skills covering document formats, spreadsheets, presentations and internal workflows. Beyond being useful, the repository is the clearest available answer to what belongs in a skill and what does not.", "url": "https://aiarabicdev.com/skills/anthropic-skills", "markdownUrl": "https://aiarabicdev.com/skills/anthropic-skills.md", "links": { "repo": "https://github.com/anthropics/skills" }, "facts": { "license": "No licence file in the repository", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "you are writing your first skill and want a correct model", "you need documents and spreadsheets produced properly", "you want to see how progressive disclosure is meant to work" ], "watchOut": [ "general purpose skills are always beaten by ones tuned to your conventions", "a skill is only loaded if its description matches the task, so a vague description makes it invisible", "there is no licence file in the repository, so check with the publisher before redistributing anything from it", "the format is young and still moving" ], "tags": [ "skills", "claude", "documents", "reference" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "superpowers", "category": "skills", "name": "Superpowers", "tagline": "A process framework that makes an agent plan before it builds", "summary": "Superpowers is a large plugin of skills that impose a development process on an agent: brainstorm the design, get it approved, write a spec, plan the implementation, then build. It exists to stop the failure where an agent writes two thousand lines of the wrong thing very quickly.", "url": "https://aiarabicdev.com/skills/superpowers", "markdownUrl": "https://aiarabicdev.com/skills/superpowers.md", "links": { "repo": "https://github.com/obra/superpowers" }, "facts": { "license": "MIT", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "an agent keeps building the wrong thing very efficiently", "the work is large enough that a wrong direction is expensive", "you want design decisions written down rather than implied by code" ], "watchOut": [ "the process is real overhead on small tasks", "it is opinionated, and disagreeing with the opinion means editing the skills", "a large skill set consumes context before your task starts" ], "tags": [ "skills", "process", "planning", "claude-code" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "agents-md", "category": "skills", "name": "AGENTS.md", "tagline": "One instruction file that every coding agent agrees to read", "summary": "AGENTS.md is a convention rather than a tool: a single markdown file at the root of a repository holding the instructions a coding agent needs. A growing number of agents read it, which means one file instead of one per vendor.", "url": "https://aiarabicdev.com/skills/agents-md", "markdownUrl": "https://aiarabicdev.com/skills/agents-md.md", "links": { "homepage": "https://agents.md" }, "facts": { "license": "Open convention, no license required", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "more than one coding agent touches the repository", "there are conventions an agent cannot infer from the code", "you are tired of maintaining several instruction files" ], "watchOut": [ "adoption is a convention, not a guarantee, so check what your tool reads", "a long file eats the context your task needs", "instructions that contradict the code get followed, which is worse than no instructions" ], "tags": [ "skills", "conventions", "instructions", "agents" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "awesome-claude-code", "category": "skills", "name": "Awesome Claude Code", "tagline": "A community index of commands, hooks and configurations", "summary": "A curated list of Claude Code slash commands, hooks, CLAUDE.md examples and workflow configurations contributed by the community. The value is seeing how other people actually set the tool up, which is not something documentation can show you.", "url": "https://aiarabicdev.com/skills/awesome-claude-code", "markdownUrl": "https://aiarabicdev.com/skills/awesome-claude-code.md", "links": { "repo": "https://github.com/hesreallyhim/awesome-claude-code" }, "facts": { "license": "CC0-1.0", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "you want to see how other people configure the tool", "you are looking for hook ideas rather than documentation", "you want examples of instruction files that experienced users actually ship" ], "watchOut": [ "entries are contributed rather than reviewed, so quality varies", "hooks run commands on your machine, so read before installing", "links to abandoned projects accumulate on every list like this" ], "tags": [ "skills", "claude-code", "hooks", "commands", "awesome-list" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "awesome-cursorrules", "category": "skills", "name": "Awesome CursorRules", "tagline": "Hundreds of stack specific instruction files to read and adapt", "summary": "A large collection of rules files for Cursor, organised by stack: Next.js, React Native, Django, Go and many more. Although written for one editor, the files are plain instructions and port to any agent that reads a project instruction file.", "url": "https://aiarabicdev.com/skills/awesome-cursorrules", "markdownUrl": "https://aiarabicdev.com/skills/awesome-cursorrules.md", "links": { "repo": "https://github.com/PatrickJS/awesome-cursorrules" }, "facts": { "license": "CC0-1.0", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "you want a starting point for your stack rather than a blank file", "you want to see which conventions everyone agrees on", "you are moving from one agent tool to another and want to port your rules" ], "watchOut": [ "most files are far longer than they need to be, so cut hard", "written for one editor, so some directives will not apply to your tool", "stack specific advice ages, and framework versions move underneath it" ], "tags": [ "skills", "cursor", "rules", "conventions", "awesome-list" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "llms-txt", "category": "skills", "name": "llms.txt", "tagline": "A file that tells an agent what your site is and where to read it", "summary": "llms.txt is a proposed convention: a markdown file at the root of a site summarising what it offers and linking to clean text versions of its pages. It is robots.txt for comprehension rather than for crawling, and it is cheap enough to be worth doing regardless of adoption.", "url": "https://aiarabicdev.com/skills/llms-txt", "markdownUrl": "https://aiarabicdev.com/skills/llms-txt.md", "links": { "homepage": "https://llmstxt.org" }, "facts": { "license": "Open proposal, no license required", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "your site is documentation or reference material agents should read", "you want answer engines to describe your product accurately", "you can generate the file from content you already maintain" ], "watchOut": [ "adoption by crawlers is not guaranteed, so treat it as cheap upside", "a hand maintained file goes stale, so generate it", "it is not a ranking mechanism and will not behave like one" ], "tags": [ "skills", "seo", "agents", "conventions", "documentation" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "create-t3-app", "category": "boilerplates", "name": "create-t3-app", "tagline": "A typesafe Next.js starter that adds nothing you did not ask for", "summary": "create-t3-app scaffolds a Next.js project with TypeScript, Tailwind, tRPC, Prisma or Drizzle and NextAuth, choosing each piece through prompts. Its stated principle is to include only what it can justify, which makes it the least opinionated starter on this shelf.", "url": "https://aiarabicdev.com/boilerplates/create-t3-app", "markdownUrl": "https://aiarabicdev.com/boilerplates/create-t3-app.md", "links": { "homepage": "https://create.t3.gg", "repo": "https://github.com/t3-oss/create-t3-app" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Scaffold", "command": "pnpm create t3-app@latest" } ], "bestFor": [ "you want typesafety from the database to the component", "you would rather add features than remove them", "the team already knows Next.js and wants the wiring done" ], "watchOut": [ "no billing, email or admin, so a real product needs more work after scaffolding", "tRPC is a commitment that shapes how your whole API is written", "the stack assumes a comfort level with TypeScript that a beginner will feel" ], "tags": [ "nextjs", "typescript", "trpc", "prisma", "starter" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "nextjs-saas-starter", "category": "boilerplates", "name": "Next.js SaaS Starter", "tagline": "Auth, teams and Stripe subscriptions, maintained by Vercel", "summary": "A reference SaaS starter using the Next.js App Router, Postgres with Drizzle, cookie based auth and Stripe Checkout with a customer portal. It covers the parts of a subscription product that are tedious rather than interesting: teams, roles, invitations and an activity log.", "url": "https://aiarabicdev.com/boilerplates/nextjs-saas-starter", "markdownUrl": "https://aiarabicdev.com/boilerplates/nextjs-saas-starter.md", "links": { "repo": "https://github.com/nextjs/saas-starter" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Clone", "command": "git clone https://github.com/nextjs/saas-starter" } ], "bestFor": [ "the product bills teams rather than individuals", "you want current Next.js patterns written correctly", "Stripe is a fit for the markets you sell into" ], "watchOut": [ "Stripe only, which is a real constraint in markets it does not serve well", "the marketing pages are placeholders, so the front of the site is still yours to build", "it is a reference implementation, so operational concerns like email deliverability are left to you" ], "tags": [ "nextjs", "stripe", "postgres", "drizzle", "saas" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "open-saas", "category": "boilerplates", "name": "Open SaaS", "tagline": "A complete, genuinely free SaaS template with an admin dashboard", "summary": "Open SaaS is a full featured SaaS template built on Wasp, covering auth, Stripe or Lemon Squeezy payments, an admin dashboard, a blog, email and analytics. It is the most complete free option here, and the trade is that it is built on a framework rather than on plain React.", "url": "https://aiarabicdev.com/boilerplates/open-saas", "markdownUrl": "https://aiarabicdev.com/boilerplates/open-saas.md", "links": { "homepage": "https://opensaas.sh", "repo": "https://github.com/wasp-lang/open-saas" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Scaffold", "command": "wasp new -t saas" } ], "bestFor": [ "you want an admin dashboard and analytics without building them", "you need a merchant of record option for sales tax", "you are comfortable working inside a framework" ], "watchOut": [ "Wasp is another framework to learn, with its own configuration language", "the abstraction is helpful until you need something it did not anticipate", "a smaller ecosystem than plain Next.js, so fewer existing answers" ], "tags": [ "wasp", "react", "stripe", "admin", "saas" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "supabase-nextjs-starter", "category": "boilerplates", "name": "Supabase Next.js Starter", "tagline": "The minimum correct setup for Supabase auth in the App Router", "summary": "Supabase's official Next.js starter is small on purpose. It gets cookie based server side auth right across middleware, server components and route handlers, which is the part everyone implements incorrectly the first time, and stops there.", "url": "https://aiarabicdev.com/boilerplates/supabase-nextjs-starter", "markdownUrl": "https://aiarabicdev.com/boilerplates/supabase-nextjs-starter.md", "links": { "homepage": "https://supabase.com/docs/guides/getting-started/quickstarts/nextjs", "repo": "https://github.com/supabase/supabase/tree/master/examples/auth/nextjs" }, "facts": { "license": "Apache-2.0", "language": "TypeScript", "pricing": "free-tier", "selfHostable": true }, "install": [ { "label": "Scaffold", "command": "pnpm create next-app -e with-supabase" } ], "bestFor": [ "you have already chosen Supabase and want the auth wiring correct", "you want a foundation rather than a finished product", "you intend to make your own decisions above the database" ], "watchOut": [ "no billing, teams or admin, this is auth and nothing more", "row level security is your responsibility and is where the real risk lives", "the hosted service has a free tier that pauses inactive projects" ], "tags": [ "nextjs", "supabase", "auth", "postgres", "starter" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "shipfast-alternatives-refine", "category": "boilerplates", "name": "Refine", "tagline": "Generate the admin panel instead of designing it", "summary": "Refine is a React framework for data heavy interfaces: admin panels, dashboards and internal tools. It handles routing, data fetching, forms, tables, filtering and auth against a wide set of backends, and lets you pick the component library it renders with.", "url": "https://aiarabicdev.com/boilerplates/shipfast-alternatives-refine", "markdownUrl": "https://aiarabicdev.com/boilerplates/shipfast-alternatives-refine.md", "links": { "homepage": "https://refine.dev", "repo": "https://github.com/refinedev/refine" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free-tier", "selfHostable": true }, "install": [ { "label": "Scaffold", "command": "pnpm create refine-app@latest" } ], "bestFor": [ "you need an admin panel and do not want to design one", "the data is resource shaped, with lists and detail views", "you want to keep your choice of component library" ], "watchOut": [ "genuinely custom interfaces fight the abstraction", "a large framework surface to learn for a small tool", "an enterprise edition is sold alongside the open source core" ], "tags": [ "react", "admin", "crud", "internal-tools", "headless" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "yalla-kit", "category": "boilerplates", "name": "Yalla Kit", "tagline": "An Arabic first Next.js starter with right to left handled throughout", "summary": "Yalla Kit is a Next.js and Supabase starter built around bilingual Arabic and English from the first commit: locale routing, right to left layout, translated message files and a lint rule that rejects direction breaking CSS classes. It is a paid product, and it is made by the person who maintains this directory.", "url": "https://aiarabicdev.com/boilerplates/yalla-kit", "markdownUrl": "https://aiarabicdev.com/boilerplates/yalla-kit.md", "links": { "homepage": "https://withfouad.com", "repo": "https://github.com/fixyboy/yalla-kit" }, "facts": { "license": "Proprietary", "language": "TypeScript", "pricing": "paid", "selfHostable": true }, "install": [], "bestFor": [ "the product ships in Arabic and English from the start", "you have been bitten by retrofitting right to left support before", "you want the direction rules enforced by tooling rather than by review" ], "watchOut": [ "it is a paid product, and it is made by the maintainer of this directory", "everything it does can be assembled from next-intl and logical properties with a few days of work", "it commits you to Next.js and Supabase, so the stack choice is made for you" ], "tags": [ "nextjs", "supabase", "rtl", "arabic", "i18n", "paid" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "awesome-design-systems", "category": "design-systems", "name": "Awesome Design Systems", "tagline": "The published design systems of dozens of real companies, in one list", "summary": "A curated index of publicly documented design systems, from Apple and Google down to smaller product teams. The reason to keep it bookmarked is that reading how several serious teams solved the same problem is faster than reasoning about it alone.", "url": "https://aiarabicdev.com/design-systems/awesome-design-systems", "markdownUrl": "https://aiarabicdev.com/design-systems/awesome-design-systems.md", "links": { "repo": "https://github.com/klaufel/awesome-design-systems" }, "facts": { "license": "CC0-1.0", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "you need a defensible reason for a spacing or type decision", "you are naming components and want the vocabulary everyone else uses", "you want to see how a token layer is documented at scale" ], "watchOut": [ "these systems are built for a scale you probably do not have", "some linked systems are abandoned or have moved, as on every list of this kind", "reading design systems is a very comfortable way to avoid designing anything" ], "tags": [ "design-systems", "tokens", "documentation", "awesome-list" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "primer", "category": "design-systems", "name": "Primer", "tagline": "GitHub's design system, documented for developers rather than designers", "summary": "Primer is the design system behind GitHub: tokens, React and Rails components, guidelines and accessibility documentation. It is unusually useful to read because it is written for the people implementing it, so the guidance is concrete rather than aspirational.", "url": "https://aiarabicdev.com/design-systems/primer", "markdownUrl": "https://aiarabicdev.com/design-systems/primer.md", "links": { "homepage": "https://primer.style", "repo": "https://github.com/primer/react" }, "facts": { "license": "MIT", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "you want token architecture documented by people who maintain it", "you need concrete accessibility guidance rather than a checklist", "the audience is developers, so GitHub's conventions are already familiar" ], "watchOut": [ "adopting the components means adopting GitHub's visual identity", "it is scaled for a very large product, so much of it is not your problem", "the React and Rails implementations do not move in lockstep" ], "tags": [ "design-systems", "github", "tokens", "react", "accessibility" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "carbon-design-system", "category": "design-systems", "name": "Carbon Design System", "tagline": "IBM's system, built for dense data and long lived enterprise software", "summary": "Carbon is IBM's open source design system, covering tokens, components, layout, motion and data visualisation across React, Web Components, Angular and Vue. It is built for information dense interfaces that people use all day, which makes it a specialist rather than a general reference.", "url": "https://aiarabicdev.com/design-systems/carbon-design-system", "markdownUrl": "https://aiarabicdev.com/design-systems/carbon-design-system.md", "links": { "homepage": "https://carbondesignsystem.com", "repo": "https://github.com/carbon-design-system/carbon" }, "facts": { "license": "Apache-2.0", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "the interface is dense data that people work in all day", "you need the same system across several frontend frameworks", "you want motion documented as rules rather than as taste" ], "watchOut": [ "the enterprise look is intentional and hard to soften", "adopting it means adopting its grid and type scale, not just components", "extracting one component from it is harder than it looks" ], "tags": [ "design-systems", "ibm", "enterprise", "data", "tokens" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "open-props", "category": "design-systems", "name": "Open Props", "tagline": "A ready made set of CSS custom properties, no framework attached", "summary": "Open Props is a library of CSS custom properties covering colour, spacing, type, shadows, easings and animations. It is a token layer and nothing else, usable in plain CSS with no build step, no components and no opinion about your markup.", "url": "https://aiarabicdev.com/design-systems/open-props", "markdownUrl": "https://aiarabicdev.com/design-systems/open-props.md", "links": { "homepage": "https://open-props.style", "repo": "https://github.com/argyleink/open-props" }, "facts": { "license": "MIT", "language": "CSS", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Install", "command": "pnpm add open-props" } ], "bestFor": [ "you want a considered scale without adopting a framework", "the project is plain CSS with no build pipeline", "you need good easing curves and do not want to invent them" ], "watchOut": [ "tokens only, so components and layout remain entirely yours", "importing the whole set adds a lot of unused custom properties, so take the subsets you need", "it overlaps with Tailwind's theme, so decide which one owns a value" ], "tags": [ "design-systems", "css", "tokens", "custom-properties" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "material-web", "category": "design-systems", "name": "Material Web", "tagline": "Material Design as standard web components", "summary": "Material Web implements Material Design 3 as framework agnostic web components, with the dynamic colour system that generates a full palette from a single source colour. It is the most rigorously specified system on this shelf.", "url": "https://aiarabicdev.com/design-systems/material-web", "markdownUrl": "https://aiarabicdev.com/design-systems/material-web.md", "links": { "homepage": "https://m3.material.io", "repo": "https://github.com/material-components/material-web" }, "facts": { "license": "Apache-2.0", "language": "TypeScript", "pricing": "free", "selfHostable": true }, "install": [], "bestFor": [ "the product should feel native on Android", "you want a colour system with contrast guarantees built in", "framework agnostic web components suit your stack" ], "watchOut": [ "Material is instantly recognisable, which is a strong branding decision", "the project's scope and roadmap have changed more than once, so check its current status", "web components in React need wrappers and event handling care" ], "tags": [ "design-systems", "material", "web-components", "color" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" }, { "slug": "radix-colors", "category": "design-systems", "name": "Radix Colors", "tagline": "Twelve step palettes where every step has a defined job", "summary": "Radix Colors is a palette system of twelve step scales, designed so each step has a specific purpose: this step is a subtle background, this one is a border, this one is accessible text. Light and dark scales are matched, and it is only colour.", "url": "https://aiarabicdev.com/design-systems/radix-colors", "markdownUrl": "https://aiarabicdev.com/design-systems/radix-colors.md", "links": { "homepage": "https://www.radix-ui.com/colors", "repo": "https://github.com/radix-ui/colors" }, "facts": { "license": "MIT", "language": "CSS", "pricing": "free", "selfHostable": true }, "install": [ { "label": "Install", "command": "pnpm add @radix-ui/colors" } ], "bestFor": [ "you want colour decisions to be lookups rather than judgements", "light and dark mode must both be accessible without manual checking", "you need a palette that composes with any component library" ], "watchOut": [ "colour only, so the rest of the system is still yours", "dropping an unscaled brand colour into it breaks the contrast guarantees", "twelve steps per scale is a lot of tokens to name and maintain" ], "tags": [ "design-systems", "color", "accessibility", "tokens", "dark-mode" ], "addedAt": "2026-08-23", "updatedAt": "2026-08-23" } ] }