X Bookmarks: React & Next.js (Mar–Jun 2026)

Bookmarked React/Next.js tweets covering framework updates, component libraries, patterns, and Vercel ecosystem tools.

Deep Review 2026-07-04

Hit Area Tailwind utility

Takeaway: Promoted to Hit Area. The resolved article and live registry item show a shadcn-installable Tailwind v4 utility set for expanding click/touch targets through ::before without changing visual layout. Current source snapshot: hosted registry JSON at https://bazza.dev/r/hit-area, no public package version for the item itself, and shadcn@4.13.0 as the versioned CLI install surface. Source: X/@heyImMapleLeaf, 2026-03-13; Source: bazza.dev, 2026-07-04

Princeton TD browser runtime

Takeaway: Princeton Tower Defense now preserves the day 1 artifact as evidence that Next.js/React can be the shell around a custom Canvas 2D game runtime when the core work is projection math, render ordering, and state orchestration. The reviewed image shows an early playable surface with a fogged isometric battlefield, campus-themed towers, selected hero details, spell buttons, wave/currency/lives HUD, and camera controls; the useful React/Next lesson is to let the browser host the system without pretending the UI framework is the game engine. Source: X/@kevskgs and local image review, 2026-07-04

Deep Review 2026-07-03

v0 design-system skills follow-up

Takeaway: v0 by Vercel now records the 2026-06-25 follow-up bookmark: after import, the saved design-system skill can be attached from the prompt bar, started from the Design Systems page, and made available to the team automatically. Current package snapshot remains v0@2.2.5, v0-sdk@0.16.4, and @v0-sdk/ai-tools@0.3.8 as of 2026-07-03, while Design Systems 2.0 itself is a hosted v0 feature with v0.json schema version 1. Source: X/@v0, 2026-06-25; Source: v0 docs/npm registry, 2026-07-03

Deep Review 2026-06-30

Next.js security and agent workflow split

Takeaway: Next.js now records both sides of the current Next evidence. The 2026-05-07 security release is an upgrade floor signal: v16.2.6 and v15.5.18 fixed high/moderate/low advisories across Server Components, middleware/proxy bypass, WebSocket SSRF, XSS, image DoS, and cache poisoning; use the newest patch on the installed line, with next@latest at 16.2.10 as of the 2026-07-01 registry refresh. The 16.3 AI Improvements bookmark is a preview-channel workflow signal: managed AGENTS.md, version-matched local docs, next-dev-loop, Cache Components adoption/optimizer skills, React introspection, actionable errors, and a slimmer MCP server belong to agent workflow routing, not stable-framework default behavior yet. Source: X/@nextjs, 2026-05-07; Source: X/@nextjs, 2026-06-26; Source: npm registry packument, 2026-07-01

Re-sync 2026-06-28

shadcn chat primitives and v0 design-system skills

Takeaway: The fresh sync reinforces two React/Vercel patterns already promoted elsewhere: Shadcn UI Ecosystem now ships behavior primitives for streaming chat, and v0 by Vercel treats design systems as scoped skills backed by source packages, usage examples, and starter verification. The React/Next.js implication is to give agents behavior constraints and real component usage, not just visual examples. Source: X/@shadcn, 2026-06-26; Source: X/@v0, 2026-06-25

Next/Vercel agent stack repeats

Takeaway: Next.js 16.3 AI Improvements, AI SDK Harness adapters, and Eve observability appeared again in the fresh batch. Vercel Eve now owns the Eve observability update: Agent Runs turns Eve sessions into inspectable dashboard traces with model calls, tool calls, token usage, runtime-error correlation, developer/business views, and explicit retention rules. Source: X/@nextjs and X/@vercel_dev, 2026-06-26

Re-sync 2026-06-26

Next.js 16.3 Preview: Instant Navigations

Takeaway: Next.js is now the durable framework page for this release. The current official 16.3 Preview path is Cache Components + Stream/Cache/Block choices + Partial Prefetching route shells + instant() Playwright checks. This supersedes any older "instant navigation = ViewTransition only" interpretation. Source: Next.js blog, 2026-06-25

