#frontend
Every summary, chronological. Filter by category, tag, or source from the rail.
Bulletproof 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.
Agentic Design Systems: Figma to Claude Code Metadata
Structure Figma components with props, relationships, tokens, and anti-patterns as queryable metadata using Claude Code + Figma MCP, enabling AI agents to generate accurate Storybook components without hallucinations.
AI Summaries (evaluation playlist)9 Free Tools to Pro-Up AI Vibe Designs
Escape AI-generated UI blandness with 9 free tools: Open Design for styled prompts, Refero Styles' 2,000+ systems, Impeccable Style's 23 commands, and drop-in libraries like Cult UI and Untitled UI.
Motion.dev: GPU Animations with Springs and Independent Transforms
Motion.dev uses a hybrid engine blending WAAPI's GPU performance with JS capabilities for springs, sequencing, and SVG support, via a 2.3KB animate function in JS/React/Vue.
AI Summaries (evaluation playlist)TSRX Enables Native JS Flow in UI Components
TSRX compiles linear JS code with ifs, for-of loops, try-catch into JSX for React, Solid, Vue, Preact, Ripple—boosting readability via statement-based rendering without returns, while hoisting hooks and adding scoped styles.
GSAP Drives WebGL Shaders via Single Progress Uniform
Bridge GSAP timelines to WebGL shaders using one progress uniform (0-1) for stateless, reusable animations: control block reveals, warps, and aberrations in video carousels, flowmaps, and text scrambles without GLSL changes.
Build Reactive Multi-Page Web Apps with NiceGUI in Python
NiceGUI lets you create full web apps with shared state, routing, real-time charts, CRUD todos, validated forms, file uploads, and async chat using pure Python—no JS or HTML needed.
Recreate CSS Battles 251-253 in 15min with Divs, Shadows, Borders
Kevin Powell solves CSS Battles 251-253 live under time pressure: stacked divs/pseudos (5:40, 100%), ring shadows (4:16, 99.9%), rotated border diamond + cap circles. Measure precisely, center with margin-inline:auto, use body/html pseudos for overlays.
Local-First Web Apps: Client DBs, Sync, Conflicts
Shift to local-first by storing user data in client SQLite via WASM/OPFS, sync via CRDTs or replication (PowerSync), resolve conflicts at field-level with LWW—ideal for offline collab but skip for server-gen data.
AI Studio's Visual Upgrades Make Vibe Coding Iterative
Tab Tab Tab autocompletes prompts, design previews steer themes early, and edit mode enables direct UI tweaks—turning AI Studio into a visual app builder for fast prototypes.
Rafa Conde: Delight Through Surprise and Humanity
Design engineer Rafa Conde reveals how to craft memorable software via surprise moments, video storytelling, humor, and calculated risks—balancing delight against drop-offs, as seen in Retro's onboarding and his side projects.
Dive ClubUse Range Syntax to Fix Media Query Overlap Bugs
Replace min/max-width media queries with range syntax like (width <= 300px) to prevent elements from both hiding at shared breakpoints, improving readability and avoiding offset hacks.
AI Design Workflow: Claude, Codex, Stitch + Figma Stack
AI accelerates design from ideation to production UI via a multi-tool workflow—Claude for accurate code, Codex for token efficiency, Stitch for quick mobile layouts, Figma for refinements—not a single dream tool.
Claude Code: Build 20% Converting Lead-Gen Sites
Use Claude Code in Anti-Gravity to generate no-code landing pages with 14 proven elements, dynamic personalization, testing, and automation for 10x average conversions without writing code.
Jono CatliffImpeccable's Workflow Makes AI Sites Look Custom, Not Generic
Impeccable equips AI like Claude with design expertise via teach-shape-craft-iterate commands, spotting 37 anti-patterns to avoid generic gradients and safe typography, building a full Astro/Tailwind landing page in 5 minutes.
Better StackResilient LLM Streaming: Jitter, Breakers, 90s Checks
After 50k AI page generations, boost streaming success from 92% to 99%+ by treating networks as foes: jittered backoff stops thundering herds, 90s health checks catch silent stalls, circuit breakers prevent self-DOS.
Fairies: AI Agents as Canvas Collaborators
Embed AI agents as draggable 'fairies' on tldraw's infinite canvas to draw diagrams, coordinate tasks via leader delegation, and execute code directly in a local desktop app for full interactivity.
CSS Grid: Scrollers, Auto-Grids, Adaptive Layouts
Build horizontal scrollers with grid-auto-flow: column + snap; prevent auto-grid overflow via minmax(min(300px, 100%), 1fr); adapt sidebars using container queries at 500px width.
Kevin PowellImpeccable Workflow: Words → Pictures → Code for Unique AI Sites
Impeccable in Claude Code uses teach-shape-visualize-craft to build branded landing pages with GPT Image 2 visuals, avoiding generic AI designs by prioritizing design before code.
Master DESIGN.md for AI Design Workflows
Google's DESIGN.md standardizes portable design systems for AI tools like Claude Design and Code, enabling inspiration-to-production landing pages without prompt drift or rebuilding.
AI Summaries (evaluation playlist)Penpot Fixes Dev Handoffs with Real CSS Output
Penpot builds designs on actual CSS, Flexbox, Grid, SVG, and HTML, so devs inspect and copy clean code directly—no Figma translation needed, cutting handoff friction dramatically.
Better StackTanStack Server Components: Opt-In Granularity Beats Next.js
Use renderServerComponent in server functions to render React components on the server granularly, like fetching JSON. Composite components with slots keep client boundaries clean without 'use client' directives.
Better StackClaude Design + Seedance 2.0 Workflow for Animated Sites
Start with composition-planned hero image from NanoBanana Pro on Higgsfield, mockup and iterate variants/tweaks in Claude Design, animate subtly with Seedance 2.0, handoff zip to Claude Code for dev server—costs ~$5 extra usage for full page.
Claude Design: Iterate UIs Fast Without Token Burn
Claude Design excels at visual iteration via tweaks and variants for web apps/slides, getting you to 90% UI readiness before exporting to code—far faster than Claude Code's text prompts, if you manage its heavy usage limits.
Embed Interactive HTML Textures in Canvas Scenes
HTML in Canvas renders live, interactive DOM elements as GPU textures in WebGL or 2D canvases, solving canvas's text/layout issues while preserving HTML's accessibility and performance.
Better StackClaude Design: Repo-to-UI in Minutes
Scan any repo to auto-generate a design system as HTML/CSS assets and docs, then one-shot high-fidelity pages like pricing with voice/DOM edits, exporting to code agents or Canva/PDF.
Showing 30 of 88