#frontend
Every summary, chronological. Filter by category, tag, or source from the rail.
Exploring CSS Functions and Conditional Logic
CSS is evolving to support custom functions and conditional logic, allowing developers to create reusable, dynamic styles that reduce boilerplate and improve developer experience.
Kevin PowellBuilding Scroll-Driven AI Animations for Web
Create high-end, scroll-triggered interactive web experiences by combining AI-generated video assets with frame-by-frame control in Claude Code.
UI CollectiveUsing CSS Style Queries for Conditional Theming
CSS style queries allow components to adapt their appearance based on parent-defined custom properties, enabling cleaner, conditional theming without relying on manual modifier classes or JavaScript.
Kevin PowellWhy MCP and ChatGPT Apps Use Double Iframes
To securely render third-party UI, ChatGPT uses a double-iframe pattern: an outer iframe provides a sandboxed environment on a unique subdomain, while an inner iframe uses 'srcdoc' to render the app, preventing cross-origin storage access and CSP violations.
AI EngineerBuilding Apple-Style Websites with Claude Code and AI Video
A practical workflow for creating high-end, interactive landing pages by combining AI-generated imagery, video frame extraction, and local development via Claude Code.
Designing and Building with AI: A Designer’s Frontend Workflow
A practical look at how designers can own the frontend by using AI agents as a force multiplier, leveraging tools like Conductor and Paper to bridge the gap between visual exploration and production-ready code.
Smart Layout Patterns with Modern CSS
Modern CSS container queries and style queries offer a more robust, component-aware alternative to traditional media queries, enabling truly intrinsic and responsive layouts that adapt to their parent containers rather than just the viewport.
Smashing MagazineBuilding Agent-Ready Websites with WebMCP
WebMCP is a proposed web standard that allows developers to expose site functionality as structured tools for AI agents, replacing brittle screen-scraping with direct, reliable API-like interactions.
Building Interactive 3D Websites with Claude Code
Learn a practical workflow for building high-end, 3D-interactive websites by combining Claude Code, Higgsfield AI for assets, and Vercel for deployment.
UI CollectiveBuilding Interactive UIs in VS Code with MCP Apps
MCP Apps allow developers to render interactive, sandboxed UIs directly within AI chat interfaces by returning a resource reference alongside data, enabling rich experiences like flame graphs or checkout flows without leaving the IDE.
AI EngineerAutomating Cross-Device Testing with Chrome DevTools MCP
Use the Chrome DevTools MCP server to give coding agents the ability to emulate real-world user conditions—like location, viewport size, and network speed—to autonomously test responsive UI and interaction bugs.
Chrome for DevelopersThree Essential CSS Layout Primitives
Kevin Powell shares three reusable CSS patterns—Stack, Prose, and Pile—that simplify layout management by using flexbox and grid primitives with customizable spacing variables.
Kevin PowellAndy Madrick: Owning the Last Mile of Design in the AI Era
Designers should stop treating Figma as the ultimate source of truth and start owning the final 10-20% of frontend polish in code, using AI to bridge the gap between design intent and production reality.
Dive ClubBeyond Chat: Building Agentic Interfaces as Infinite Canvases
Chat is the terminal of the agent era. To build truly usable AI software, developers should use MCP apps to render rich, interactive UI directly within agent interfaces, treating the web as an infinite canvas rather than a document reader.
AI EngineerSupercharging AI Coding Workflows with Chrome DevTools
Chrome DevTools for agents provides coding assistants with direct access to browser runtime data, enabling autonomous debugging, performance auditing, and automated testing through a standardized NPM package.
Chrome for DevelopersModern Web UI: New CSS and Browser Primitives
The web platform is evolving to support high-quality, native-feeling experiences through new CSS functions like contrast-color(), element-scoped view transitions, and improved accessibility primitives.
Building AI-Powered Web Apps with Chrome's Built-in APIs
Chrome's built-in AI APIs (Summarizer, Prompt, Writer, Rewriter, Translator) enable privacy-focused, offline-capable AI features directly in the browser, eliminating server costs and latency for common content tasks.
Chrome for DevelopersAgentic Debugging in Chrome DevTools with Gemini
Chrome DevTools now features agentic AI assistance that autonomously gathers page context, performs performance traces, and provides actionable, concise debugging insights with transparent, step-by-step walkthroughs.
Streamlining Chrome Extension Development with AI and New Tooling
Chrome is enhancing the extension developer experience by introducing granular dashboard permissions, cross-browser namespace support, AI-driven coding skills, and automated debugging via MCP servers.
Bridging the AI Knowledge Gap with Modern Web Guidance
Chrome's 'Modern Web Guidance' provides an expert-vetted, locally-installed skill set for AI coding agents, enabling them to recommend modern, performant web features over legacy patterns while respecting project-specific browser support requirements.
Building Interactive UIs with the HTML-in-Canvas API
The HTML-in-Canvas API allows developers to render DOM elements directly into Canvas, WebGL, or WebGPU textures while maintaining full browser accessibility, interactivity, and integration features.
Vibe Design: Building Web UIs with CSS and AI Agents
Vibe Design is a workflow that collapses design and development by using CSS vocabulary as a shared language for AI agents to generate production-ready, performant UI components.
Fixing Iframe Transparency Issues on Dark-Mode Sites
Chrome extension iframes often render a white background on dark-mode sites because the browser defaults to a light color-scheme. Setting 'color-scheme: light dark' or 'only light' on the iframe's root element forces the browser to respect your intended transparency.
5 Underrated CSS Properties for Better UI Control
Improve your CSS layouts and typography with these five practical properties: counters for auto-numbering, user-select for interaction control, tabular-nums for data alignment, multi-column for responsive text, and advanced text-decoration styling.
Solving Element Anchoring with the CSS Anchor Positioning API
The CSS Anchor Positioning API provides a robust, native way to tether elements like tooltips to dynamic anchors, replacing fragile absolute positioning hacks that break when elements resize or move.
Smashing MagazineBulletproof CSS Color Systems with contrast-color()
Use contrast-color() to auto-pick white or black text for any background, combined with private custom properties for fallbacks and color-mix() for dynamic hovers that adapt to light/dark modes.
Kevin PowellShopify Shop's Big Design Bets: Vision, AI, Craft
Katarina Batina explains how Shopify's Shop app thrives by prioritizing bold visions like low-density feeds and AI prototypes over strict metrics, fostering delight through cross-functional craft sprints.
Dive ClubStitch: Google's Free AI for Stunning UIs, No Design Needed
Google Labs' Stitch generates responsive, production-ready UIs from natural language prompts, exports HTML/Tailwind CSS, and integrates with agents like Gemini CLI—perfect for backend devs prototyping fast.
Google Cloud TechCSS Experts Google Basics, New Features Eat JS's Lunch
Even CSS pros look up list-style-type and view transition pseudo-elements; declarative CSS like anchor positioning and scroll-driven animations handles states JS once owned, reducing code and complexity.
CSS In-N-Out: Animating display:none with 3-2-1 Pattern
Pure CSS animations for elements entering/exiting DOM (e.g., dialogues from display:none) use transition-behavior: allow-discrete, @starting-style, and 3-2-1 source order: out styles first, then open, then in styles last.
Showing 30 of 113