The attached Liveblocks Linear-like issue tracker demo was reviewed as a practical shell-quality example: judge instant navigation on whether the issue-list/detail context is immediately useful while data streams, not merely whether the click changes URLs quickly. Source: X/@ctnicholasdev, 2026-06-26

Next.js 16.3 AI Improvements

Takeaway: Next's own routing moved from knowledge skills toward version-matched local docs: next dev manages an AGENTS.md pointer, docs can be read as Markdown, and workflow skills own the browser/dev-loop and Cache Components adoption/optimization loops. Update agent routing accordingly: local docs first, workflow skill for execution. Source: Next.js blog, 2026-06-26

Next.js actionable errors

Takeaway: The "Ways to fix this" / "Copy as prompt" pattern is now a framework-level agent affordance: errors provide labeled fixes, prompt payloads, linked per-error docs, and terminal-visible structured guidance. This pattern belongs in Security and Review Skills and Frontend and Design Skills as a source-critical error UX reference. Source: X/@rauchg, 2026-06-26; Source: Next.js blog, 2026-06-26

Re-sync 2026-06-24

React Tweet + tweet artifacts

Takeaway: React Tweet is now the wiki's X artifact renderer via ::tweet{...} markdown directives. The implementation keeps wiki pages as plain markdown, lazy-mounts embeds, and maps React Tweet variables to the wiki's light/dark theme tokens. Source: React Tweet docs, 2026-06-24

Takumi v2 + cnfast

Takeaway: Takumi extends the React/JSX rendering lane into Rust-backed social images, while Cnfast keeps the ubiquitous shadcn/Tailwind cn() helper from becoming a render hot path. Both are small but practical frontend performance/tooling signals. Source: X bookmarks, 2026-06-24

Framework Updates

Next.js 16.2.6 Security Patch

We've released Next.js versions 16.2.6 and 15.5.18 with important security fixes. These fixes address multiple vulnerabilities across high, moderate, and low severity. - @nextjs | 2026-05-07 | 2,363 likes

Takeaway: Critical security patch - upgrade immediately. Includes upstream React fix. Source: X/@nextjs, 2026-05-07

React View Transitions Skill

New agent skill: react-view-transitions - Add React ViewTransition animations to any Next.js App Router page - @nextjs | 2026-04-02 | 2,177 likes

Takeaway: Official skill for View Transitions API in React - cross-document transitions without client-side routing. Source: X/@nextjs, 2026-04-02

React Doctor v2

React Doctor v2 is here. Your agent writes bad React code, this catches it. Works with Next.js, Vite, React Native. - @aidenybai | 2026-05-08 | 5,161 likes

Takeaway: Post-agent React hygiene tool - npx react-doctor@latest. Already in Kevin's Security and Review Skills tool page. Source: X/@aidenybai, 2026-05-08

zero-native - Desktop + Mobile with Web UI

Introducing zero-native. Build native desktop + mobile apps with web UI and Zig - Tiny binaries, low memory, selectable web engines, Next.js/Vue/Svelte/React - @ctatedev | 2026-05-09 | 3,889 likes

Takeaway: Ship native apps from a React/Next.js codebase with Zig bindings. See Zero Native. Source: X/@ctatedev, 2026-05-09

Vercel CLI Curl Support

Vercel CLI now supports native curl commands. Same syntax as curl, but uses Vercel auth to test all of your deployments. - @vercel_dev | 2026-05-15 | 139 likes

Takeaway: Source-reviewed into Vercel Curl (Vercel CLI). Test authenticated Vercel preview endpoints with familiar curl syntax and logged-in Vercel auth; the reviewed CLI package snapshot is vercel@54.20.1, Node >=18, latest published 2026-07-03. Source: X/@vercel_dev, Vercel changelog, and npm registry, 2026-07-04

Vercel AI Gateway CLI

You can just render images on the terminal: npx ai-cli image 'a vercel ai sdk diagram' - @rauchg | 2026-05-14 | 608 likes

