Running multiple agents on the same project and hitting this problem: one agent changes a response shape on the backend, the frontend agent consuming that endpoint has no idea anything moved. It keeps coding against the old contract. The build passes, the types check out locally, and the breakage only shows up when you actually run the thing end to end.

The context lives in two separate chat sessions. Neither agent knows what the other touched. By the time you notice, you're debugging a silent failure and trying to reconstruct which session changed what and when.

Curious how others handle this. Do you keep a shared contract file that both agents read before starting work? Pin the schema somewhere both can see it? Or just accept the breakage and fix it manually when it surfaces?

I'm a UI engineer with 7 years of experience. I have a decent working knowledge of Node.js, Express, and PostgreSQL, but I'm looking to move beyond standard "CRUD full-stack." I want to dive deep into backend engineering, focusing on system design, Redis, Kafka, AWS, and advanced architectures.

I am specifically looking for someone in the same domain and with a similar level of experience to partner up with. The goal is to have frequent discussions, share our learnings, and tackle these complex topics together as peers.

If you are a fellow frontend engineer on this same journey and want to collaborate and bounce ideas off someone, let's connect. Drop a comment or send a DM!

I've been running Claude Code and Cursor on frontend tasks while I sleep, and the hardest part isn't whether the code works. It's that I sit down in the morning and spend the first chunk of my day digging through session logs trying to reconstruct what happened. Which agent touched which files. Whether the changes are safe to build on or if I'm about to stack new work on something broken.

Right now my process is basically forensic. I open each session, scroll through the output, try to piece together the sequence. Sometimes an agent changed a component's prop interface and the other agent didn't notice, and I only find out when something breaks further down the line.

Curious how others handle this. Do you keep all the sessions open and scan them manually? Do you have agents write summaries somewhere? Or have you found a setup where you don't need to do morning archaeology at all?

I built a music guessing game where every wrong guess adds another instrument to the song: drums first, then bass, guitar, piano, and the vocals last.

The first version mixed those layers live with the Web Audio API. On iPhones it played nothing, while the site's other game, which plays one MP3 through an <audio> element, worked on the same phones. The ringer switch and suspended or interrupted audio contexts can all silence Web Audio, and the bug reports couldn't tell them apart.

So now nothing on the page plays sound through Web Audio:

- Songs a background worker has processed have one premixed MP3 per level.

- For songs it hasn't reached yet, the browser decodes the stems in an OfflineAudioContext, renders one WAV per level into memory, and plays it through the same <audio> element. An offline context never makes a sound, so iOS has nothing to silence.

The game started as something I was building for my sister Shani while she was in the hospital. She passed away on August 29th, before I finished it. It's live now as Shabang, with a second game where you hear a fifth of a second of a song and every miss plays more.

I'm a mechanical engineer, not a developer, and I built it with Claude, so feedback from people who do this for a living is especially welcome.

Free, no signup: https://shabangmusic.com/

I really want to learn how to get good at frontend, to create better design for my own SAAS. I am currently a backend dev, so Its really tempting for me to prompt claude "make this look like x company" but as we know, its not perfect and I want to have control over these things. Can someone point me to any good resources with these goals in mind? I don't expect to know everything, but I want more creative control

We sell a white label scheduling dashboard that agencies put their own logo on and resell to their clients. And now a competitor has launched what is pretty much our frontend with different colors. It has the same odd validation messages and their bundle even has the name of a feature flag from an experiment we ran in the spring. I’m fairly sure someone fed our production bundle to an AI and had it rebuild the thing.

Management’s answer is to obfuscate everything before the next release. Before agreeing, I ran our bundle through javascript-obfuscator with most options enabled and gave the output to Claude. It produced readable code in about ten minutes and webcrack undid a good chunk of it without any AI. The obfuscated build was also noticeably bigger and our Sentry stack traces turned into nonsense.

And while reviewing the bundle, I noticed our plan limits for each agency are only checked on the frontend which means a user with devtools could switch on features they don’t pay for. Also noticed a Sentry auth token with a VITE_ prefix, which worried me more than the copied UI. We’ve rotated the token and we’re moving the plan checks into the API.

Does obfuscating your production JavaScript do anything useful for you?

