# WWADD — What Would A Dev Do? > A free reference for web developers: what each tool is for, copy-ready "moves" (snippets with short explanations), and stack playbooks that say when to use a combination, how the pieces fit, sourced real-world examples, and when to skip it. Content is editorial and opinionated. Playbook examples link to public sources; tool licenses are stated precisely (e.g. SSPL is marked source-available, not open source). Every tool, stack, comparison, and move page also exists as plain Markdown at the same URL plus `.md` (for example `/tools/supabase.md`). Editorial text is CC BY 4.0 (attribute WWADD and link the page) and code snippets in moves are CC0; see https://wwadd.dev/terms. # Stack playbooks ## Vite + React + Supabase + Vercel URL: https://wwadd.dev/stacks/vite-react-supabase-vercel Last verified: 2026-09-28 A short path from idea to a real product with auth, a database, and a public URL. ### When to use it - Solo dev or small team shipping an MVP in days, not months - You need login, a relational database, and file storage without running servers - Mostly client-rendered app behind a login screen, where SEO is not the priority ### How the pieces fit Vite keeps the dev loop near-instant and emits a plain static bundle. Supabase covers the parts that normally require a backend team — Postgres, row level security, auth, storage, realtime — and is reached directly from the browser with a publishable key. Because the frontend is static, Vercel serves it from a CDN with zero server config. The seam between them is just HTTP, so you can later move privileged logic into edge functions without rewriting the UI. ### The tech and its role - Vite: Build tool and dev server - React + TypeScript: UI layer - Tailwind CSS: Styling - Supabase (Postgres): Database, auth, storage, realtime - Row Level Security: Authorization at the data layer - Vercel: Static hosting and CDN ### Real-world examples - Mobbin: Migrated about 200,000 users from Firebase to Supabase after hitting Firestore's limits on indexing and relational queries for a read-heavy app — evidence the Supabase layer holds up past the prototype stage. (source: https://supabase.com/customers/mobbin) - Atomic CRM (Marmelab): An open-source CRM from the makers of react-admin: a Vite + React single-page app talking directly to Supabase for auth and Postgres. It isn't tied to Vercel, which shows the frontend host is interchangeable. (source: https://github.com/marmelab/atomic-crm) ### Skip if Skip if you need server-rendered marketing pages for SEO, or if your authorization rules are too complex to express as row policies. ## Next.js + Postgres + Prisma + Vercel URL: https://wwadd.dev/stacks/nextjs-postgres-prisma-vercel Last verified: 2026-09-28 The default choice when you need SEO, server rendering, and typed database access in one codebase. ### When to use it - Public content must be indexable and fast on first paint - You want API routes and UI in the same repo and the same deploy - The schema is non-trivial and you want migrations under version control ### How the pieces fit Next.js renders on the server, so data fetching happens next to the database instead of over the public internet. Prisma turns the schema into TypeScript types, so a column rename becomes a compile error rather than a runtime 500. Vercel runs the framework it maintains, so routing, caching, and image optimization work without hand-tuning. The result is one mental model: write a server component, query Postgres, return HTML. ### The tech and its role - Next.js (App Router): Framework, SSR/SSG, routing - React Server Components: Server-side data fetching - Postgres: Primary datastore - Prisma: Typed ORM and migrations - Better Auth: Sessions and OAuth providers - Vercel: Hosting, edge caching, previews ### Real-world examples - Cal.com: Open-source scheduling platform whose public repo shows the full shape: Next.js app, Prisma schema and migrations, Postgres database. (source: https://github.com/calcom/cal.com) - Notion's marketing site: Built with Next.js on Vercel and runs hundreds of experiments a year at the edge — the indexable site is kept separate from the Notion app itself. (source: https://vercel.com/blog/how-notion-powers-rapid-and-performant-experimentation) ### Skip if Skip if your app is a purely internal dashboard behind a login — the server rendering cost buys you SEO you will never use. ## Astro + Markdown + CDN URL: https://wwadd.dev/stacks/astro-markdown-cdn Last verified: 2026-09-28 Content sites that stay fast because there is almost no JavaScript to ship. ### When to use it - Blogs, docs, changelogs, marketing sites — content changes, layout rarely does - Authors are comfortable writing Markdown in a repo - Lighthouse scores and Core Web Vitals are a business requirement ### How the pieces fit Astro renders components to HTML at build time and strips their JavaScript unless you explicitly opt in with an island. Markdown files become typed content collections, so a missing frontmatter field fails the build instead of the page. The output is static files, which a CDN serves from the edge with no origin server, no cold starts, and no database to keep alive. ### The tech and its role - Astro: Static site generator, islands architecture - Markdown / MDX: Content authoring - Content Collections: Typed frontmatter and schema validation - Tailwind CSS: Styling - Cloudflare Workers / Netlify: CDN hosting and build pipeline (Cloudflare now steers new projects to Workers over Pages) ### Real-world examples - Astro's own docs: Built with Astro and content collections; the repo is public and is the canonical example of the pattern. (source: https://github.com/withastro/docs) - Cloudflare developer docs: Moved developers.cloudflare.com from Hugo to Astro with the Starlight docs theme and open-sourced the content. (source: https://blog.cloudflare.com/open-source-all-the-way-down-upgrading-our-developer-documentation/, 2025) - Firebase blog: Rebuilt the Firebase blog on Astro, reporting a 71% performance improvement and publishing time cut from hours to minutes. (source: https://astro.build/case-studies/firebase/) ### Skip if Skip if the page content depends on who is logged in — personalization fights a fully static build. ## WordPress + managed hosting URL: https://wwadd.dev/stacks/wordpress-managed-hosting Last verified: 2026-09-28 Hard to beat when non-developers must publish daily and the budget favors plugins over engineers. ### When to use it - A marketing or editorial team owns the content and will not touch a repo - You need forms, SEO tooling, e-commerce, and memberships without building them - Long-term maintenance will be handled by an agency or a generalist, not a frontend team ### How the pieces fit WordPress ships the editorial workflow — drafts, roles, revisions, scheduling, media library — that every custom CMS rebuilds badly. Managed hosting takes over the parts that historically made WordPress painful: PHP versions, object caching, backups, staging, and security patching. The plugin ecosystem means most feature requests are a configuration decision rather than a sprint. ### The tech and its role - WordPress: CMS and editorial workflow - PHP + MySQL: Runtime and datastore - Managed host (WP Engine, Kinsta, Pressable): Caching, backups, patching, staging - Block themes: Layout and design system - WooCommerce: Optional commerce layer ### Real-world examples - TechCrunch: Runs on WordPress VIP and built its subscription paywall on top of WordPress rather than replacing it — high-traffic editorial on managed WordPress. (source: https://wpvip.com/blog/how-techcrunch-built-a-subscription-paywall-on-wordpress/) - The White House (whitehouse.gov): Moved from Drupal to WordPress in 2017 and has stayed on it through later rebuilds, now on managed WordPress VIP. (source: https://wordpress.org/showcase/the-white-house/, 2017) ### Skip if Skip if the product is an application rather than a site — app-like state in WordPress means fighting the platform every sprint. ## React Native + Expo URL: https://wwadd.dev/stacks/react-native-expo Last verified: 2026-09-28 One TypeScript codebase for iOS and Android when the app is mostly screens, lists, and forms. ### When to use it - You need both app stores and have one team, not two - The team already writes React and wants to reuse that knowledge - You want over-the-air updates to ship JavaScript bug fixes without waiting on store review (native code changes still need a new build) ### How the pieces fit React Native renders real native views from React code, so the UI feels native while the logic stays in TypeScript. Expo removes the Xcode and Gradle setup: EAS builds in the cloud, config plugins handle native modules, and OTA updates push JavaScript fixes straight to users. Expo Router mirrors file-based web routing, so navigation looks like something a web dev already understands. ### The tech and its role - React Native: Native UI from React - Expo SDK: Device APIs: camera, notifications, location - Expo Router: File-based navigation - EAS Build / Submit: Cloud builds and store delivery - TypeScript: Shared types across platforms ### Real-world examples - Discord: Built its iOS app on React Native with roughly 90% code shared with its React web code, and has written about the native work needed for chat performance. (React Native example; not a claim about Expo.) (source: https://discord.com/blog/how-discord-achieves-native-ios-performance-with-react-native) - Shopify: Declared React Native the future of its mobile apps and later migrated Shopify Mobile, its largest app. (React Native example.) (source: https://shopify.engineering/react-native-future-mobile-shopify, 2020) - Coinbase: Moved its iOS and Android apps to a single React Native codebase, opening mobile work to its web engineers. (React Native example.) (source: https://www.coinbase.com/blog/announcing-coinbases-successful-transition-to-react-native, 2021) ### Skip if Skip if the product depends on heavy custom rendering, sustained background processing, or bleeding-edge OS features on day one. ## Turborepo + pnpm + shared UI package URL: https://wwadd.dev/stacks/turborepo-pnpm-shared-ui Last verified: 2026-09-28 For teams running several apps that must look and behave like one product. ### When to use it - You have a marketing site, an app, and maybe a docs site drifting apart visually - Multiple teams need to change shared components without a publish-and-wait cycle - CI time is climbing because every push rebuilds everything ### How the pieces fit pnpm workspaces link packages from disk, so editing the shared UI package is instantly reflected in every app — no versioning ceremony. Turborepo builds a task graph and caches by content hash, so untouched packages are skipped and CI only rebuilds what changed. Remote caching means a teammate's build result becomes your cache hit. Shared ESLint, TypeScript, and Tailwind config packages keep the rules identical everywhere. ### The tech and its role - pnpm workspaces: Dependency linking and disk-efficient installs - Turborepo: Task orchestration and build caching - packages/ui: Shared component library - packages/config: Shared ESLint / TS / Tailwind presets - Changesets: Versioning if packages are published externally ### Real-world examples - Vercel's design-system template: Turborepo's maintainer publishes a reference monorepo with a shared component package consumed by apps. A vendor example, not an independent one. (source: https://vercel.com/templates/react/turborepo-design-system) - OpenStatus: Open-source uptime monitoring whose Turborepo + pnpm monorepo shares one @openstatus/ui package across its marketing site, dashboard, and public status pages — the exact drift problem this stack solves. (source: https://github.com/openstatusHQ/openstatus) ### Skip if Skip if you have one app and one team — a monorepo adds tooling overhead that only pays off across multiple consumers. ## Tauri + React + SQLite URL: https://wwadd.dev/stacks/tauri-react-sqlite Last verified: 2026-09-28 Small, fast desktop apps built with web skills, with data stored on the user's machine. ### When to use it - You're shipping a desktop tool and the team already writes React - Data should live locally and keep working offline - Download size and memory use matter — a 150 MB installer is a hard sell for a utility ### How the pieces fit React renders the UI inside the operating system's own webview, so no browser is bundled. Tauri's Rust core handles what a web page can't — files, windows, the system tray, auto-updates — and exposes it as commands the frontend calls like async functions. SQLite lives in a single file in the app's data directory and is queried from Rust, so reads are local disk operations with no server. The frontend never touches the database directly; it asks Rust, which keeps permissions tight. ### The tech and its role - Tauri: Desktop shell, native APIs, IPC - React + TypeScript: UI in the system webview - Vite: Frontend dev server and build - Rust: Native commands and database access - SQLite: Local, single-file storage ### Real-world examples - Yaak: Open-source desktop API client: a Tauri app with a React frontend that stores workspaces and history in SQLite through rusqlite. (source: https://github.com/mountain-loop/yaak) - Jan: Offline ChatGPT alternative: a Tauri shell around a React web app, with SQLite support through sqlx for local data. (source: https://github.com/janhq/jan) ### Skip if Skip if you need pixel-identical rendering on every OS or rely on Chromium-only APIs — each platform's webview differs, and Electron is the safer bet there. ## FastAPI + Postgres + SQLAlchemy URL: https://wwadd.dev/stacks/fastapi-postgres-sqlalchemy Last verified: 2026-09-28 A typed Python API for when your data work, ML models, or team already live in Python. ### When to use it - The backend sits next to data pipelines or ML models written in Python - You want request validation and API docs generated from type hints - The frontend is separate — a SPA, a mobile app, or another service ### How the pieces fit FastAPI turns Python type hints into request validation and an OpenAPI schema, so interactive docs and typed client generators come for free. Pydantic models describe what the API accepts; SQLAlchemy models describe the tables; Alembic migrates them. Async database drivers let one process wait on Postgres and outbound calls at the same time. Because the contract is plain HTTP plus OpenAPI, any frontend can consume it, and ML code imports straight into request handlers without a second service. ### The tech and its role - FastAPI: HTTP framework, validation, OpenAPI docs - Pydantic: Request and response schemas - SQLAlchemy: ORM and query builder - Alembic: Schema migrations - Postgres: Primary datastore - Python: Shared language with data and ML code ### Real-world examples - Polar: Open-source billing platform whose public server code runs FastAPI with SQLAlchemy on Postgres. (source: https://github.com/polarsource/polar) - Dispatch (Netflix): Netflix's open-source incident-management tool: a FastAPI backend with SQLAlchemy on Postgres. (source: https://github.com/Netflix/dispatch) ### Skip if Skip if the whole team writes TypeScript and there's no Python-specific work — a TypeScript backend keeps one language and shares types with the frontend. ## Phaser + TypeScript + Vite URL: https://wwadd.dev/stacks/phaser-typescript-vite Last verified: 2026-09-28 2D games that load instantly in a browser tab — and can still ship to Steam. ### When to use it - A 2D game — platformer, puzzler, survivor-like, idle — where a link is the best distribution - Game jams and prototypes where time-to-playable matters most - A web team that wants to reuse JavaScript skills ### How the pieces fit Phaser supplies the game-shaped parts — scenes, sprites, tilemaps, input, audio, arcade physics — on top of WebGL with a Canvas fallback. Vite serves it with instant reloads while you tune game feel, and TypeScript catches the typos that otherwise surface as a silent undefined mid-level. Tiled designs levels that Phaser loads directly. The build is static files: host it on itch.io or any CDN, or wrap it in Electron for Steam. ### The tech and its role - Phaser: Game framework: scenes, sprites, physics, input - TypeScript: Typed game code - Vite: Dev server and production build - Tiled: Level design - Kenney assets: Free placeholder and prototype art ### Real-world examples - Vampire Survivors: The original was built in Phaser, then moved to Unity in 2023 to handle thousands of on-screen objects — a good measure of how far Phaser goes and where it runs out. (Phaser example; not a claim about Vite.) (source: https://en.wikipedia.org/wiki/Vampire_Survivors, 2023) - Desktop Heroes (Telazer Games): An idle RPG shipped on Steam using Phaser wrapped in Electron, from a small studio whose web games already had over a million players. (Phaser example.) (source: https://phaser.io/news/2026/04/desktop-heroes-phaser-electron-steam, 2026) ### Skip if Skip if you need 3D, console releases, or tens of thousands of moving objects — a native engine like Godot or Unity fits better. ## Godot + GDScript URL: https://wwadd.dev/stacks/godot-gdscript Last verified: 2026-09-28 A royalty-free engine for indie games headed to Steam, mobile, or consoles. ### When to use it - Solo dev or small studio shipping a 2D or stylized 3D game - The target is Steam, mobile stores, or consoles more than the browser - You want an engine with no royalties, revenue caps, or seat fees ### How the pieces fit Godot's scene tree makes everything — a bullet, a level, the HUD — a reusable node you can nest and instance. GDScript is built for the engine, so iteration is edit-and-play with no compile step. The editor, animation tools, tilemaps, and physics come in one small download. Because it's MIT-licensed, success never triggers a fee; console releases go through third-party porting partners. ### The tech and its role - Godot: Editor, engine, and exporters - GDScript: Gameplay scripting - C# (optional): For .NET teams — no web export in Godot 4 - Kenney assets: Free prototype art ### Real-world examples - Dome Keeper (Bippinbits): A commercially successful survival-mining roguelike built in Godot by a small studio. (source: https://en.wikipedia.org/wiki/Dome_Keeper, 2022) - Cassette Beasts (Bytten Studio): An open-world monster-collecting RPG built in Godot, released on PC, then Switch and Xbox via porting studio Pineapple Works — the console route in practice. (source: https://godotengine.org/article/godot-showcase-cassette-beasts/, 2023) ### Skip if Skip if the game must run well in a browser tab, or the team is already deep in Unity's asset ecosystem — Godot's web export has limits and its asset marketplace is smaller. ## B2B SaaS (organizations / multi-tenant): Next.js + Postgres + Better Auth URL: https://wwadd.dev/stacks/b2b-saas-nextjs-postgres-better-auth Last verified: 2026-09-28 Organizations / multi-tenant apps where your customers are companies: one shared database, per-org data, roles, and SSO. ### When to use it - Customers are companies with several users each, not individuals - You need invites, roles, and one customer's data kept strictly apart from another's - Enterprise buyers ask for SSO (SAML or OIDC) and an audit trail - A small team maintains one codebase for the marketing site and the app ### How the pieces fit Every table a customer owns carries an organization ID in one shared Postgres database, and every tenant query goes through a single scoped data-access layer — that layer, not scattered filters, is what keeps customers apart. Better Auth's organization plugin supplies organizations, members, invitations, roles, and teams; its SSO plugin adds SAML 2.0 or OIDC sign-in per organization. Next.js runs the membership and role check on the server before any query, and Prisma keeps those queries typed. Writing audit-log rows in the same transaction as the change gives enterprise customers their trail. Postgres Row Level Security is an optional backstop behind the data layer, not a replacement for it. ### The tech and its role - Next.js (App Router): Marketing pages, app UI, server-side authorization - Postgres: Shared database; organization ID on every tenant-owned row - Prisma: Typed queries inside a scoped data-access layer - Better Auth: Sessions, organizations, roles, invites, SAML/OIDC SSO - Row Level Security (optional): Database-level backstop behind the data layer - Vercel: Hosting and preview deployments ### Real-world examples - Formbricks: Open-source survey platform: a Next.js app on Postgres with Prisma, Organization and Membership models, Better Auth for sign-in, and SAML SSO through BoxyHQ's SAML Jackson (now Ory Polis). (source: https://github.com/formbricks/formbricks) - Cal.com: Open-source scheduling platform: a Next.js app on Postgres with Prisma, organizations built on its Team model, and enterprise SAML through SAML Jackson. (source: https://github.com/calcom/cal.com) ### Skip if Skip if your customers are individuals, not organizations — per-tenant scoping, roles, and SSO add weight a single-user app never uses. ## TypeScript API service: NestJS + Postgres + Prisma URL: https://wwadd.dev/stacks/nestjs-postgres-prisma-api Last verified: 2026-09-28 A standalone TypeScript API that several clients depend on — mobile apps, partners, other services — with a validated contract and generated docs. ### When to use it - Several clients call the API: your mobile apps, partner integrations, or other services - The team writes TypeScript and there's no Python-specific work pulling the backend elsewhere - You need a stable contract: validation on every request and published API docs - The codebase will grow across several developers and domains ### How the pieces fit NestJS organizes the service into modules — controllers for HTTP, providers for business logic — wired by dependency injection, so each domain (billing, users, webhooks) stays separate as the API grows. Validation pipes check every request against DTO classes before a handler runs, and the Swagger module turns those same classes into OpenAPI docs that partners and client generators use. Guards put authentication, per-route authorization, and rate limiting in one place. Prisma gives typed Postgres access and versioned migrations. NestJS runs on Express by default and can switch to a Fastify adapter when throughput matters. ### The tech and its role - NestJS: Modules, controllers, dependency injection, guards - Postgres: Primary datastore - Prisma: Typed queries and migrations - OpenAPI (@nestjs/swagger): API docs generated from DTO classes - class-validator: Request validation on every route - Docker: Consistent builds for container hosts ### Real-world examples - Hoppscotch: Open-source API development platform: its backend is a NestJS app on Postgres with Prisma, serving GraphQL through Apollo alongside REST controllers documented with Swagger, with class-validator and Passport-based auth. (source: https://github.com/hoppscotch/hoppscotch/tree/main/packages/hoppscotch-backend) - Cal.com API v2: Cal.com's public API runs as a separate NestJS service on the same Postgres and Prisma data, with Swagger docs, rate limiting through @nestjs/throttler, and Passport-based auth. (source: https://github.com/calcom/cal.com/tree/main/apps/api/v2) ### Skip if Skip if the API is small or has a single client — a lighter framework such as Fastify or Hono, or route handlers next to your web app, costs far less ceremony. ## Collaborative editing (local-first): Yjs + Hocuspocus + Tiptap + Postgres URL: https://wwadd.dev/stacks/collaborative-yjs-hocuspocus-postgres Last verified: 2026-09-28 Documents and boards several people edit at once — changes merge automatically, survive going offline, and persist to Postgres. ### When to use it - Several people edit the same document, page, or board at the same time - Edits made offline or on a flaky connection must merge cleanly when it returns - You want presence: live cursors and who's viewing - You'd rather run the collaboration server yourself than pay per connection ### How the pieces fit Yjs represents each document as a CRDT, so concurrent edits from any number of clients merge without conflicts and without a central lock. Tiptap binds the rich-text editor to the shared Yjs document through ProseMirror, and y-indexeddb keeps a copy in the browser so edits made offline sync when the connection returns. Hocuspocus is the WebSocket server in the middle: it authenticates each connection, relays updates and presence, persists the merged Yjs state to Postgres next to your regular rows, and fans out across instances through Redis. Your normal API keeps owning permissions, search, and everything that isn't the live document. ### The tech and its role - Yjs: CRDT documents that merge concurrent edits - Hocuspocus: Collaboration server: auth, sync, presence, persistence - Tiptap: Rich-text editor bound to the Yjs document - y-indexeddb: Offline copy in the browser - Postgres: Persisted Yjs state alongside app data - Redis: Fan-out between collaboration server instances ### Real-world examples - Outline: Open-source team knowledge base: a Hocuspocus server with Yjs and ProseMirror, whose persistence extension stores each document's Yjs state in Postgres, with Redis alongside. (source: https://github.com/outline/outline/tree/main/server/collaboration) - Plane: Open-source project management: a separate live service runs Hocuspocus with Tiptap and Yjs, using database and Redis extensions, while its editor keeps an offline copy with y-indexeddb. (source: https://github.com/makeplane/plane/tree/preview/apps/live) ### Skip if Skip if edits rarely overlap — last-write-wins through a normal API is simpler, and a collaboration server is one more stateful service to run. ## 3D web game: Three.js + Rapier + Vite URL: https://wwadd.dev/stacks/threejs-rapier-vite-3d-web-game Last verified: 2026-09-28 3D games and explorable worlds that run in a browser tab — a link instead of an install. ### When to use it - The game should run from a link — itch.io, a portfolio, a campaign site — with nothing to install - Modest 3D scenes: driving, exploring, arcade physics, small arenas - A web team that works in JavaScript or TypeScript, possibly React - You want to own the architecture rather than adopt a full engine and its editor ### How the pieces fit Three.js renders the scene with WebGL, or its WebGPU renderer where supported, while you own the game loop, input, and structure. Rapier supplies rigid-body physics, colliders, and character controllers, compiled from Rust to WebAssembly so it stays fast in the browser. Vite gives instant reloads while you tune the feel and bundles the WebAssembly and assets for production; the build is static files that any CDN or itch.io can host. Teams working in React can write the same scene as components with React Three Fiber and @react-three/rapier. Budget draw calls, texture sizes, and total download from day one — they decide whether the game runs on mid-range phones. ### The tech and its role - Three.js: Rendering: scenes, cameras, lights, materials - Rapier: Physics compiled to WebAssembly - Vite: Dev server and production build - TypeScript: Typed game code - React Three Fiber (optional): The scene as React components - Kenney assets: Free models for prototyping ### Real-world examples - Bruno Simon's portfolio (folio-2025): An explorable 3D driving world built with Three.js, Rapier physics, and Vite, with its source on GitHub. (source: https://github.com/brunosimon/folio-2025, 2025) - Slow Roads: A procedurally generated driving game built on Three.js. Its web.dev case study covers generating assets on the client instead of downloading them and adapting to everything from high-end desktops to old phones. (Three.js example; not a claim about Rapier or Vite.) (source: https://web.dev/case-studies/slow-roads) ### Skip if Skip if the game needs large worlds, console releases, or an editor-driven workflow for designers — a full engine such as Godot or PlayCanvas fits better. ## Desktop app: Electron + React + Vite URL: https://wwadd.dev/stacks/electron-react-vite Last verified: 2026-09-28 Desktop apps that must look and behave the same on every OS — bundled Chromium, a React UI, and Node.js behind a narrow bridge. ### When to use it - Rendering has to be identical on Windows, macOS, and Linux, or the app relies on Chromium-only APIs - The team wants to stay in JavaScript and TypeScript end to end - You're wrapping an existing web app, or it needs npm packages with native Node.js modules - Download size and memory use matter less than consistency ### How the pieces fit Electron ships its own Chromium and Node.js, so the React UI renders the same everywhere. The main process owns windows, menus, the file system, and native modules; the renderer is a normal Vite-built React app. A preload script exposes a small, typed API through contextBridge, with context isolation on and Node.js integration off in the renderer, so web content never touches Node directly. electron-builder produces signed installers for each OS, and electron-updater installs new versions in the background. Local data can live in SQLite through a native module or in IndexedDB. ### The tech and its role - Electron: Bundled Chromium + Node.js, windows, native APIs - React + TypeScript: UI in the renderer process - Vite: Renderer dev server and build - Preload + contextBridge: Narrow, typed bridge between UI and main process - electron-builder: Installers, code signing, auto-updates - SQLite (optional): Local data through a native module ### Real-world examples - Insomnia: Kong's open-source API client: an Electron app with a React and TypeScript renderer built with Vite, packaged with electron-builder, and updated through electron-updater. (source: https://github.com/Kong/insomnia) - Signal Desktop: The Signal messenger's desktop app: Electron with React and TypeScript, packaged with electron-builder, storing messages in SQLCipher (encrypted SQLite). (Electron + React example; builds with webpack rather than Vite.) (source: https://github.com/signalapp/Signal-Desktop) ### Skip if Skip if download size or memory use matters more than identical rendering — Tauri uses the OS webview and ships a fraction of the size. # Comparisons ## Prisma vs Drizzle URL: https://wwadd.dev/compare/prisma-vs-drizzle Last verified: 2026-09-28 Both give you type-safe database access in TypeScript. Prisma is schema-first with its own modeling language; Drizzle keeps the schema in TypeScript and queries that read like SQL. - Schema: Prisma — A separate schema.prisma file in Prisma's own language; Drizzle — Plain TypeScript table definitions - Query style: Prisma — Object API (findMany, include, where) that hides SQL; Drizzle — SQL-shaped builder (select, from, where, join) - Migrations: Prisma — Prisma Migrate generates SQL migrations from the schema; Drizzle — drizzle-kit generates or pushes migrations from TypeScript - Learning curve: Prisma — Gentle if you don't know SQL well; Drizzle — Easiest if you already think in SQL Pick Prisma when: - The team prefers a high-level API over writing SQL-shaped queries - You want one schema file as the source of truth, with tooling like Prisma Studio Pick Drizzle when: - You like SQL and want queries that map one-to-one to it - You deploy to serverless or edge runtimes and want a small footprint Bottom line: Pick by how your team thinks about data: in objects (Prisma) or in SQL (Drizzle). Both are production-ready; switching later means rewriting every query. Sources: https://www.prisma.io/docs/orm, https://orm.drizzle.team/docs/overview ## Supabase vs Firebase URL: https://wwadd.dev/compare/supabase-vs-firebase Last verified: 2026-09-28 Both bundle a database, auth, storage, and realtime behind one SDK. Supabase is built on Postgres and open source; Firebase is Google's proprietary platform built around the Firestore document database. - Database: Supabase — Postgres — relational, SQL, joins, extensions; Firebase — Firestore — NoSQL documents and collections - Authorization: Supabase — Row Level Security policies in the database; Firebase — Firebase Security Rules - Openness: Supabase — Open source; can be self-hosted; Firebase — Proprietary; runs only on Google Cloud - Mobile offline: Supabase — Possible, but you build more of it yourself; Firebase — Strong built-in offline sync on mobile Pick Supabase when: - Your data is relational — users, orders, and the joins between them - You want SQL, the option to self-host, and no lock-in to one cloud Pick Firebase when: - You're building a mobile or realtime app that needs offline sync out of the box - Your data fits documents and you're already in the Google ecosystem Bottom line: Relational data points to Supabase; offline-first mobile points to Firebase. Mobbin's move from Firebase to Supabase shows the cost of picking a document store for relational, read-heavy data. Sources: https://supabase.com/docs, https://firebase.google.com/docs, https://supabase.com/customers/mobbin ## Node.js vs Bun URL: https://wwadd.dev/compare/nodejs-vs-bun Last verified: 2026-09-28 Both run JavaScript and TypeScript on the server. Node.js is the long-standing default; Bun bundles a runtime, package manager, bundler, and test runner into one fast binary and aims to be Node-compatible. - Scope: Node.js — Runtime; package manager and tooling come separately; Bun — Runtime, package manager, bundler, and test runner in one - TypeScript: Node.js — Runs TypeScript with type stripping; Bun — Runs TypeScript directly - Compatibility: Node.js — The reference every package and host targets; Bun — High Node compatibility, but not complete - Hosting: Node.js — Supported essentially everywhere; Bun — Widely supported, less universal than Node Pick Node.js when: - Production services where compatibility and host support matter most - Dependencies with native modules you can't easily test elsewhere Pick Bun when: - Fast installs, scripts, and tests in development - New projects that want one tool instead of five Bottom line: A common split is Bun for installs, scripts, and tests with Node in production. Moving production to Bun is reasonable once your dependencies pass under it. Sources: https://nodejs.org/docs/latest/api/, https://bun.sh/docs/runtime/nodejs-apis ## Pinecone vs Qdrant URL: https://wwadd.dev/compare/pinecone-vs-qdrant Last verified: 2026-09-28 Both store embeddings and run similarity search for RAG and semantic search. Pinecone is a fully managed proprietary service; Qdrant is open source and can be self-hosted or used as a managed cloud. - Deployment: Pinecone — Managed service only; Qdrant — Self-host (Docker, Kubernetes) or Qdrant Cloud - License: Pinecone — Proprietary; Qdrant — Open source (Apache-2.0) - Operations: Pinecone — Nothing to run; Qdrant — You run it, unless you use the cloud Pick Pinecone when: - You want zero infrastructure and pay-as-you-go pricing - The team has no appetite for operating a database Pick Qdrant when: - Data must stay on your own infrastructure - You want to avoid lock-in, or run the same engine locally and in production Bottom line: Also consider skipping both: if you already run Postgres, pgvector often covers early RAG workloads without a new service. Sources: https://docs.pinecone.io, https://qdrant.tech/documentation/ ## Radix UI vs Headless UI URL: https://wwadd.dev/compare/radix-ui-vs-headless-ui Last verified: 2026-09-28 Both are unstyled, accessible component primitives that handle focus, keyboard navigation, and ARIA while you bring the styles. Radix is React-only with a larger set of primitives; Headless UI comes from Tailwind Labs and supports React and Vue. - Frameworks: Radix UI — React; Headless UI — React and Vue - Maintainer: Radix UI — WorkOS; Headless UI — Tailwind Labs - Breadth: Radix UI — A wide set of primitives (dialogs, menus, popovers, tooltips, sliders, and more); Headless UI — A smaller, focused set of common components - Ecosystem: Radix UI — The foundation shadcn/ui builds on; Headless UI — Designed alongside Tailwind UI Pick Radix UI when: - React projects that need many primitive types - You plan to use shadcn/ui, which is built on Radix Pick Headless UI when: - Vue projects, or teams using both React and Vue - You only need the common pieces and already use Tailwind Bottom line: In React with shadcn/ui, Radix is the default. In Vue, Headless UI is the natural pick. Sources: https://www.radix-ui.com/primitives/docs/overview/introduction, https://headlessui.com ## Phaser vs PixiJS URL: https://wwadd.dev/compare/phaser-vs-pixijs Last verified: 2026-09-28 Both draw 2D graphics in the browser with WebGL. Phaser is a complete game framework; PixiJS is a fast renderer that leaves game structure to you. - Scope: Phaser — Full framework: scenes, physics, input, audio, tilemaps, cameras; PixiJS — Rendering engine: sprites, text, graphics, filters - Physics: Phaser — Built in (Arcade, Matter.js); PixiJS — None — bring your own - Best at: Phaser — Getting a playable game quickly; PixiJS — Custom architecture and interactive graphics Pick Phaser when: - You're building a game and want the standard pieces ready - Game jams and fast prototypes Pick PixiJS when: - You want full control of game structure, or you're not building a game - Interactive sites, data visualizations, and animated UI Bottom line: Making a game? Start with Phaser. Need a fast 2D canvas inside something else? PixiJS. Sources: https://docs.phaser.io, https://pixijs.com/8.x/guides ## Godot vs Unity URL: https://wwadd.dev/compare/godot-vs-unity Last verified: 2026-09-28 Both are full 2D/3D engines with editors that export to desktop, mobile, and consoles. Godot is MIT-licensed and free at any revenue; Unity is commercial, with a free Personal plan up to $200K in revenue or funding. - License: Godot — MIT — no fees at any revenue; Unity — Free Personal plan up to $200K; paid seats above - Languages: Godot — GDScript, plus C#; Unity — C# - Web export: Godot — GDScript projects only in Godot 4 (no C# on the web); Unity — Supported, with heavier builds than browser-first engines - Ecosystem: Godot — Smaller asset library, growing fast; Unity — Very large Asset Store and tutorial base - Consoles: Godot — Through third-party porting partners; Unity — Built-in platform support Pick Godot when: - You want no licensing fees or revenue caps, ever - A small team that values a lightweight editor and fast iteration Pick Unity when: - You depend on the Asset Store or existing Unity expertise - Mobile-heavy or console-first projects that want first-party platform tooling Bottom line: Godot for cost and simplicity, Unity for ecosystem and platform reach. Unity's 2023 Runtime Fee reversal is why many indies now weigh licensing more heavily. Sources: https://godotengine.org/license/, https://unity.com/products/pricing-updates, https://unity.com/blog/unity-is-canceling-the-runtime-fee ## Unity vs Unreal Engine URL: https://wwadd.dev/compare/unity-vs-unreal-engine Last verified: 2026-09-28 The two biggest commercial engines. Unity is C#-based and spans 2D, mobile, and the web; Unreal is C++ with Blueprints visual scripting and leads on high-end 3D fidelity. - Languages: Unity — C#; Unreal Engine — C++ and Blueprints - Pricing: Unity — Per-seat plans; Personal free up to $200K; Unreal Engine — 5% royalty on lifetime gross revenue above $1M per product - Web: Unity — Web builds supported; Unreal Engine — No official browser export - Sweet spot: Unity — 2D, mobile, and mid-scope 3D; Unreal Engine — High-fidelity 3D on PC and consoles Pick Unity when: - 2D or mobile games, or anything that must also run on the web - Teams more comfortable in C# than C++ Pick Unreal Engine when: - Photoreal or AAA-style 3D on PC and consoles - Designers who want to build gameplay in Blueprints Bottom line: Unity covers more platforms; Unreal pushes more pixels. If a browser build matters, Unreal is off the table. Sources: https://unity.com/products/pricing-updates, https://www.unrealengine.com/license ## Tauri vs Electron URL: https://wwadd.dev/compare/tauri-vs-electron Last verified: 2026-09-28 Both turn a web frontend into a desktop app. Tauri renders in the operating system's own webview with a Rust backend; Electron ships its own Chromium and Node.js inside every app. - Rendering: Tauri — System webview: WebView2 (Windows), WKWebView (macOS), WebKitGTK (Linux); Electron — Bundled Chromium — the same engine on every OS - Backend: Tauri — Rust, called from the frontend as commands; Electron — Node.js, with full npm access - App size: Tauri — Small — no browser bundled; Electron — Large — every app ships Chromium - Consistency: Tauri — Varies slightly per OS webview; test on each target; Electron — Pixel-identical across platforms - Mobile: Tauri — iOS and Android since Tauri 2; Electron — Desktop only - Permissions: Tauri — Capabilities explicitly allow what the frontend can call; Electron — Main process has full Node access; you lock it down yourself Pick Tauri when: - Download size and memory use matter, especially for utilities - You also want iOS and Android builds from the same project - The team is comfortable writing some Rust Pick Electron when: - You need identical rendering everywhere or depend on Chromium-only APIs - The team wants to stay in JavaScript end to end - You're wrapping an existing web app or web game for desktop stores Bottom line: Default to Tauri for new, lightweight tools; choose Electron when rendering consistency or an all-JavaScript team outweighs the size cost. Many well-known desktop apps, including VS Code, run on Electron. Sources: https://v2.tauri.app/concept/architecture/, https://v2.tauri.app/reference/webview-versions/, https://v2.tauri.app/security/capabilities/, https://www.electronjs.org/docs/latest, https://www.electronjs.org/apps # Tools ## Languages & runtimes The foundation layer: languages, runtimes, and the core app frameworks built on them. ### TypeScript URL: https://wwadd.dev/tools/typescript · Official site: https://www.typescriptlang.org Kind: Typed superset of JavaScript · License: Open source · Last verified: 2026-09-28 Adds static types and interfaces to JavaScript, then compiles away to plain JS. The payoff is editor autocomplete, safer refactors, and a whole class of runtime bugs caught before you ship. Reach for it when: - Any web app bigger than a script - React and full-stack projects - Shared types between client and server ### Rust URL: https://wwadd.dev/tools/rust · Official site: https://www.rust-lang.org Kind: Memory-safe systems language · License: Open source · Last verified: 2026-09-28 A compiled systems language that guarantees memory safety at compile time without a garbage collector. Fast and predictable, at the cost of a steeper learning curve than most web languages. Reach for it when: - Tauri desktop backends - Performance-critical services and tooling - WebAssembly modules ### React URL: https://wwadd.dev/tools/react · Official site: https://react.dev Kind: Component-based UI library · License: Open source · Last verified: 2026-09-28 Meta's library for building UIs from components written in JSX. It is a UI layer, not a full framework, so routing, data fetching, and builds come from the tools you pair it with. Reach for it when: - Single-page apps - Tauri and Electron frontends - Anything that benefits from the largest component ecosystem ### Tauri URL: https://wwadd.dev/tools/tauri · Official site: https://tauri.app Kind: Cross-platform desktop framework · License: Open source · Last verified: 2026-09-28 Builds desktop (and mobile) apps from a web frontend plus a Rust backend. It uses the operating system's own webview instead of bundling Chromium, so installers are far smaller than Electron's. Reach for it when: - Lightweight desktop tools - Shipping an existing web UI as a native app Worth knowing: Rendering varies slightly per OS because each platform's webview differs — test on every target. ### Node.js URL: https://wwadd.dev/tools/nodejs · Official site: https://nodejs.org Kind: JavaScript runtime · License: Open source · Last verified: 2026-09-28 The server-side JavaScript runtime that most of the web tooling ecosystem is built on. Event-driven and non-blocking, with the broadest package and hosting support of any JS runtime. Reach for it when: - Backend APIs - CLI tools and build scripts - The safe default when compatibility matters ### Bun URL: https://wwadd.dev/tools/bun · Official site: https://bun.sh Kind: All-in-one JavaScript runtime · License: Open source · Last verified: 2026-09-28 A JavaScript runtime that also ships a package manager, bundler, and test runner in one binary. Runs TypeScript directly and aims to be a drop-in replacement for Node. Reach for it when: - Fast installs and scripts - New projects that want one tool instead of several Worth knowing: Node compatibility is high but not complete — check native modules before migrating production code. ### Python URL: https://wwadd.dev/tools/python · Official site: https://www.python.org Kind: Interpreted general-purpose language · License: Open source · Last verified: 2026-09-28 A readable, batteries-included language that dominates data work and machine learning. On the web it shows up as API backends (FastAPI, Django) and anywhere ML models need serving. Reach for it when: - Data processing and ML pipelines - Backend APIs - Scripting and automation ### Vue.js URL: https://wwadd.dev/tools/vue · Official site: https://vuejs.org Kind: Progressive frontend framework · License: Open source · Last verified: 2026-09-28 A frontend framework built around single-file components (`.vue`) and built-in reactivity. More batteries-included than React out of the box, with an official router and state library. Reach for it when: - Web apps with a gentler learning curve - Progressively enhancing existing pages ### Svelte / SvelteKit URL: https://wwadd.dev/tools/svelte · Official site: https://svelte.dev Kind: Compiled UI framework · License: Open source · Last verified: 2026-09-28 Svelte compiles components into small imperative JavaScript at build time instead of shipping a virtual-DOM runtime. SvelteKit is its full-stack framework with routing, SSR, and deployment adapters. Reach for it when: - Fast, low-footprint interfaces - Teams that want less boilerplate ### Next.js URL: https://wwadd.dev/tools/nextjs · Official site: https://nextjs.org Kind: React meta-framework · License: Open source · Last verified: 2026-09-28 The most widely used React framework, maintained by Vercel. Adds file-based routing, server rendering, static generation, React Server Components, and API routes on top of React. Reach for it when: - SEO-sensitive web apps - SaaS products with marketing and app in one codebase Worth knowing: Runs anywhere Node runs, but some features are smoothest on Vercel. ### C# / .NET URL: https://wwadd.dev/tools/dotnet · Official site: https://dotnet.microsoft.com Kind: Compiled object-oriented platform · License: Open source · Last verified: 2026-09-28 Microsoft's cross-platform runtime and C# language, open source and running on Windows, macOS, and Linux. Strong for large backends, desktop apps, and games through Unity. Reach for it when: - Enterprise backends (ASP.NET Core) - Windows desktop tools - Unity game development ### Astro URL: https://wwadd.dev/tools/astro · Official site: https://astro.build Kind: Content-first web framework · License: Open source · Last verified: 2026-09-28 Renders pages to HTML at build or request time and ships no JavaScript unless a component opts in as an interactive island. Content collections give Markdown and MDX typed frontmatter. Reach for it when: - Blogs, docs, and marketing sites - Sites that need near-zero JavaScript - Mixing React, Vue, or Svelte components on one page Worth knowing: The Astro team joined Cloudflare; the framework stays MIT-licensed. ### React Native URL: https://wwadd.dev/tools/react-native · Official site: https://reactnative.dev Kind: Native mobile UI from React · License: Open source · Last verified: 2026-09-28 Meta's framework for building iOS and Android apps with React. Components render to real native views, and most logic is shared across both platforms. Reach for it when: - iOS and Android from one TypeScript codebase - Teams that already write React Worth knowing: React Native's own docs recommend starting new apps with a framework such as Expo rather than bare React Native. ### Expo URL: https://wwadd.dev/tools/expo · Official site: https://expo.dev Kind: React Native framework and cloud services · License: Open source · Last verified: 2026-09-28 The framework layer on top of React Native: an SDK of device APIs, file-based routing with Expo Router, and EAS cloud services that build, submit, and update apps without local Xcode or Android Studio setup. Reach for it when: - Starting a React Native app - Cloud builds and over-the-air JavaScript updates Worth knowing: The SDK is open source; EAS build and update services have a free tier and paid plans. ### Electron URL: https://wwadd.dev/tools/electron · Official site: https://www.electronjs.org Kind: Desktop apps from web tech · License: Open source · Last verified: 2026-09-28 Bundles Chromium and Node.js so a web app runs as a desktop app with full system access. Rendering is identical on every OS because the browser ships with the app. Reach for it when: - Desktop apps that need consistent rendering everywhere - Wrapping a web app or web game for desktop stores Worth knowing: Every app ships its own Chromium, so installers and memory use are much larger than Tauri's. ### FastAPI URL: https://wwadd.dev/tools/fastapi · Official site: https://fastapi.tiangolo.com Kind: Python web framework for APIs · License: Open source · Last verified: 2026-09-28 Builds HTTP APIs from Python type hints: requests are validated automatically, and an OpenAPI schema with interactive docs is generated for free. Supports async handlers. Reach for it when: - Python APIs next to data or ML code - APIs that need generated docs and typed clients ### NestJS URL: https://wwadd.dev/tools/nestjs · Official site: https://nestjs.com Kind: Structured Node.js server framework · License: Open source · Last verified: 2026-09-28 A TypeScript framework for server-side apps built from modules, controllers, and providers wired by dependency injection. Validation, guards, OpenAPI docs, GraphQL, and rate limiting come as first-party packages. Reach for it when: - APIs several teams or clients depend on - Backends that will grow across many domains Worth knowing: Decorators and dependency injection add ceremony that a small service doesn't need. It runs on Express by default and can switch to a Fastify adapter. ### Fastify URL: https://wwadd.dev/tools/fastify · Official site: https://fastify.dev Kind: Fast Node.js web framework · License: Open source · Last verified: 2026-09-28 A low-overhead Node.js web framework with JSON Schema validation and serialization built in, and a plugin system for everything else. Reach for it when: - Small to medium APIs where throughput matters - Teams that want less structure than NestJS ### Hono URL: https://wwadd.dev/tools/hono · Official site: https://hono.dev Kind: Web-standards web framework · License: Open source · Last verified: 2026-09-28 A small web framework built on the standard Request and Response APIs, so the same code runs on Cloudflare Workers, Bun, Deno, Node.js, and serverless platforms. Middleware, a typed RPC client, and Zod-based OpenAPI are available. Reach for it when: - APIs deployed to edge or serverless runtimes - Small services that should run anywhere ## Databases & backends Relational, document, embedded, and vector stores, plus the backends and ORMs around them. ### Supabase URL: https://wwadd.dev/tools/supabase · Official site: https://supabase.com Kind: Postgres backend-as-a-service · License: Open source · Last verified: 2026-09-28 A hosted Postgres database bundled with auth, storage, realtime subscriptions, edge functions, and auto-generated APIs. Authorization is enforced in the database with Row Level Security policies. Reach for it when: - MVPs that need auth + a real relational database - Static frontends talking straight to a backend Worth knowing: Every table reachable from the browser needs RLS enabled — an unprotected table is public. ### PostgreSQL URL: https://wwadd.dev/tools/postgresql · Official site: https://www.postgresql.org Kind: Relational SQL database · License: Open source · Last verified: 2026-09-28 A mature, standards-compliant relational database with strong JSON support and a large extension ecosystem, including PostGIS for geospatial data and pgvector for embeddings. Reach for it when: - The primary database for most applications - Relational data with some JSON - Vector search without a separate service ### SQLite URL: https://wwadd.dev/tools/sqlite · Official site: https://sqlite.org Kind: Embedded single-file database · License: Public domain · Last verified: 2026-09-28 A full SQL database that lives in one file inside your application, with no server to run. Reads and writes are local disk operations, which makes it extremely fast for single-process workloads. Reach for it when: - Desktop apps (Tauri, Electron) - Mobile apps - Local caches, prototypes, and tests Worth knowing: One writer at a time — not a fit for many concurrent writers across servers. ### Firebase URL: https://wwadd.dev/tools/firebase · Official site: https://firebase.google.com Kind: Document backend-as-a-service · License: Managed service · Last verified: 2026-09-28 Google's app platform: Firestore document database, auth, hosting, cloud functions, analytics, and push messaging. Strong realtime sync and offline support on mobile. Reach for it when: - Realtime chat and collaborative apps - Mobile apps - Rapid prototypes Worth knowing: Proprietary and tied to Google Cloud; relational queries and migrations are harder than in SQL. ### Redis URL: https://wwadd.dev/tools/redis · Official site: https://redis.io Kind: In-memory key-value store · License: Open source · Last verified: 2026-09-28 An in-memory data structure store used as a cache, session store, rate limiter, queue, and pub/sub broker. Responses are typically sub-millisecond because data lives in RAM. Reach for it when: - Caching and sessions - Rate limiting - Pub/sub and lightweight queues Worth knowing: Licensing changed in 2024 and AGPLv3 was added in 2025; Valkey is the BSD-licensed community fork. ### MongoDB URL: https://wwadd.dev/tools/mongodb · Official site: https://www.mongodb.com Kind: Document database · License: Source-available · Last verified: 2026-09-28 Stores JSON-like documents with flexible schemas and scales horizontally with sharding. Commonly run through the managed Atlas service. Reach for it when: - Content with irregular shape - Fast schema iteration early on Worth knowing: Licensed under SSPL, which is not an OSI-approved open-source license. ### Prisma URL: https://wwadd.dev/tools/prisma · Official site: https://www.prisma.io Kind: TypeScript ORM · License: Open source · Last verified: 2026-09-28 Define your schema in one file and Prisma generates a fully typed client plus migrations. A renamed column becomes a compile error instead of a runtime failure. Reach for it when: - Type-safe database access in TypeScript - Teams that want a schema-first workflow ### Drizzle URL: https://wwadd.dev/tools/drizzle · Official site: https://orm.drizzle.team Kind: TypeScript SQL query builder · License: Open source · Last verified: 2026-09-28 A lightweight ORM whose query API mirrors SQL, with schemas written in TypeScript. Small runtime footprint and a good fit for serverless and edge environments. Reach for it when: - Developers who like writing SQL-shaped queries - Serverless and edge runtimes ### Pinecone URL: https://wwadd.dev/tools/pinecone · Official site: https://www.pinecone.io Kind: Managed vector database · License: Managed service · Last verified: 2026-09-28 A fully hosted vector database for storing and searching embeddings. No infrastructure to run; you pay for storage and queries. Reach for it when: - Retrieval-augmented generation (RAG) - Semantic search at scale without ops work ### Qdrant URL: https://wwadd.dev/tools/qdrant · Official site: https://qdrant.tech Kind: Vector search engine · License: Open source · Last verified: 2026-09-28 An open-source vector database written in Rust, with payload filtering alongside similarity search. Self-host it or use the managed cloud. Reach for it when: - RAG and AI search you want to self-host - Filtered semantic search ### DuckDB URL: https://wwadd.dev/tools/duckdb · Official site: https://duckdb.org Kind: Embedded analytical database · License: Open source · Last verified: 2026-09-28 A columnar SQL engine that runs in-process, like SQLite but built for analytics. Queries CSV and Parquet files directly and handles large local datasets quickly. Reach for it when: - Local data analysis - Querying CSV/Parquet without loading a warehouse - Data pipelines ### Better Auth URL: https://wwadd.dev/tools/better-auth · Official site: https://www.better-auth.com Kind: TypeScript auth library · License: Open source · Last verified: 2026-09-28 Framework-agnostic authentication for TypeScript: email and password, OAuth providers, sessions, and plugins for two-factor, passkeys, and organizations — stored in your own database. Reach for it when: - Auth you own instead of renting - Next.js, SvelteKit, and other TypeScript apps Worth knowing: Since September 2025 the Better Auth team also maintains Auth.js (NextAuth), which is now in security-fix-only mode. ### SQLAlchemy URL: https://wwadd.dev/tools/sqlalchemy · Official site: https://www.sqlalchemy.org Kind: Python SQL toolkit and ORM · License: Open source · Last verified: 2026-09-28 Python's standard database toolkit: a Core layer for composing SQL and an ORM for mapping classes to tables. Works with Postgres, MySQL, SQLite, and more, with sync and async APIs. Reach for it when: - Database access in Python services - FastAPI and Flask backends ### Alembic URL: https://wwadd.dev/tools/alembic · Official site: https://alembic.sqlalchemy.org Kind: Database migrations for SQLAlchemy · License: Open source · Last verified: 2026-09-28 Versioned schema migrations for SQLAlchemy projects. It can autogenerate a migration by diffing your models against the database, which you then review and commit. Reach for it when: - Evolving a Postgres or MySQL schema in a Python project Worth knowing: Autogenerate misses some changes, such as renames — always read the generated migration. ### Pydantic URL: https://wwadd.dev/tools/pydantic · Official site: https://docs.pydantic.dev Kind: Python data validation · License: Open source · Last verified: 2026-09-28 Validates and parses data using Python type hints. FastAPI uses it for request and response models; version 2's core is written in Rust for speed. Reach for it when: - Validating API input and config - Typed data models in Python ### Yjs URL: https://wwadd.dev/tools/yjs · Official site: https://yjs.dev Kind: CRDT library for shared data · License: Open source · Last verified: 2026-09-28 Represents shared documents as CRDTs, so edits from any number of clients merge automatically without conflicts or a central lock. Providers sync it over WebSockets, WebRTC, or IndexedDB for offline use. Reach for it when: - Real-time collaborative editors and whiteboards - Apps where offline edits must merge cleanly later Worth knowing: Store the binary Yjs state as the source of truth — rebuilding a document from rendered HTML or JSON loses the history offline edits need to merge. ### Hocuspocus URL: https://wwadd.dev/tools/hocuspocus · Official site: https://tiptap.dev/docs/hocuspocus/getting-started/overview Kind: Collaboration server for Yjs · License: Open source · Last verified: 2026-09-28 A WebSocket server for Yjs documents from the Tiptap team. Extensions handle authentication, persistence to your database, Redis fan-out across instances, and webhooks. Reach for it when: - Self-hosting real-time collaboration - Persisting Yjs documents next to your app data ## Dashboards & UI kits Pre-assembled admin panels and templates for internal tools and client portals. ### Tabler URL: https://wwadd.dev/tools/tabler · Official site: https://tabler.io Kind: Admin dashboard template · License: Open source · Last verified: 2026-09-28 A polished, MIT-licensed dashboard template built on Bootstrap 5, with hundreds of responsive components, an icon set, and dark mode. Reach for it when: - Clean open-source admin panels - Bootstrap-based projects ### CoreUI URL: https://wwadd.dev/tools/coreui · Official site: https://coreui.io Kind: Admin dashboard system · License: Freemium · Last verified: 2026-09-28 An admin template with native versions for React, Vue, Angular, and plain Bootstrap. The free edition is open source; Pro adds more components and templates. Reach for it when: - Teams standardizing one dashboard look across frameworks ### AdminLTE URL: https://wwadd.dev/tools/adminlte · Official site: https://adminlte.io Kind: Admin dashboard template · License: Open source · Last verified: 2026-09-28 One of the longest-running open-source admin templates. Version 4 moves to Bootstrap 5 and drops the jQuery requirement. Reach for it when: - Classic back-office and management tools - Server-rendered apps that want a ready admin skin ### Metronic URL: https://wwadd.dev/tools/metronic · Official site: https://keenthemes.com/metronic Kind: Commercial admin theme · License: Commercial · Last verified: 2026-09-28 A large paid theme with dozens of prebuilt app layouts, data tables, and integrations across React, Angular, Vue, Laravel, and more. Reach for it when: - Feature-dense SaaS admin areas where buying beats building Worth knowing: Paid license per project — check the terms before using it for client work. ### Horizon UI URL: https://wwadd.dev/tools/horizon-ui · Official site: https://github.com/horizon-ui/horizon-tailwind-react Kind: Admin dashboard template · License: Freemium · Last verified: 2026-09-28 A modern dashboard template for React and Next.js with Tailwind CSS and Chakra UI versions, strong default dark mode, and chart-heavy widgets. Free version plus a Pro upgrade. Reach for it when: - Modern-looking React dashboards - Tailwind or Chakra projects Worth knowing: The official site was offline as of September 2026 and the repos were last updated in January 2025 — check that it is still maintained before building on it. ### TailAdmin URL: https://wwadd.dev/tools/tailadmin · Official site: https://tailadmin.com Kind: Admin dashboard template · License: Freemium · Last verified: 2026-09-28 A Tailwind CSS admin dashboard with free open-source editions for React, Next.js, Vue, and plain HTML, plus a paid Pro tier. Reach for it when: - Lightweight Tailwind dashboards ## CSS & component libraries Utility-first CSS, headless primitives, and full component design systems. ### shadcn/ui URL: https://wwadd.dev/tools/shadcn-ui · Official site: https://ui.shadcn.com Kind: Copy-into-your-repo components · License: Open source · Last verified: 2026-09-28 Not a package you install but a set of React components you copy into your project with a CLI, built on accessible primitives and Tailwind. You own and edit the code directly. Reach for it when: - React + Tailwind apps that want full design control - Building your own design system from a solid base ### Tailwind CSS URL: https://wwadd.dev/tools/tailwind-css · Official site: https://tailwindcss.com Kind: Utility-first CSS framework · License: Open source · Last verified: 2026-09-28 Style directly in markup with small single-purpose classes like `flex`, `px-4`, and `rounded-lg`. Unused classes are stripped at build time, so the shipped CSS stays small. Reach for it when: - Custom designs without writing much CSS - Component-based frontends ### DaisyUI URL: https://wwadd.dev/tools/daisyui · Official site: https://daisyui.com Kind: Tailwind component plugin · License: Open source · Last verified: 2026-09-28 A Tailwind plugin that adds semantic component classes like `btn`, `card`, and `navbar`, plus themes. Cuts class clutter while keeping Tailwind underneath. Reach for it when: - Fast Tailwind markup - Framework-agnostic projects (it's just CSS) ### Mantine URL: https://wwadd.dev/tools/mantine · Official site: https://mantine.dev Kind: React component library · License: Open source · Last verified: 2026-09-28 A batteries-included React library with 100+ components, a hooks package, form management, modals, notifications, and dark mode built in. Reach for it when: - Full-featured React + TypeScript apps - Teams that want components and utilities from one source ### Ant Design URL: https://wwadd.dev/tools/ant-design · Official site: https://ant.design Kind: Enterprise React design system · License: Open source · Last verified: 2026-09-28 A design system from Ant Group aimed at data-heavy business software, with especially capable tables, trees, filters, and forms. Reach for it when: - Internal tools and admin apps - Data-dense enterprise UIs Worth knowing: Opinionated visual style — heavy customization takes effort. ### Flowbite URL: https://wwadd.dev/tools/flowbite · Official site: https://flowbite.com Kind: Tailwind component library · License: Freemium · Last verified: 2026-09-28 Interactive Tailwind components (dropdowns, modals, navbars, datepickers) with vanilla JS plus React, Vue, and Svelte bindings. Open-source core with paid Pro blocks. Reach for it when: - Tailwind projects that need prebuilt interactive pieces ### Radix UI URL: https://wwadd.dev/tools/radix-ui · Official site: https://www.radix-ui.com Kind: Headless accessible primitives · License: Open source · Last verified: 2026-09-28 Unstyled React primitives (dialogs, dropdowns, popovers, tabs) that handle focus management, keyboard navigation, and ARIA for you. You bring all the styling. Reach for it when: - Custom design systems in React - Accessibility without reinventing it ### Headless UI URL: https://wwadd.dev/tools/headless-ui · Official site: https://headlessui.com Kind: Headless accessible components · License: Open source · Last verified: 2026-09-28 Tailwind Labs' set of unstyled, accessible components for React and Vue, designed to pair with Tailwind classes. Reach for it when: - Accessible menus, dialogs, and listboxes in Tailwind projects - Vue projects wanting headless components ### Vuetify URL: https://wwadd.dev/tools/vuetify · Official site: https://vuetifyjs.com Kind: Vue component framework · License: Open source · Last verified: 2026-09-28 A complete Material Design component framework for Vue, with a broad set of layout and form components. Reach for it when: - Vue apps that want Material Design out of the box ### Tiptap URL: https://wwadd.dev/tools/tiptap · Official site: https://tiptap.dev Kind: Headless rich-text editor · License: Open source · Last verified: 2026-09-28 A headless rich-text editor framework built on ProseMirror, for React, Vue, and plain JavaScript. Its collaboration extension binds the editor to a shared Yjs document. Reach for it when: - Notion-style or document editors - Collaborative editing with Yjs Worth knowing: The core editor is MIT; Tiptap also sells cloud collaboration and some Pro extensions. ## Dev tooling & AI Build tools, API styles, containers, and AI coding assistants. ### Vite URL: https://wwadd.dev/tools/vite · Official site: https://vite.dev Kind: Frontend build tool and dev server · License: Open source · Last verified: 2026-09-28 Serves source files as native ES modules during development, so the dev server starts almost instantly and hot module replacement stays fast as the project grows. Bundles for production. Reach for it when: - React, Vue, and Svelte projects - Replacing slower webpack-era setups ### Claude Code URL: https://wwadd.dev/tools/claude-code · Official site: https://claude.com/claude-code Kind: AI coding agent · License: Commercial · Last verified: 2026-09-28 Anthropic's agentic coding tool. It reads your codebase, edits files, runs commands, and handles multi-step tasks from the terminal, IDE, desktop app, or browser. Reach for it when: - Refactors and multi-file changes - Writing tests and debugging - Exploring unfamiliar codebases Worth knowing: Requires a Claude subscription or API usage. ### Codex URL: https://wwadd.dev/tools/codex · Official site: https://openai.com/codex Kind: AI coding agent · License: Open source · Last verified: 2026-09-28 OpenAI's coding agent, available as an open-source CLI and as a cloud agent that works on tasks in parallel sandboxes. Reach for it when: - Delegating well-scoped coding tasks - Terminal-based AI assistance Worth knowing: The CLI is open source; model usage requires a ChatGPT plan or API key. ### REST URL: https://wwadd.dev/tools/rest · Official site: https://developer.mozilla.org/en-US/docs/Glossary/REST Kind: API architectural style · License: Open standard · Last verified: 2026-09-28 Resources addressed by URLs and manipulated with standard HTTP methods and status codes. Simple, cacheable, and understood by every HTTP client. Reach for it when: - Public APIs - CRUD backends - Anything that benefits from HTTP caching ### GraphQL URL: https://wwadd.dev/tools/graphql · Official site: https://graphql.org Kind: API query language · License: Open standard · Last verified: 2026-09-28 Clients send a query describing exactly the fields they need and get back that shape in one request, from a single typed endpoint. Reach for it when: - Many clients with different data needs - Aggregating several backends behind one API Worth knowing: Adds schema, caching, and query-cost complexity that a small CRUD app rarely needs. ### Docker URL: https://wwadd.dev/tools/docker · Official site: https://www.docker.com Kind: Container platform · License: Open source · Last verified: 2026-09-28 Packages an app with its dependencies and configuration into a container image that runs the same on a laptop, CI, and production. Reach for it when: - Consistent environments across machines - Deploying services to container hosts - Running databases locally Worth knowing: The engine is open source; Docker Desktop needs a paid plan at larger companies. ### pnpm URL: https://wwadd.dev/tools/pnpm · Official site: https://pnpm.io Kind: JavaScript package manager · License: Open source · Last verified: 2026-09-28 A package manager that stores each package version once on disk and links it into projects, making installs fast and space-efficient. Its strict node_modules layout blocks imports of undeclared dependencies. Reach for it when: - Monorepos with workspaces - Large projects where install time and disk use add up ### Turborepo URL: https://wwadd.dev/tools/turborepo · Official site: https://turborepo.dev Kind: Monorepo build system · License: Open source · Last verified: 2026-09-28 Runs tasks across a JavaScript monorepo in dependency order and caches the results by content hash, so unchanged packages are skipped locally and in CI. Remote caching shares results across machines. Reach for it when: - Speeding up CI in monorepos - Several apps sharing packages ### Changesets URL: https://wwadd.dev/tools/changesets · Official site: https://github.com/changesets/changesets Kind: Versioning and changelogs · License: Open source · Last verified: 2026-09-28 Contributors add small changeset files describing what changed and how big the change is; Changesets turns them into version bumps and changelog entries across every package in a monorepo. Reach for it when: - Publishing multiple npm packages from one repo ### electron-builder URL: https://wwadd.dev/tools/electron-builder · Official site: https://www.electron.build Kind: Electron packaging and updates · License: Open source · Last verified: 2026-09-28 Packages an Electron app into installers for Windows, macOS, and Linux, handles code signing and macOS notarization, and pairs with electron-updater for auto-updates. Reach for it when: - Shipping Electron apps to users - Auto-updates from GitHub Releases or your own server Worth knowing: Signing certificates and Apple notarization are separate costs and accounts you set up yourself. ## Hosting & content platforms Where sites get deployed and published: frontend clouds, edge platforms, and the CMS behind content-heavy sites. ### Vercel URL: https://wwadd.dev/tools/vercel · Official site: https://vercel.com Kind: Frontend cloud platform · License: Freemium · Last verified: 2026-09-28 Git-connected hosting for frontend frameworks: every push gets a preview URL, production deploys on merge, and server-side code runs as functions. Maintains Next.js and supports most other frameworks with zero config. Reach for it when: - Next.js apps - Teams that want preview deployments on every pull request Worth knowing: The free Hobby plan is for personal, non-commercial use; commercial projects need Pro or higher. ### Cloudflare Workers URL: https://wwadd.dev/tools/cloudflare-workers · Official site: https://workers.cloudflare.com Kind: Edge compute and static hosting · License: Freemium · Last verified: 2026-09-28 Runs JavaScript and WebAssembly on Cloudflare's network close to users, and now serves static assets too — so one Worker can host a full site. Pairs with KV, D1, R2, and other Cloudflare storage. Reach for it when: - Static and server-rendered sites at the edge - APIs that need low latency worldwide Worth knowing: Cloudflare now steers new projects to Workers instead of Pages; existing Pages projects keep working. ### Netlify URL: https://wwadd.dev/tools/netlify · Official site: https://www.netlify.com Kind: Web hosting platform · License: Freemium · Last verified: 2026-09-28 Git-based hosting with deploy previews, serverless and edge functions, forms, and a global CDN. A long-standing home for static and Jamstack sites. Reach for it when: - Static and framework sites with deploy previews - Sites that need forms or redirects without a backend ### WordPress URL: https://wwadd.dev/tools/wordpress · Official site: https://wordpress.org Kind: Open-source CMS · License: Open source · Last verified: 2026-09-28 The PHP content management system behind a large share of the web: drafts, roles, revisions, a media library, and the block editor, extended by thousands of plugins and themes. Reach for it when: - Sites where non-developers publish daily - Marketing, editorial, and membership sites Worth knowing: Self-hosting means owning updates and security; managed hosts take that on. ### WooCommerce URL: https://wwadd.dev/tools/woocommerce · Official site: https://woocommerce.com Kind: E-commerce plugin for WordPress · License: Open source · Last verified: 2026-09-28 Turns a WordPress site into a store: products, carts, checkout, payments, and orders, managed from the same admin as the content. Reach for it when: - Adding a store to an existing WordPress site - Merchants who want to own their commerce stack Worth knowing: The core plugin is free; many payment, shipping, and subscription extensions are paid. ## Game development From browser-first renderers and 2D frameworks to full engines, plus physics, level editors, and free assets. ### Three.js URL: https://wwadd.dev/tools/threejs · Official site: https://threejs.org Kind: 3D rendering library · License: Open source · Last verified: 2026-09-28 The most widely used JavaScript 3D library: scenes, cameras, lights, materials, and loaders over WebGL, with a WebGPU renderer alongside. It renders; physics, input, and game structure are up to you. Reach for it when: - 3D scenes and product viewers - Games where you want to pick your own physics and architecture ### React Three Fiber URL: https://wwadd.dev/tools/react-three-fiber · Official site: https://r3f.docs.pmnd.rs Kind: React renderer for Three.js · License: Open source · Last verified: 2026-09-28 Write Three.js scenes as declarative React components. Pairs with the drei helper library for cameras, controls, loaders, and effects. Reach for it when: - 3D product views and interactive scenes - Web games inside a React app ### Babylon.js URL: https://wwadd.dev/tools/babylonjs · Official site: https://www.babylonjs.com Kind: 3D web engine · License: Open source · Last verified: 2026-09-28 A full 3D engine started at Microsoft, with physics, a scene inspector, PBR lighting, WebXR, and WebGPU support built in. Reach for it when: - Browser 3D games - WebXR experiences ### PlayCanvas URL: https://wwadd.dev/tools/playcanvas · Official site: https://playcanvas.com Kind: 3D game engine and editor · License: Open source · Last verified: 2026-09-28 A WebGL/WebGPU game engine with a collaborative, browser-based visual editor. Games are built for the web first, with small builds that load fast on mobile. Reach for it when: - Browser 3D games and playable ads - Teams that want a visual editor without a desktop install Worth knowing: The engine is MIT-licensed; the hosted editor has free and paid plans. ### Phaser URL: https://wwadd.dev/tools/phaser · Official site: https://phaser.io Kind: 2D game framework · License: Open source · Last verified: 2026-09-28 A full 2D framework for browser games: scenes, sprites, tilemaps, input, audio, cameras, and built-in physics. The default choice for 2D HTML5 games. Reach for it when: - 2D platformers, puzzlers, and arcade games - Game jams on the web Worth knowing: Phaser 4 is current; many tutorials still target Phaser 3, and some APIs changed between them. ### PixiJS URL: https://wwadd.dev/tools/pixijs · Official site: https://pixijs.com Kind: 2D rendering engine · License: Open source · Last verified: 2026-09-28 A fast 2D renderer for WebGL and WebGPU. It draws sprites, text, and graphics very quickly but isn't a game framework — no built-in physics or scene flow. Reach for it when: - Custom 2D games where you want control over structure - Interactive graphics and animated sites ### Kaplay URL: https://wwadd.dev/tools/kaplay · Official site: https://kaplayjs.com Kind: Beginner-friendly 2D library · License: Open source · Last verified: 2026-09-28 A small, fun-first JavaScript game library with a component-based API that gets a playable game on screen in a few lines. The community-maintained continuation of Kaboom.js. Reach for it when: - Learning game programming - Game jams and quick prototypes ### Godot URL: https://wwadd.dev/tools/godot · Official site: https://godotengine.org Kind: Full game engine · License: Open source · Last verified: 2026-09-28 A complete, MIT-licensed 2D and 3D engine with its own editor and scripting language (GDScript), plus C#. Exports to desktop, mobile, and the web. Reach for it when: - Games that may ship beyond the browser - Developers who want a full editor with no license fees Worth knowing: Web export works for GDScript projects; Godot 4 can't export C# projects to the web, and threaded web builds need cross-origin isolation headers. ### Unity URL: https://wwadd.dev/tools/unity · Official site: https://unity.com Kind: Cross-platform game engine · License: Freemium · Last verified: 2026-09-28 A widely used commercial engine for 2D and 3D games, scripted in C#, with a large asset store and export to desktop, mobile, consoles, and the web. Reach for it when: - Mobile and cross-platform games - Teams that want a huge ecosystem of assets and tutorials Worth knowing: Personal is free up to $200K in annual revenue or funding; above that you need a paid seat. Web builds work but are heavier than browser-first engines. The 2023 per-install Runtime Fee was cancelled in 2024. ### Unreal Engine URL: https://wwadd.dev/tools/unreal-engine · Official site: https://www.unrealengine.com Kind: High-end 3D game engine · License: Source-available · Last verified: 2026-09-28 Epic's engine for high-fidelity 3D, with C++ and Blueprints visual scripting, and built-in rendering features like Nanite geometry and Lumen lighting. Also used for film and visualization. Reach for it when: - High-fidelity 3D on PC and consoles - Real-time visualization and virtual production Worth knowing: Full source is on GitHub once you link an Epic account, but it isn't open source: games pay a 5% royalty on lifetime gross revenue above $1M (sales through the Epic Games Store are exempt). There is no official browser export — pick another engine for web games. ### Rapier URL: https://wwadd.dev/tools/rapier · Official site: https://rapier.rs Kind: Physics engine · License: Open source · Last verified: 2026-09-28 A 2D and 3D physics engine written in Rust and shipped to JavaScript as WebAssembly. Deterministic simulation, rigid bodies, joints, and character controllers. Reach for it when: - Adding real physics to Three.js or R3F scenes - Deterministic simulation for multiplayer ### Tiled URL: https://wwadd.dev/tools/tiled · Official site: https://www.mapeditor.org Kind: Tilemap level editor · License: Open source · Last verified: 2026-09-28 A free desktop editor for tile-based levels. Exports JSON and TMX maps that Phaser, Godot, and most 2D engines can load directly. Reach for it when: - Designing 2D levels visually instead of in code ### Kenney URL: https://wwadd.dev/tools/kenney · Official site: https://kenney.nl Kind: Free game asset library · License: Public domain · Last verified: 2026-09-28 Thousands of CC0 2D sprites, 3D models, UI elements, and sound effects you can use in any project, commercial included, without attribution. Reach for it when: - Game prototypes and jams - Indie web games ## AI agent skills Installable skill folders that teach a coding agent one specific job — design direction, polish, accessibility, design systems. ### Agent Skills (the format) URL: https://wwadd.dev/tools/agent-skills · Official site: https://agentskills.io Kind: Open standard for agent skills · License: Open standard · Last verified: 2026-09-28 A skill is a folder with a SKILL.md file — a name, a description, and instructions — plus optional scripts and reference docs. The agent sees only the short description until a task needs the skill, then loads the rest. Published by Anthropic as an open standard in December 2025. Reach for it when: - Packaging a repeatable workflow once and using it across agents - Understanding what the skills in this group actually are Worth knowing: Skills are instructions and scripts loaded into the agent's context. They don't retrain the model or give it persistent memory. ### Impeccable URL: https://wwadd.dev/tools/impeccable · Official site: https://impeccable.style Kind: Design direction and critique skill · License: Open source · Last verified: 2026-09-28 A design skill that pushes coding agents away from generic, templated UI. It ships named commands — shape, critique, audit, polish, animate, adapt, extract, live — and guidance on typography, spacing, OKLCH color, motion, and UX copy. Reach for it when: - Getting distinct, deliberate UI out of an AI coding agent - Design critiques and polish passes on existing screens - Pulling repeated values into design tokens (extract) - Iterating on elements live in the browser (live) Worth knowing: Works best with a PRODUCT.md or DESIGN.md describing the product. In v4, craft is a deprecated alias — use shape or a plain request instead. ### frontend-design URL: https://wwadd.dev/tools/frontend-design-skill · Official site: https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design Kind: Aesthetic direction skill · License: Source-available · Last verified: 2026-09-28 Anthropic's Claude Code plugin skill for new UI work: the agent commits to a clear aesthetic direction — typography, layout, color — before writing code, instead of reaching for template defaults. Reach for it when: - Landing pages, dashboards, and new screens built with Claude Code Worth knowing: Lives in the anthropics/claude-code repo, which is all-rights-reserved under Anthropic's commercial terms — free to install, not open source. ### make-interfaces-feel-better URL: https://wwadd.dev/tools/make-interfaces-feel-better · Official site: https://github.com/jakubkrehel/make-interfaces-feel-better Kind: Design-engineering polish skill · License: Open source · Last verified: 2026-09-28 Jakub Krehel's skill for the small details that make an interface feel finished: press feedback on buttons, balanced text wrapping, concentric border radii, shadows, hit areas, icon alignment, and restrained enter/exit animation. Reach for it when: - A polish pass on components that work but feel off - Hover states, micro-interactions, and motion details ### Web Design Guidelines URL: https://wwadd.dev/tools/web-design-guidelines · Official site: https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines Kind: UI review skill · License: Open source · Last verified: 2026-09-28 Vercel's skill that reviews UI code against its Web Interface Guidelines — 100+ rules across accessibility, performance, and UX — fetching the latest rules before each run and reporting findings as file:line. Reach for it when: - Reviewing a page or component before merge - A quick UX and accessibility sweep ### Accessibility Review URL: https://wwadd.dev/tools/accessibility-review · Official site: https://github.com/anthropics/knowledge-work-plugins/tree/main/design/skills/accessibility-review Kind: Accessibility audit skill · License: Open source · Last verified: 2026-09-28 Part of Anthropic's open-source design plugin: runs a WCAG 2.1 AA audit on a design or page, covering color contrast, keyboard navigation, touch target size, and screen reader behavior. Reach for it when: - Checking a design or page before handoff - Catching contrast and keyboard issues early Worth knowing: Automated checks cover part of WCAG. Still test with a keyboard and a real screen reader before calling something accessible. ### Figma Generate Library URL: https://wwadd.dev/tools/figma-generate-library · Official site: https://github.com/figma/mcp-server-guide/tree/main/skills/figma-generate-library Kind: Design-system skill · License: Freemium · Last verified: 2026-09-28 One of Figma's official MCP skills: builds or updates a Figma component library from your codebase in phases — audit what exists, create token collections, build component pages, then run a quality check. Reach for it when: - Getting a coded design system into Figma - Keeping tokens in sync between code and design Worth knowing: Needs the Figma MCP server. Starter plans and View/Collab seats are limited to 6 tool calls a month, and writing to the canvas is free only during the beta. # Moves ## CSS Layout, centering, and the snippets you re-google every week. ### Center anything URL: https://wwadd.dev/moves/css/center-anything Flexbox is the shortest path to both-axis centering. `place-items: center` on a grid does the same in one line if the parent has a height. ```css .parent { display: flex; align-items: center; justify-content: center; min-height: 100dvh; } /* grid one-liner */ .parent-grid { display: grid; place-items: center; min-height: 100dvh; } ``` ### Flexbox essentials URL: https://wwadd.dev/moves/css/flexbox-essentials Flex works on one axis at a time. Set `flex-direction` first, then reason about `justify-content` (main axis) and `align-items` (cross axis). `gap` replaces margin hacks. ```css .row { display: flex; flex-direction: row; /* main axis = horizontal */ justify-content: space-between; /* along main axis */ align-items: center; /* across the other axis */ gap: 1rem; flex-wrap: wrap; } .grow { flex: 1 1 0; } /* fill remaining space */ .fixed { flex: 0 0 240px; } ``` ### Grid essentials URL: https://wwadd.dev/moves/css/grid-essentials Grid is two-dimensional. `repeat(auto-fit, minmax(...))` gives a responsive card layout without a single media query. ```css .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } .sidebar-layout { display: grid; grid-template-columns: 240px 1fr; } .span-two { grid-column: span 2; } ``` ### Truncate and clamp text URL: https://wwadd.dev/moves/css/truncate-text Single-line truncation needs `overflow`, `white-space`, and `text-overflow` together. Multi-line uses the widely supported `-webkit-line-clamp`. ```css .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } ``` ### Sticky header that actually sticks URL: https://wwadd.dev/moves/css/sticky-header `position: sticky` fails silently when an ancestor has `overflow: hidden`/`auto`, or when no offset is set. Give it a `top` and check the ancestor chain. ```css .header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); } /* breaks sticky children: */ .ancestor { overflow: hidden; } ``` ## JavaScript Array methods, fetch, promises, and browser storage. ### Array methods you reach for URL: https://wwadd.dev/moves/javascript/array-methods `map` transforms, `filter` narrows, `reduce` folds. All three return new values — none of them mutate. `sort` and `reverse` DO mutate, so copy first with `toSorted` or a spread. ```javascript const users = [{ name: "Ada", age: 36 }, { name: "Linus", age: 54 }]; const names = users.map((u) => u.name); const adults = users.filter((u) => u.age >= 18); const total = users.reduce((sum, u) => sum + u.age, 0); const found = users.find((u) => u.name === "Ada"); const anyOver50 = users.some((u) => u.age > 50); const allAdults = users.every((u) => u.age >= 18); // non-mutating sort const byAge = [...users].sort((a, b) => a.age - b.age); ``` ### fetch JSON with error handling URL: https://wwadd.dev/moves/javascript/fetch-json `fetch` only rejects on network failure — a 404 or 500 still resolves. Always check `res.ok` yourself. ```javascript async function getUser(id) { const res = await fetch(`/api/users/${id}`, { headers: { Accept: "application/json" }, }); if (!res.ok) { throw new Error(`Request failed: ${res.status}`); } return res.json(); } // POST with a body await fetch("/api/users", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: "Ada" }), }); ``` ### Promises and async patterns URL: https://wwadd.dev/moves/javascript/promises Run independent work in parallel with `Promise.all`. Use `allSettled` when one failure shouldn't kill the batch, and `race`/`AbortController` for timeouts. ```javascript // parallel — fails fast const [user, posts] = await Promise.all([getUser(1), getPosts(1)]); // parallel — collect successes and failures const results = await Promise.allSettled([a(), b()]); const ok = results.filter((r) => r.status === "fulfilled"); // timeout const ctrl = new AbortController(); setTimeout(() => ctrl.abort(), 5000); await fetch("/slow", { signal: ctrl.signal }); ``` ### localStorage without the footguns URL: https://wwadd.dev/moves/javascript/localstorage localStorage stores strings only, is synchronous, and throws in private mode or when full. Wrap reads in try/catch and never touch it during server rendering. ```javascript function readJSON(key, fallback) { try { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : fallback; } catch { return fallback; } } function writeJSON(key, value) { try { localStorage.setItem(key, JSON.stringify(value)); } catch { /* quota exceeded or blocked */ } } ``` ### Debounce and throttle URL: https://wwadd.dev/moves/javascript/debounce-throttle Debounce waits until the noise stops (search inputs). Throttle guarantees a steady rate (scroll, resize). ```javascript function debounce(fn, ms = 300) { let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); }; } function throttle(fn, ms = 200) { let last = 0; return (...args) => { const now = Date.now(); if (now - last >= ms) { last = now; fn(...args); } }; } ``` ## Git / HTTP Everyday git commands, status codes, and REST conventions. ### Git commands for daily work URL: https://wwadd.dev/moves/git-http/git-daily Ninety percent of git use is this handful of commands. Learn `switch` and `restore` — they split the overloaded `checkout` into two clear jobs. ```bash git switch -c feature/search # new branch git add -p # stage hunks interactively git commit -m "Add search filter" git push -u origin feature/search git fetch origin git rebase origin/main # replay your work on top of main git log --oneline --graph -20 ``` ### Undoing things in git URL: https://wwadd.dev/moves/git-http/git-undo Pick by blast radius: `restore` for files, `reset --soft` to re-do a commit message, `revert` for anything already pushed, `reflog` when you think work is gone. ```bash git restore src/app.ts # discard local file changes git restore --staged src/app.ts # unstage, keep changes git commit --amend # fix the last commit git reset --soft HEAD~1 # undo commit, keep changes staged git revert # safe undo of a pushed commit git reflog # find "lost" commits ``` ### HTTP status codes worth memorizing URL: https://wwadd.dev/moves/git-http/status-codes 2xx succeeded, 3xx go elsewhere, 4xx the caller is wrong, 5xx the server is wrong. These are the ones that come up in real APIs. ```text 200 OK Standard success 201 Created Resource created (return Location) 204 No Content Success, nothing to send back 301 / 308 Moved Permanent redirect (308 keeps method) 304 Not Modified Cache revalidation hit 400 Bad Request Malformed / failed validation 401 Unauthorized Not authenticated 403 Forbidden Authenticated, not allowed 404 Not Found No such resource 409 Conflict Version or uniqueness clash 422 Unprocessable Semantically invalid payload 429 Too Many Requests Rate limited (see Retry-After) 500 Internal Error Unhandled server failure 502 / 503 / 504 Upstream down, overloaded, timed out ``` ### REST basics URL: https://wwadd.dev/moves/git-http/rest-basics Nouns in the path, verbs in the method. GET must be safe and cacheable, PUT/DELETE idempotent, POST neither. ```text GET /articles list GET /articles/:id read one POST /articles create -> 201 + Location PUT /articles/:id full replace (idempotent) PATCH /articles/:id partial update DELETE /articles/:id remove -> 204 Paginate: /articles?page=2&limit=20 Filter: /articles?tag=css&sort=-createdAt ``` ### HTTP headers that matter URL: https://wwadd.dev/moves/git-http/http-headers Caching and content negotiation live in headers. `Cache-Control` decides whether your CDN does any work at all. ```text Content-Type: application/json Accept: application/json Authorization: Bearer Cache-Control: public, max-age=31536000, immutable # hashed assets Cache-Control: no-store # personal data ETag / If-None-Match # 304 revalidation Access-Control-Allow-Origin: https://example.com # CORS Retry-After: 30 # with 429 / 503 ``` ## Game dev Game loops, input, collision, and sprites in plain TypeScript and Canvas. ### Fixed-timestep game loop URL: https://wwadd.dev/moves/game-dev/fixed-timestep-loop Run physics in fixed steps and render as often as the screen allows. An accumulator carries leftover time between frames, so a 60 Hz and a 144 Hz monitor simulate the same game. Clamp the frame time so a backgrounded tab doesn't try to catch up on minutes of updates. Phaser, Godot, and Unity do this for you; write it yourself when you're on plain Canvas or a renderer like PixiJS. ```ts const STEP = 1 / 60; // seconds per simulation tick let accumulator = 0; let last = performance.now(); function frame(now: number) { // Clamp so a backgrounded tab doesn't dump seconds of catch-up at once accumulator += Math.min((now - last) / 1000, 0.25); last = now; while (accumulator >= STEP) { update(STEP); // physics + game logic, always the same dt accumulator -= STEP; } render(accumulator / STEP); // 0..1: blend between last two states requestAnimationFrame(frame); } requestAnimationFrame(frame); ``` ### Frame-rate independent movement URL: https://wwadd.dev/moves/game-dev/delta-time-movement Speeds should be per second, not per frame. Moving 4 px every frame means a 144 Hz player moves 2.4× faster than a 60 Hz one. Multiply by the elapsed time (delta time) instead. Good enough for simple games; use a fixed timestep when collisions or physics must be consistent. ```ts const SPEED = 240; // pixels per SECOND let last = performance.now(); function frame(now: number) { const dt = Math.min((now - last) / 1000, 0.1); // seconds, clamped last = now; player.x += player.dirX * SPEED * dt; player.y += player.dirY * SPEED * dt; render(); requestAnimationFrame(frame); } requestAnimationFrame(frame); ``` ### Keyboard input without stuck keys URL: https://wwadd.dev/moves/game-dev/keyboard-input-state Track which keys are held in a Set and read it during update, instead of moving things inside event handlers. Use `e.code` (physical key) so WASD works on any keyboard layout. Clear the set on blur: if the player alt-tabs while holding a key, keyup never fires and the character walks forever. ```ts const held = new Set(); const GAME_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Space"]; addEventListener("keydown", (e) => { if (GAME_KEYS.includes(e.code)) e.preventDefault(); // stop page scrolling held.add(e.code); }); addEventListener("keyup", (e) => held.delete(e.code)); addEventListener("blur", () => held.clear()); // alt-tab never sends keyup // In update(): const right = held.has("ArrowRight") || held.has("KeyD"); const left = held.has("ArrowLeft") || held.has("KeyA"); player.dirX = Number(right) - Number(left); // -1, 0, or 1 ``` ### Box collision (AABB) URL: https://wwadd.dev/moves/game-dev/aabb-collision Axis-aligned bounding boxes are the cheapest useful collision check: two rectangles overlap unless one is fully to the side of, above, or below the other. To resolve a hit, push the moving box out along the axis with the smaller overlap. Very fast objects can pass through thin walls between frames (tunneling) — use smaller steps or a physics engine like Rapier for that. ```ts type Box = { x: number; y: number; w: number; h: number }; function overlaps(a: Box, b: Box) { return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y; } // Push `a` out of `b` along the axis with the least overlap function resolve(a: Box, b: Box) { const dx = a.x + a.w / 2 - (b.x + b.w / 2); const dy = a.y + a.h / 2 - (b.y + b.h / 2); const overlapX = (a.w + b.w) / 2 - Math.abs(dx); const overlapY = (a.h + b.h) / 2 - Math.abs(dy); if (overlapX <= 0 || overlapY <= 0) return; if (overlapX < overlapY) a.x += Math.sign(dx) * overlapX; else a.y += Math.sign(dy) * overlapY; } ``` ### Sprite sheet animation on canvas URL: https://wwadd.dev/moves/game-dev/sprite-sheet-animation Pack animation frames side by side in one image and draw one slice at a time with the 9-argument `drawImage`. Pick the frame from elapsed time, not a frame counter, so the animation plays at the same speed on every monitor. ```ts const sheet = new Image(); sheet.src = "/hero-run.png"; // 6 frames in one row, each 32×32 const SIZE = 32; const FRAMES = 6; const FPS = 10; // animation speed, independent of refresh rate function drawHero(ctx: CanvasRenderingContext2D, x: number, y: number, timeMs: number) { const frame = Math.floor((timeMs / 1000) * FPS) % FRAMES; ctx.drawImage( sheet, frame * SIZE, 0, SIZE, SIZE, // source slice x, y, SIZE * 2, SIZE * 2, // destination (2× scale) ); } ``` ### Crisp pixel-art scaling URL: https://wwadd.dev/moves/game-dev/pixel-art-scaling Render at the game's native low resolution, then scale the canvas up with CSS. Turn off smoothing in both places, and scale by whole numbers — a 2.5× scale makes some pixels wider than others. Leftover space becomes letterboxing. ```ts // CSS: canvas { image-rendering: pixelated; } const W = 320, H = 180; // native game resolution const canvas = document.querySelector("canvas")!; canvas.width = W; canvas.height = H; const ctx = canvas.getContext("2d")!; ctx.imageSmoothingEnabled = false; // no blur when drawing scaled sprites function fit() { const scale = Math.max(1, Math.floor(Math.min(innerWidth / W, innerHeight / H))); canvas.style.width = `${W * scale}px`; canvas.style.height = `${H * scale}px`; } addEventListener("resize", fit); fit(); ```