Takeaway: AI CLI (Vercel) is now a versioned terminal AI route, not just a screenshot trick. Deep review verified the local artifact (terminal renders a generated Vercel AI SDK diagram inline) and the package snapshot: ai-cli@0.4.2 latest as of 2026-07-03, backed by vercel-labs/ai-cli for image, video, audio, and text generation via AI SDK / AI Gateway. Source: X/@rauchg, 2026-05-14; Source: npm registry packument, 2026-07-03

Vercel Workflows GA

Vercel Workflows is GA. Your code is the orchestrator. Ship agents, backends, or any long-running process without managing infrastructure. - @vercel | 2026-04-16 | 447 likes

Takeaway: Durable workflow execution on Vercel - crash-safe, retries, pause/resume. Source: X/@vercel, 2026-04-16

Component Libraries

shadcn/ui apply Command

We've added a new command: npx shadcn apply. Instantly apply a full preset across your project. Swap components, themes… - @shadcn | 2026-04-07 | 2,658 likes

Takeaway: One-command preset application - swap entire design systems. Source: X/@shadcn, 2026-04-07

React Email 6.0

Announcing React Email 6.0. For a long time, people asked me for a way to build emails with React components… - @zenorocha | 2026-04-17 | 1,763 likes

Takeaway: React-native email templating finally production-ready at 6.0. Source: X/@zenorocha, 2026-04-17

SaaS Stack Overview (5.4K likes)

SaaS Stack: Frontend (React, NextJS, TailwindCSS, Shadcn UI), Backend, Auth, Database, Payments… - @ennycodes | 2026-04-07 | 5,437 likes

Takeaway: Community consensus on the 2026 SaaS stack - React/Next.js/Tailwind/shadcn is the default. See SaaS Stack 2026. Source: X/@ennycodes, 2026-04-07

Remocn - shadcn Animation Registry

Introducing Remocn - a @shadcn registry with ready-made animations, typography, transitions, UI elements, and complete sections - @kapish_dima | 2026-04-08 | 696 likes

Takeaway: Pre-built animation components via shadcn registry - drop-in motion. Source: X/@kapish_dima, 2026-04-08

mapcn - Map Components for React

Vercel has open sourced mapcn - ready-to-use map components for React built on MapLibre GL, styled with Tailwind, shadcn/ui compatible. - @RoundtableSpace | 2026-05-07 | 366 likes

Takeaway: Maps as shadcn-compatible components. The reviewed artifact correctly highlights zero-config MapLibre/Tailwind/shadcn components, but the "Vercel open sourced" framing is wrong; Mapcn records AnmolSaini16 as source authority and notes that the npm mapcn@0.0.1 package is not the install route. Source: X/@RoundtableSpace, 2026-05-07

Top 10 shadcn Registries

These are top 10 UI libraries right now, which you can easily use through the @shadcn registry: Shadcn Blocks, React Bits, Shadcn Studio, Tailark… - @orcdev | 2026-05-07 | 166 likes

Takeaway: Registry ecosystem maturing - 10+ third-party component libraries installable via npx shadcn add. See Shadcn Registry Directory (Top Blocks). Source: X/@orcdev, 2026-05-07

Patterns / Best Practices

Fardeem frontend architecture notes

If you're on your way to building a billion dollar company that involves a web app, here are some of my notes on architecting the frontend. - @FardeemM | 2026-06-19 | 1,854 likes, 3,810 bookmarks

Takeaway: Promoted into React Style. The self-thread is the durable source: typed query params, TanStack Query for cached server state, xstate/store or Zustand for narrow global state, full state machines for complex frontends, internal Tailwind with no arbitrary public className, Row/Stack layout components, typed compound actions like ButtonList, and one established WebSocket/SSE pattern for agents to copy. Source: X/@FardeemM self-thread, 2026-06-19

Terminal Component for React

Adding a terminal to your React app is as easy as… - @ctatedev | 2026-04-16 | 1,121 likes