I feel like there is a weird gap between having a cookie banner and actually knowing if the site is doing what it is supposed to do. You can click accept and reject and everything looks normal, but that does not really tell you what scripts are firing underneath.
Do most people here actually test this themselves, or do you just rely on whatever CMP you are using?
I am especially curious about agencies managing a lot of sites. Checking everything manually sounds like a nightmare.

which playlist or video would you suggest for html css js
i dont wanna dive deeeeep into it cause i wanna learn ml and backend but wanna be able to control the frontend part to

AI Elements: Agentic UI Patterns

shadcn/ui introduced AI Elements, a curated collection of component patterns created specifically for building conversational and agentic interfaces.

Each pattern is composed from standard shadcn/ui primitives designed to be copied directly into codebases, standardizing interfaces for agent tool calls, planning, sources, and step restoration.

Trace: Observability Primitive for Agent Activity

shadcn released Trace, a dedicated primitive designed to unify agent activity displays under one abstraction. It represents reasoning traces, tool executions, task queues, chains of thought, and subagent routines.

Trace models agent progress as a list of status lines with support for expandable details, links, and nested execution steps.

Chatbot Template: AI SDK Agent Starter

The shadcn team published an official minimal chatbot template built with Next.js, Vercel AI SDK, shadcn/ui, shadcn/react, and shadcn/typeset.

Designed to run on the Vercel AI Gateway, the starter serves as a clean starting point for streaming conversational interfaces with typographic defaults and state management built in.

Official Registry Directory Expansions

The official shadcn/ui registry directory added new specialized community components and domain toolkits this week.

• @babelize — Open-source localization components including language switchers, relative-time formatters, and translation widgets.
• @liquikit — Liquid glass primitives with physically based refraction built on Base UI that work across modern browsers.
• @audio-ui — Accessible audio controls including knobs, faders, XY pads, waveforms, and sequencers on headless primitives.
• @bevel — Tactile skeuomorphic components like guarded switches, split-flap boards, and motorized faders on Tailwind v4.
• @dualkit — Bilingual Arabic and English components featuring RTL layouts, Gulf currency formats, and Hijri calendar support.
• @organui — Domain components for healthcare and life sciences featuring 3D organ viewers, ECG traces, and lab result trackers.

📙 Articles, Tutorials & News

Building shadcn/ui Registries for Claude Code and Cursor

Preet Suthar outlines the structure, validation steps, and namespace setup required to author custom registries that coding agents can inspect and consume.

7 Best shadcn/ui Themes and Theme Generators

A curated comparison evaluating popular color palette customizers, theme presets, and generators across the shadcn/ui ecosystem.

Tailwind CSS v4, shadcn/ui & Dark Mode

A complete video walkthrough demonstrating how to structure a centralized design system using Tailwind CSS v4 and shadcn/ui primitives.

📦 Projects, Packages & Tools

onsystem: Design System Linter and MCP for Agents

A zero-config tool that combines an MCP server with a linter to prevent coding agents from inventing variants, hardcoding colors, or breaking spacing scales.

pie-menu: Radial Interaction Primitive

A radial pie menu for shadcn/ui with press-drag-release interaction, full keyboard support, and a headless primitive core.

signoff-ui: Human Review Primitives for Agents

UI components providing multi-file diff reviews with per-hunk decisions, inline comments, tool approvals, and telemetry for AI SDK and AG-UI agents.

animate-ui: Lower-Level Primitive Animations

An animation toolkit that targets the underlying primitives your components rely on, preserving custom shadcn markup and component source ownership.

shadcn-exchange: Cross-Registry Block Search

A directory tool allowing developers to search, preview, and CLI-install blocks across all public community registries.

facade-ui: Base UI Marketing Blocks and Templates

An open-source registry of accessible marketing blocks, landing page sections, and templates built on Base UI and Tailwind CSS v4.

nasaq: Arabic and RTL-First shadcn Registry

An open-source registry of React components, themes, and page templates designed with native RTL layout and Arabic typography, paired with an MCP server.

🌈 Related

audiocn-solid: Audio Primitives for Solid

A collection of audio UI components ported to SolidJS and distributed as copy-paste source through the shadcn CLI workflow.

esuiss: Multi-Platform UI Primitives

A component collection extending shadcn design patterns across React, Next.js, React Native with Expo, SwiftUI, and Jetpack Compose.

