# Fred Rivett's Frontend and AI Dev Stack

> Curated modern frontend and AI product development stack recommendations.

A curated reference stack shared by developer Fred Rivett detailing modern tools for building AI-enabled web products. It spans coding assistants, UI components, testing, runtime, data management, and AI integration layers.

## The list

AI coding tools: Codex, @FactoryAI's droid, @AmpCode. Editor: Vim, @windsurf. UI components/libraries: @shadcn, @base\_ui, @reui\_io, reactbits.dev. Tooling/testing: @storybookjs, @playwrightweb + @vitest\_dev. Linting/formating + runtime: Biome (biomejs.dev) + @bunjavascript. Data layer: @prisma + @supabase. AI layer: AI SDK, @ExaAILabs, @mastra. Validation: zod (http://zod.dev)

## What it is for

- Select modern tooling when scaffolding a new React and AI web project
- Discover newer developer productivity tools across linting, testing, and UI styling
- Compare integrated data and AI orchestration options for modern web apps

## Key points

- AI coding tool recommendations including Codex, FactoryAI droid, and AmpCode
- Editor setup spanning Vim and Windsurf
- Component library recommendations covering shadcn, Base UI, REUI, and React Bits
- Tooling and testing setup using Storybook, Playwright, and Vitest
- Runtime and linting via Bun and Biome
- Data and AI layer components featuring Prisma, Supabase, Vercel AI SDK, Exa, and Mastra
- Type validation handled by Zod

## Pricing

Free

## Details

- Type: List
- Category: [Development](https://xiry.app/topics/development.md)
- Platforms: Web
- For: Frontend engineers and full-stack AI app developers
- Tags: frontend, react, ai, tooling, typescript

## Why it was saved

- [@fredrivett, 28 October 2025](https://x.com/fredrivett/status/1983203410254963028): A curated, tested-in-production stack for building and testing modern AI products with React.

## Related

- [v0 by Vercel](https://xiry.app/resources/v0-by-vercel): AI assistant to generate and iterate on web user interfaces and apps (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [Above-the-Fold Deferred Rendering Pattern](https://xiry.app/resources/above-the-fold-deferred-rendering-pattern): Performance pattern for deferring below-the-fold components to accelerate perceived page load. (Tip, Free)
- [Boneyard](https://xiry.app/resources/boneyard): Auto-generates pixel-perfect skeleton screens directly from your real rendered DOM (GitHub repo, Open source)
- [coss ui](https://xiry.app/resources/coss-ui): Modern UI component library built on top of Base UI (Web app, Free)
- [Shaders](https://xiry.app/resources/shaders): Open-source WebGPU shader component library and free design editor. (Web app, Open source)

Updated 11 October 2026. Page: https://xiry.app/resources/fred-rivett-s-frontend-and-ai-dev-stack

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.