Takeaway: Drop-in terminal UI component for React - useful for agent interfaces. Source: X/@ctatedev, 2026-04-16

json-render Directives

New: @json-render/directives - Ready-made directives for Generative UI: $format, $t, $math, $pluralize, $concat - @ctatedev | 2026-05-07 | 719 likes

Takeaway: Declarative formatting layer for AI-generated UIs - i18n, currencies, math, concatenation, joins, counts, pluralization, and truncation at render time. Deep review refreshed JSON Render -- Generative UI Framework with @json-render/directives@0.19.0, packages/directives, repo HEAD e2d00fae, and tag v0.19.0. Source: X/@ctatedev and local artifact review, 2026-07-03

Stripe Emulator Skill

New Skill: Stripe Emulator - Works offline, no account needed, stateful, hosted checkout page, webhooks, embeds in your React app - @ctatedev | 2026-04-29 | 620 likes

Takeaway: Offline Stripe testing for React apps - eliminates test mode API dependency. Source: X/@ctatedev, 2026-04-29

Coolify as Vercel Alternative

RIP Vercel bills. Coolify is a free, open source PaaS that gives you most of what Heroku, Netlify, and Vercel do… - @sentient_agency | 2026-04-07 | 220 likes

Takeaway: Self-hosted deployment alternative - relevant for cost-sensitive Next.js projects. Source: X/@sentient_agency, 2026-04-07

• Also noted: Bento-grid portfolio with custom shadcn registry by @iamncdai (848 likes), cursor hero effect concept by @mattrothenberg (811 likes), Vercel security env rotation advisory (589 likes), admin dashboard templates (237 likes), full-stack shadcn components (305 likes), agentic Bun+TS7 recipe by @rustydotwtf (12 likes)

Batch 151–512 Absorption (18 entries)

Introducing Web to Design

Introducing Web to Design. Turn any website into an editable UI. Just paste a URL. Create new variants, different pages, or build components inspired by the original design. We’ve been using this internally a ton, it’s the fastest way to go from a raw idea to a prototype. https://t.co/Z9Hlg4ucP3 - @skirano | Thu 12, Mar | 1,859 likes, 2,808 bookmarks

Takeaway: Promoted to MagicPath (Web to Design). The reviewed artifact shows the product's import lane and website-card canvas, so the durable route is reference-site-to-editable-UI exploration before committing to a local design system. Official site verified live on 2026-06-30; no public CLI/API/MCP or semver was verified, so this stays a hosted human-in-the-loop design product rather than an executable skill. Source: X/@skirano, Thu 12, Mar; Source: https://www.magicpath.ai/

gm, today we're launching Shader Lab, like photoshop but for shaders

gm, today we're launching Shader Lab, like photoshop but for shaders • design slick layered shader compositions • export high-quality assets or shaders • OSS package to plug & play ↳ https://t.co/5FjvLy8UIQ https://t.co/9FSvad3TS2 - @basementstudio | Mon 13, Apr | 2,264 likes, 2,550 bookmarks

Takeaway: Add your first keyframe from the properties panel. Thread: render a composition directly in React, use it as a texture or add effect layers over your own scenes

try it out in your app ~/ 𝚋𝚞𝚗 𝚊𝚍𝚍 @𝚋𝚊𝚜 Demo video attached. See Shader Lab. Source: X/@basementstudio, Mon 13, Apr

We have a big open source launch for you today

We have a big open source launch for you today. Announcing React Email 6.0. For a long time, people asked me for a way to include an email editor into their app. So we decided to open source our own editor. - Embed in your app - Style with your brand - Build custom extensions https://t.co/9RtWUnZ... - @zenorocha | Fri 17, Apr | 1,763 likes, 1,396 bookmarks

Takeaway: Promoted into React Email. The reviewed video shows React Email 6.0 as an embeddable email-builder surface, not only a component library: code snippets introduce integration, then the "Wayback Store" demo edits a branded email in-app. Current snapshot: react-email@6.6.6, @react-email/editor@1.6.1, and resend/react-email tag react-email@6.6.6 verified 2026-07-03. Source: X/@zenorocha, Fri 17, Apr; Source: npm/GitHub, 2026-07-03