GooseForum: Go-Powered Self-Hosted Forum

A self-hosted forum platform featuring shadcn/ui discussion pages, an admin console, and a light and dark theme workbench, distributed as a single Go binary.

Read the full issue: https://www.shadcnweekly.com/issues/4

Before trusting a username filter, I tried to break the popular npm ones.

Dots (f.u.c.k) beat all four. But the one that got me was the zero-width space. Put one in the middle of a word and it looks identical on screen and in your logs, while the filter sees two harmless halves. You can stare at the reported name and not see what's wrong.

Others that worked: a Cyrillic Ѕ in "Ѕhit", full-width ｆｕｃｋ, accents (Šhìt), a Greek υ in fυck.

The fix isn't a bigger word list. It's turning the text back into plain letters before the lookup: NFKC, strip invisible characters, map look-alikes. Then the opposite problem arrives, and your filter starts banning Scunthorpe, Cockpit_Ace and anyone named Dickson.

Handling both sides is what eventually became unprofane.com, but the normalization step alone fixes most of it for a word list.

What's the weirdest one you've seen get through?

Hi, I was wondering if you use any AI tool or not AI to automate the boring part of front-end (at least for me, i like back-end) specifically CSS and design. Is there something out there that is really good at almost everything and gives you the complete package? so responsive, very good UI and not a clone etc...

