Weekly Web Design & Development News: Collective #653

by jQueryScript,

Everything you need to know in development & design this week, rounded up for you (Week 17, 2026).

You'll find the most essential things right now: JavaScript & CSS libraries, useful code snippets, crucial web dev news & resources, curated AI tools, free design assets, and plenty of other good stuff we found!

Highlights:

  • Anthropic just launched Claude Design to help you co-create polished UI, presentations, and prototypes.
  • Supercharge your React projects with a massive collection of 200+ extended blocks for shadcn/ui.
  • Grab a clever Chrome extension that perfectly extracts any website's styles into an AI-ready DESIGN.md file.
  • Take a fascinating peek under the hood at the brand new frontend architecture powering MDN.
  • Level up your local agents with the 10 best MCP servers for web developers to use right now.
  • Easily add stunning, animated glowing borders to your components using pure Vanilla JavaScript.
  • + 24 other web dev tools, JS/CSS libraries, and AI resources
  • + 14 design freebies, code snippets, and news articles

Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.

JavaScript & CSS

border-beam-vanilla - Animated Border Glow Effect In Vanilla JavaScript.

Animated Border Glow Effect In Vanilla JavaScript

pencere - Accessible Gallery Lightbox for Images, Video, and Iframes.

Accessible Gallery Lightbox for Images, Video, and Iframes

tw-slide - TailwindCSS HTML Presentation Library.

TailwindCSS HTML Presentation Library

vanilla-jcrop - Modern Image Crop Web Component.

Modern Image Crop Web Component

Arrow nav tabs - CSS corner-shape Arrow Tabs for Menus & Breadcrumbs.

CSS corner-shape Arrow Tabs for Menus & Breadcrumbs

Inverted Corner Tabs - CSS-Only Inverted Corner Tabs With Anchor Positioning.

CSS-Only Inverted Corner Tabs With Anchor Positioning

bs-markdown-editor - Bootstrap 5 Markdown Editor with Preview.

Bootstrap 5 Markdown Editor with Preview

BeMarquee - Horizontal and Vertical Scrolling Ticker.

Horizontal and Vertical Scrolling Ticker

tangentflow - PDF document builder & npm library with pixel-perfect text wrapping.

Discover more JavaScript & CSS Libraries →


NextGen JavaScript

Shadcn Space - 200+ Extended UI Components & Blocks for shadcn/ui.

200+ Extended UI Components & Blocks for shadcn/ui

remocn - Copy-Paste UI Components for Remotion.

Copy-Paste UI Components for Remotion

TableCraft - React Data Table on Drizzle with Search, Filters, and Types.

React Data Table on Drizzle with Search, Filters, and Types

billui - React Billing UI Components Built on shadcn/ui.

React Billing UI Components Built on shadcn/ui

smui - Terminal Style shadcn/ui Theme.

Terminal Style shadcn/ui Theme

slidytabs - Sliding Tabs UI Component for Shadcn/ui.

Sliding Tabs UI Component for Shadcn/ui

semiotic - AI-Ready React Data Visualization with 38 Chart Types.

AI-Ready React Data Visualization with 38 Chart Types

border-beam - Animated Border Glow Component for React.

Animated Border Glow Component for React

expo-gooey-toast - Morphing Blob Toasts for React Native.

Morphing Blob Toasts for React Native

pxlkit - Free to Use Retro React UI kit & pixel art icon library.

Discover more Next.js & shadcn/ui resources →


Web Dev Tools & Resources

wterm - A terminal emulator for the web.

open-agents - An open source template for building cloud agents.

weft - A programming language for AI systems.

kumo - A lightweight AWS service emulator written in Go.

design-md-chrome - Chrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI.

cli-to-js - Turn any CLI into a JavaScript API.

FluidCAD - Parametric cad modeling with Javascript.

stretchystudio - FOSS 2D animation tool for turning static illustrations into mesh-deformable characters.

marky - A lightweight easy to use markdown viewer.

kontext-cli - Give your coding agents access to services without exposing keys.


Graphic Design Freebies

Quen Serif Font - A free serif font with a classical base and a modern tone.

Quen Serif Font

Crypto Icon Set - 3D Crypto Icon Set for Figma (Light & Dark Modes).

3D Crypto Icon Set for Figma (Light & Dark Modes)

QIHIA Futuristic Display Font - A free futuristic display font for experimental, sci-fi, and modern visual work.

QIHIA Futuristic Display Font

Discover more Graphic Design Freebies →


Curated AI Tools for Developers and Designers

PokeClaw - Free On-Device AI Agent for Android Phone.

Cushion - Free AI Markdown Workspace for Desktop.

MiniMax CLI - Generate Text, Image, Video, Speech, and Music via CLI.

Nemotron OCR v2 - NVIDIA’s Free Multilingual OCR Model.

Ghost Pepper - Private Voice Dictation & Meeting Transcription for macOS.

Claude Design - A new Anthropic Labs product that lets you collaborate with Claude to create polished visual work like designs, prototypes, slides, one-pagers, and more.

Claude Opus 4.7 - A notable improvement on Opus 4.6 in advanced software engineering, with particular gains on the most difficult tasks.

Gemini 3.1 Flash TTS - The latest text-to-speech model that delivers improved controllability, expressivity and quality.

Discover more Free AI Tools →


News & Articles

10 Best MCP Servers for Web Developers in 2026 (Link)

Hack the AI agent: Build agentic AI security skills with the GitHub Secure Code Game (Link)

Under the hood of MDN's new frontend (Link)

7 View Transitions Recipes to Try (Link)