We’ve added a new command: npx shadcn apply

We’ve added a new command: npx shadcn apply. Instantly apply a full preset across your project. Swap components, themes, colors, CSS variables, fonts, and icons all at once. Apply. Test. Repeat. https://t.co/1gC0NIUh9b - @shadcn | Tue 07, Apr | 2,658 likes, 1,290 bookmarks

Takeaway: Promoted into Shadcn UI Ecosystem. npx shadcn@latest apply --preset ... is an existing-project preset switcher: reinstall components, theme tokens, colors, CSS variables, fonts, and icons together, then inspect the visual diff. Current CLI snapshot: shadcn@4.12.0 on npm and shadcn-ui/ui tag shadcn@4.12.0 verified 2026-07-03. Source: X/@shadcn, 2026-04-07; Source: shadcn apply changelog, 2026-07-03

Ever wondered why text never aligns perfectly

Ever wondered why text never aligns perfectly? You set padding to 24px. You check it in dev tools. But visually it looks like 32px. The reason is invisible space above and below every text element. CSS includes it by default because of how line-height works. https://t.co/kc3ikQYPHe - @vponamariov | Fri 13, Mar | 1,077 likes, 1,205 bookmarks

Takeaway: Thread: As result, your spacing never matches what designers want.

ESPECIALLY buttons look unbalanced, slightly off.

There's a new CSS property that fixes t Source: X/@vponamariov, Fri 13, Mar

Design cheatsheet (bookmark this):

Design cheatsheet (bookmark this): - Icons: @huge_icons filled + stroke icons. 1.2px stroke width, 16px base size - Typography: Only 2 font weights. Regular for body text, medium for headings, and emphasis - Colors: TailwindCSS Neutral palette. Visit https://t.co/r38fpTANjs - @_heyrico | Sun 08, Mar | 792 likes, 1,111 bookmarks

Takeaway: Design cheatsheet (bookmark this):

• Icons: @huge_icons filled + stroke icons. 1.2px stroke width, 16px base size
• Typography: Only 2 font weights. Regular for body text, medium for headings, and em Source: X/@_heyrico, Sun 08, Mar

you can now edit all your ramps at once

you can now edit all your ramps at once. (and export them as SVG, CSS or as Tailwind Config) https://t.co/7SuwEydWgA - @meodai | Mon 20, Apr | 972 likes, 954 bookmarks

Takeaway: Promoted as color-token workflow evidence in Color Palette & Gradient Tools. The reviewed video shows RYBitten editing several named shade ramps at once through shared hue, hue-variation, lightness, and saturation controls, then exposing export affordances for SVG, CSS, and Tailwind config. The durable lesson is batch-editable ramp rules before export, not a one-off swatch picker. Source: X/@meodai and local video review, 2026-07-03

Introducing Remocn - a @shadcn registry with ready-made animations, typograph...

Introducing Remocn - a @shadcn registry with ready-made animations, typography, transitions, UI elements, and complete scenes for @Remotion (a library for creating videos using React components). If you’re a solo builder like me and don’t have the budget to produce a full demo https://t.co/UIGY4BAz... - @kapish_dima | Wed 08, Apr | 696 likes, 949 bookmarks

Takeaway: Promoted to Remocn, not just Remotion. Deep review refreshed source authority (Remocn/remocn, MIT, untagged main) and reviewed the April launch video frames: Cursor Flow, Brush Stroke Simulator, Bounding Box Selector, Mesh Gradient Background, Spotlight Card, Terminal Simulator, Code Diff Wipe, and AI Generate Overlay. Current source count is tracked on Remocn. Source: X/@kapish_dima, 2026-04-08; Source: GitHub Remocn/remocn, 2026-07-03

holy shit @tailwindcss can y'all put this in core