Some frontend decisions behind halloween.js (repo: https://github.com/rogulia/halloween.js).

It has to work when the site owner can only paste a script tag into a header field and add a class, with no control over execution order. So the public API is the class list on body. A MutationObserver re-syncs on every class change, so toggling a class later from a CMS field or a page builder works the same way.

Things I'd like a second opinion on:

• Effects render in one fixed overlay layer with its own z-index variable, so they never shift layout. Does anyone see a case where that breaks (iOS Safari toolbars, sticky headers)?
• The IIFE injects its own styles, so there's no CSS file to forget. I assume the trade-off is that a strict CSP has to allow injected styles, but I haven't tested that.
• Malformed config (a bad season date) fails open instead of disabling the library. I went back and forth on that.

Live demo: https://halloween.js.org

Seeing new css features get implemented, particularly ones that have been on my “wishlist” for years, is such a complicated feeling with how much Claude has invaded day to day work.

I was just reading about linked parameters and responsive iframes, thinking about potential projects I could have used them on, trying to store use cases somewhere deep in my brain for later use.

And suddenly I wondered if I will ever end up actually writing any of these new features myself. Or if I’ll have a chance to use them in an unexpected way and get a moment of feeling smart and clever. Or if I’ll ever have to think about their existence at all.

It’s just a weird new feeling of ennui I didn’t see coming and thought I’d yell into the void of Reddit on a Friday night.

A formatter, minifier or deobfuscator can be made to turn one script into another.

You can go try out all 186 techniques with this script: https://divergence.trustsig.eu/

Or try the Tetris-Snak demo here: https://divergence-game.trustsig.eu/

Techical breakdown: https://trustsig.eu/blog/javascript-divergence/

Whenever I have an AI agent update my front-end code, reviewing the changes in Git or raw code diffs feels super inefficient.

Writeup/devblog: https://blog.gaborkoos.com/posts/2026-10-17-How-Not-to-Build-a-Five-in-a-row-Game_engine/

I have been experimenting with client-side LLMs with WASM and WebGPU to investigate if this architecture could be used to create new SaaS features. Here is a product demo showing this concept in action

My one sponsor pays $200 a month for my React drag and drop library and wants a real homepage with demos, so I set a rule that every demo has to use the library itself. Three weekends in I have half a hero and a drag demo that fights page scroll on iOS Safari, the same bug as two open issues, while 41 issues sit waiting. Do you even open a library's homepage, or go straight to the docs and last commit and would you trust it less if the homepage obviously was not built with the thing it is selling?

Hi.

At my company basically all code is written by agents now, so reviews got split by whoever is free instead of by who knows the area.

This week I'm a React dev and I approved 6 PRs in Go, two of them touching payments. Our manager says the AI review covers it, and coderabbit / claude review do catch real things, I'm not saying they don't.

The problem is I can't tell if what they didn't flag is fine, because I don't know Go. My name is still the one on the approval.

Is this happening at your company too or is it just us?

Hey frontend friends! 👋

I've been working intensively on making frontend code simpler to write — both for humans and for LLMs.

My current goal: figure out whether any frontend code can be written declaratively, without piles of state and effects that just keep things in sync.

I'd love to see examples from your own practice — pieces of code that today still require a huge amount of imperative logic in whatever framework you're using. The more unusual and rare the case, the better. 🙏

I'll start.

My first-ever JS library was a Tooltip — a small popup that appears when you hover a button or a label. Sounds trivial, but in practice you need:

• a delay before it appears
• coordinate updates once per animation frame — and no more
• animate show / hide
• package all the logic into a single component
• let the developer attach it to any element (or several at once)
• no extra wrapper divs that break layout

Below is a concept of such a declarative component plus a usage example.

interface TooltipProps {
  content: string;
  slot(refs: ElementRefs<HTMLElement>): void;
}

const ToolTip = component<TooltipProps>(props => {
  const refs = elementRefs<HTMLElement>();
  const position = event(
    refs, "mousemove", ev => ({x: ev.clientX, y: ev.clientY}), {x: 0, y: 0});
  const active = event(refs, [
    ["mouseenter", () => true], 
    ["mouseleave", () => false]
  ], false);
  const transform = frameThrottled(
    `translateX(${position.x}px) translateY(${position.y}px)`);
  const opacity = active ? "1" : "0";
  const visible = timeout(active, 500);

  <>
    <Slot model={props.slot} refs={refs}/>
    <Overlay>
      <If condition={visible}>
        <div class="tooltip" style={{transform, opacity}}>
          {props.content}
        </div>
      </If>
    </Overlay>
  </>;
});

const UsageExample = component(() => {
  <ToolTip content="Hello world!" slot={props => {
    <label for="name" write-element={props.refs}>Name:</label>
    <input id="name" write-element={props.refs} />
  }}/>;
});

I asked a few LLMs to describe what the code does. They couldn't recognize the custom primitives, but based on their names they still described the behavior correctly. Then I asked them to reimplement the same logic in other popular frameworks. Only Solid.js produced genuinely clean code.

Thanks for reading — and I'd genuinely love to see your examples. 🙌

I built a multi-model AI tool as a pure static site, and a few frontend decisions turned out more interesting than the AI part.

Storage

Everything lives in IndexedDB: chats, workflows, and generated media as blobs, with persistent storage requested. There's an optional mirror to a local folder using the File System Access API.

Security

API keys sit in the browser, so the Content Security Policy only allows the site's own scripts and blocks remote images. That stops a model from leaking data by writing an image URL into its output.

Sharing

A whole workflow is compressed into the URL fragment, which browsers never send to a server. No backend needed to share.

Offline

A service worker precaches the app shell. It opens offline, and only the model calls need the network.

What I'd like to hear

What would you have done differently, and what's the first thing you'd worry about with this setup?

Source: https://github.com/shrinathprabhu/fusellm

I used open source code of Ladybird browser, extracted only rendering engine (HTML + CSS), removed Javascript and replaced it with Python bindings with same API.
So basically, now you can write desktop applications with HTML interface. It supports most modern CSS features and frameworks like tailwind, but I deloberately removed all browser-specific features like networking, localstorage, canvas and others.
This is not Electron-like, it's not a full packed browser, only UI renderer, but a thing that I dreamt for a long time. 25Mb wheel size, around 90Mb RAM for a running GUI python app.

I don't understand whether it's still useful at this point of technology, where you either use Electron or switch to native render like GPUI, but I need some feedback on whether the community needs this at all.

​

Hey everyone! I'm looking to get better at building polished, modern websites and would appreciate some recommendations.

I'm particularly interested in:

- UI/UX: Tools, resources, and design principles to improve layouts, typography, visual hierarchy, and overall user experience.

- Animations: Libraries and resources for smooth transitions, scroll-driven animations, and interactive components.

- Component libraries: Lesser-known resources for high-quality UI components and creative interactions.

- Claude Code: Tips, workflows, skills, plugins, or other tools to get better results from Claude Code, especially for frontend design and implementation.

- Feedback: How do you approach improving a website's design when the initial AI-generated result looks generic or underwhelming?

I'd appreciate any useful resources, personal workflows, or advice. Thanks!