Design & UX Skill
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns…
$15
Responsive Design
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and…
Modern responsive design implemented the way 2026 browsers actually work: container queries, fluid typography with clamp(), intrinsic CSS Grid, and a true mobile-first breakpoint strategy. Instead of brittle device-pixel breakpoints and 100vh mobile bugs, it builds layouts that adapt to their content and container, ship zero layout shift, and stay readable and tappable on every screen. One codebase, every device, no separate mobile build.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Design & UX
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
Breakpoints belong where the content breaks, not where devices happen to be. Layouts start at 320px, scale with fluid formulas and container queries, and reserve space so nothing ever jumps.
- Starts mobile-first at 320px with min-width queries only, then layers enhancements at the sm/md/lg/xl breakpoints, instead of designing for desktop and shrinking it down.
- Places breakpoints where the content actually breaks, not at device sizes: the card grid wraps when cards run out of width, the menu collapses to a hamburger when items start to overlap.
- Makes components self-adaptive with container queries: the same card stacks inside a narrow sidebar and goes side by side in the main column, reacting to its parent width regardless of viewport.
- Replaces breakpoint font jumps with fluid clamp() scales, so typography and spacing interpolate smoothly between 320px and 1440px from a single formula instead of dozens of hand-tuned values.
- Reserves space before anything loads to keep CLS under 0.1: explicit image width and height, ad-slot min-heights, aspect-ratio placeholders and font fallback metrics so the layout never jumps.
- Ships responsive media and patterns: srcset/sizes with art-directed picture sources, an accessible hamburger navigation, and data tables that scroll horizontally or reflow into cards on mobile.
One power source. 6 lines out.
responsive-design · core
core active · 6 lines
- ✓ building component-level…
Building component-level responsiveness with container queries, not viewport hacks
- ✓ replacing breakpoint jumps
Replacing breakpoint jumps with fluid type and spacing via clamp()
- ✓ creating intrinsic grids
Creating intrinsic grids with auto-fit and minmax() that wrap by content
- ✓ fixing the 100vh mobile-…
Fixing the 100vh mobile-browser bug with dynamic viewport units (dvh)
- ✓ setting content-first br…
Setting content-first breakpoints based on where the layout actually breaks
- ✓ preventing layout shift
Preventing layout shift (CLS) with reserved space and aspect-ratio discipline
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
Maintains one responsive codebase instead of a separate mobile site or app
license: perpetual -
Protects Core Web Vitals by eliminating layout shift and slow mobile loads
license: perpetual -
Keeps content readable and touch targets tappable (44px minimum) on small screens
license: perpetual -
Adapts components correctly even when reused across sidebar, hero, and main areas
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
Mobile-first breakpoint scale with Tailwind equivalents
6 parts · one working system · ships instantly by email
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
Front-end developers and teams who want adaptive interfaces that look right on every screen and protect Core Web Vitals from a single codebase.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
My codebase is Tailwind, does this translate directly?
Yes, the mobile-first breakpoint scale ships with Tailwind equivalents and the container query patterns include React/Tailwind examples. The same patterns are also given in plain CSS, so non-Tailwind projects use them as-is.
-
What do container queries give me that media queries don't?
The component responds to its container instead of the viewport, so the same card renders correctly in a sidebar, a hero, and the main column without three breakpoint forks. Add cqi units and content-first breakpoints, set where the layout actually breaks, and you stop chasing device widths.
-
Will it retrofit my existing site automatically?
No. It is a set of patterns and a strategy you apply: the clamp() utility, intrinsic grid recipes, dvh fixes, and CLS-prevention rules. Nothing scans or rewrites your existing CSS for you.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.