holy shit @tailwindcss can y'all put this in core??? https://t.co/Gfo8WJghAh - @heyImMapleLeaf | Fri 13, Mar | 1,011 likes, 892 bookmarks

Takeaway: Promoted to Hit Area, a shadcn-installable Tailwind v4 utility set for expanding interactive hit areas without changing layout. Source: X/@heyImMapleLeaf, Fri 13, Mar

Thanks to @shadcn – with shadcn/registry, distributing components has never b...

Thanks to @shadcn – with shadcn/registry, distributing components has never been easier. Built my portfolio using a custom registry. If you saw the components I shared over time, here’s the final bento-grid combining them all. https://t.co/5uffHdnSMn - @iamncdai | Tue 05, May | 848 likes, 703 bookmarks

Takeaway: Promoted to Chanh Dai Components and Shadcn Registry Directory (Top Blocks). The reviewed thumbnail shows a custom-registry portfolio bento with reusable controls, code/file cards, copy buttons, a GitHub contribution strip, and polished shadcn-style component states. Current source check: shadcn registries distribute components, hooks, pages, config, rules, and other files; GitHub registries can install from a root registry.json; shadcn@4.13.0 is the current CLI snapshot. Source: X/@iamncdai, 2026-05-05; Source: shadcn docs/npm registry, 2026-07-03

Nano Banana + Google Flow + Lovable

Nano Banana + Google Flow + Lovable Here’s the exact prompt I used ↓ https://t.co/r0pVWGBy1H - @viktoroddy | Mon 02, Feb | 564 likes, 667 bookmarks

Takeaway: Promoted to Prompt Recipes as a prompt-to-hero recipe. The exact stack name-drop matters less than the contract shape: product, audience, React/Tailwind/Framer Motion runtime, responsive dark SaaS hero, generated background video, animated foreground cards, conversion section inventory, and concrete copy. Local video review shows a coherent Taskora hero, but the hardening step is still human taste review for generic-SaaS drift, contrast, mobile text fit, focus states, and reusable tokens. Source: X/@viktoroddy, 2026-02-02

Here's a tip when vibe designing landing pages

Here's a tip when vibe designing landing pages. ❤️‍🔥Use Google Veo 3.1 Videos in the background. Google Flow is so freaking good at animating backgrounds for landing pages. Prompt below ↓ https://t.co/88RpKY36md - @viktoroddy | Sat 07, Mar | 297 likes, 436 bookmarks

Takeaway: Promoted to Prompt Recipes as the AI video background hero recipe. The durable value is the contract shape: generate a loop-friendly Google Flow/Veo background plate, then ask for a full-screen React/Tailwind hero with object-cover video, autoplay/loop/muted/playsInline, transparent nav, restrained badge, sans/serif headline contrast, sharp CTA, and static/reduced-motion fallbacks. Local artifact review shows an agency hero with calm red/cyan light motion behind readable white copy; hardening still needs poster image, mobile crop, contrast, and non-placeholder copy review. Source: X/@viktoroddy, 2026-03-07; Source: Google DeepMind Veo docs, 2026-07-01

Mapcn

Zero-config React map components for Tailwind https://t.co/F6fmpa9XMD https://t.co/XYaBk8yM6n - @tom_doerr | Thu 16, Apr | 420 likes, 359 bookmarks

Takeaway: Mapcn is the React/Tailwind/shadcn map component source, not a Vercel-owned component library. Deep review verified the README image, MapLibre GL basis, theme-aware and shadcn-compatible positioning, MIT license, no release tags, and GitHub main at dcca957d9c347620dc3e7c1f923f3af532914396. Use repo/docs as authority; ignore mapcn@0.0.1 on npm as a reservation artifact. Source: X/@tom_doerr, Thu 16, Apr; Source: GitHub AnmolSaini16/mapcn, 2026-06-30

One CSS property just killed every auto-resize textarea script you've ever wr...

One CSS property just killed every auto-resize textarea script you've ever written. Seriously, one line. The property is field-sizing: content https://t.co/7mAO0aCYEU - @vponamariov | Wed 11, Mar | 411 likes, 329 bookmarks

Takeaway: Promote to CSS Field Sizing rather than treating it as a React-only trick. field-sizing: content can replace textarea autosize JavaScript when the browser matrix supports Baseline 2026 features; keep min/max block-size constraints and test older browsers before deleting a fallback. Source: X/@vponamariov, Wed 11, Mar; Source: MDN, 2026-06-30

12 production-ready admin dashboard templates built with shadcn/ui, Tailwind ...

12 production-ready admin dashboard templates built with shadcn/ui, Tailwind CSS, and Next.js. https://t.co/HQkqzRmeff - @TobyBelhome | Thu 09, Apr | 237 likes, 320 bookmarks

Takeaway: Promoted to Shadcn UI Ecosystem as a dashboard starting-point reference. Local video review shows white-label shadcn/Tailwind/Next.js shells for reference, project, CRM, finance, crypto, and hospitality dashboards: side nav, metric cards, charts, tables, and restrained monochrome surfaces. Use as layout grammar, not source/version authority. Source: X/@TobyBelhome and local video contact sheet, 2026-07-03

One CSS unit makes your text readable at any font size

One CSS unit makes your text readable at any font size. The unit is "ch" What's special. about it? 1ch is NOT equal to one character width. It equals the width of "0" (zero) character in the chosen font. But.. Why do we need it? https://t.co/wybCQoWd5b - @vponamariov | Sat 14, Mar | 276 likes, 282 bookmarks

Takeaway: Promoted to Fluid Typographic Scale as the measure half of responsive type. The reviewed diagram contrasts fixed 600px text width with 60ch; the durable rule is to cap prose with max-width: min(65ch, 100%) so line length follows font size and zoom instead of a fixed pixel box. Source: X/@vponamariov, 2026-03-14

Your mobile hero section looks perfect in dev tools

Your mobile hero section looks perfect in dev tools. Then you test on a real phone and half of it is hidden behind the address bar. The solution? Three new CSS viewport units: svh, lvh, and dvh. https://t.co/3S01x395gH - @vponamariov | Thu 12, Mar | 188 likes, 195 bookmarks

Takeaway: Promoted to Mobile Viewport Units. The thread explains the mobile 100vh failure and when to choose svh, lvh, or dvh; local artifact review confirmed the three-phone diagram showing browser UI visible, hidden, and dynamic states. Source: X/@vponamariov, Thu 12, Mar; Source: local image artifact review, 2026-07-01

day 1/31 of building Princeton Tower Defense:

day 1/31 of building Princeton Tower Defense: a 3D isometric browser tower defense game built with Next.js, React, TypeScript, and a custom Canvas 2D renderer. no engine. just projection math, render ordering, state orchestration, and stubbornness. the browser is a runtime if https://t.co/vLrLjfV... - @kevskgs | Sat 14, Mar | 10 likes, 4 bookmarks

Takeaway: Promoted to Princeton Tower Defense. Day 1 is the browser-as-runtime proof: Next.js/React provide the app shell while custom Canvas 2D owns the isometric renderer, path projection, render ordering, selected-unit state, spell controls, and HUD. Source: X/@kevskgs and local image review, 2026-07-04

Batch 151–512 — Dedicated-Page Cross-Ref (5 entries)

HOW TO MAKE YOUR AI-CODED UI ACTUALLY STAND OUT

HOW TO MAKE YOUR AI-CODED UI ACTUALLY STAND OUT 1\ lucide is great, but everyone uses it lucide react is basically the default icon set for ai coded apps. it's clean, open source, and free. which is exactly why every ai generated interface ends up looking the same. if you https://t.co/MEdN0JVwF1 - @om_patel5 | Sat 07, Mar | 1,035 likes, 2,032 bookmarks

Takeaway: Promoted into UI Design Defaults (Cheatsheets) and Frontend and Design Skills as an icon-language rule: do not merely swap Lucide for random icons; pick a coherent system. Local artifact review covered Streamline (system families/styles), Hugeicons (46K+ rounded/standard library), Lineicons (28K+ multi-format set), and Solar Icons (multi-style cross-framework library). Source: X/@om_patel5, 2026-03-07; Source: local image artifacts, 2026-07-03

Pro Tip for FRONTEND DEVS:

Pro Tip for FRONTEND DEVS: > Don’t just “pick some Tailwind classes” and vibe. > Build a real design system once, then reuse it everywhere: - Define a small, strict set of primitives: colors, spacing scale, radii, typography, shadows - Wrap them into components (button, https://t.co/oWZama... - @Hartdrawss | Fri 06, Mar | 1,140 likes, 1,512 bookmarks

Takeaway: Promoted into Frontend and Design Skills as a design-system enforcement signal, not merely a tool-name note. The reviewed video shows an Atheera landing-page/product mock where strict primitives carry texture, data cards, content blocks, and trusted-by UI together; the durable lesson is to define tokens and components once, then enforce them with config and lint rules. Source: X/@Hartdrawss, 2026-03-06; Source: local artifact wiki/assets/x-bookmarks/2029942733943566526/image-01.jpg, reviewed 2026-07-01

Adding a terminal to your React app is as easy as

Adding a terminal to your React app is as easy as https://t.co/ByTKa7GEA5 - @ctatedev | Thu 16, Apr | 1,121 likes, 584 bookmarks

Takeaway: Promoted to wterm. The artifact is a minimal @wterm/react code card, but source review shows the larger web-terminal stack: DOM rendering for native selection/copy/find/accessibility, Zig/WASM parser, dirty-row rendering, alternate screen, scrollback, themes, WebSocket transport, and framework packages. Current package snapshot: @wterm/react@0.3.0, @wterm/core@0.3.0; repo HEAD 641ae91, public tags stop at v0.2.1. Source: X/@ctatedev and local image/source review, 2026-07-03

New in React Doctor:

New in React Doctor: Prevent bad React code from breaking prod Install GitHub Action. Fully open source npx react-doctor@latest https://t.co/S2R7INHUqw - @aidenybai | Thu 11, Jun | 815 likes, 580 bookmarks

Takeaway: Try it out locally first:

npx react-doctor@latest

Install GitHub Action: Source: X/@aidenybai, Thu 11, Jun

Takeaway: CI gate for agent-authored React. See Security and Review Skills — run locally first, then GitHub Action from open-source repo. Demo video on bookmark. Source: X/@aidenybai thread, 2026-06-11

Vercel HarnessAgent (AI SDK)

We just shipped HarnessAgent, a unified abstraction to orchestrate any agent's "brain" into your app — @aisdk frees you from model and agent lock-in - @rauchg | 2026-06-12 | 508 likes, 431 bookmarks

Takeaway: Embed Claude Code / Codex-class harnesses in apps. See AI SDK HarnessAgent. Source: X/@rauchg, 2026-06-12

Crafter

Full-stack shadcn/ui components https://t.co/V0uuk6hUuw https://t.co/3aQGn83lR2 - @tom_doerr | Mon 16, Mar | 305 likes, 224 bookmarks

Takeaway: See Elements, a trusted shadcn registry for full-stack Next.js blocks across Clerk, AI SDK, Claude Code hooks, logos, Polar, UploadThing, Upstash, dev tools, SFX, loaders, and PDF. Deep review inspected the local README screenshot and refreshed the untagged source snapshot to 5ecc481d8187cbf47335d6aaadd86e948cd02a21; pin registry JSON before adopting blocks. Source: X/@tom_doerr, 2026-03-16; Source: GitHub README

2026-06-28 Coverage Catch-Up (2 parked records)

---

Timeline

• 2026-06-17 | Added timeline for the compiled React/Next.js bookmark hub. Source: raw/x-bookmarks/bookmarks.jsonl
• 2026-05-17 | Created React/Next.js bookmark hub from X bookmark batches. Source: raw/x-bookmarks/bookmarks.jsonl