How Responsive Breakpoints Are Extracted and Applied for Desktop, Tablet, and Mobile Views

The JCodesMore/ai-website-cloner-template extracts responsive breakpoints by manually inspecting layouts at 1440px, 768px, and 390px viewport widths, then applies them using Tailwind CSS responsive prefixes (lg:, md:, sm:) and the cn() utility function in generated Next.js components.

The JCodesMore/ai-website-cloner-template defines a systematic workflow for capturing and implementing responsive breakpoints when cloning websites. Rather than relying on hard-coded values, the template establishes a manual inspection process that documents layout changes at specific viewport widths and translates them into Tailwind CSS utility classes. This approach ensures that cloned sites faithfully reproduce the original responsive behavior across desktop, tablet, and mobile devices.

Extracting Responsive Breakpoints from Source Websites

The extraction phase relies on browser DevTools to identify where layout shifts occur. According to .windsurf/workflows/clone-website.md (lines 457-463), engineers examine the site at three reference widths to capture breakpoint triggers.

Manual Inspection at Reference Widths

During the inspection phase, engineers open Chrome DevTools in Responsive mode and test the layout at specific viewport widths:

• 1440px for Desktop views
• 768px for Tablet views
• 390px for Mobile views

These dimensions represent the standard breakpoints where significant layout changes typically occur, such as columns stacking into single rows or navigation menus collapsing into hamburger icons.

Capturing CSS Values with getComputedStyle

When the layout structure changes at a specific width, engineers extract the exact CSS values using getComputedStyle(). As documented in .windsurf/workflows/clone-website.md (lines 62-68), this method captures computed properties like display, flexDirection, and gridTemplateColumns at the exact breakpoint threshold.

// Run in the browser console at a given viewport width
const el = document.querySelector(".header");
const styles = getComputedStyle(el);
console.log({
  width: styles.width,
  display: styles.display,
  flexDirection: styles.flexDirection,
});

Recording Design Tokens

The captured breakpoint data is recorded as design tokens in the inspection documentation. The docs/research/INSPECTION_GUIDE.md (lines 24-26) specifies that each breakpoint must be listed under a "Breakpoints" bullet point, detailing the viewport width and the specific CSS property differences that trigger layout changes.

Applying Responsive Breakpoints in Next.js Components

Once extracted, breakpoint specifications are embedded into the Next.js codebase using Tailwind CSS's responsive prefix system.

Tailwind CSS Responsive Prefixes

The builder agent maps the three reference widths to standard Tailwind prefixes:

• lg: corresponds to ≥1440px (Desktop)
• md: corresponds to ≥768px (Tablet)
• sm: corresponds to ≤390px (Mobile)

These prefixes conditionally apply utility classes based on viewport width, eliminating the need for custom media queries in most cases.

The cn() Utility Function

The src/lib/utils.ts file exports a cn() function that serves as a thin wrapper around twMerge and clsx. This utility composes class strings containing responsive prefixes, ensuring proper class ordering and conflict resolution.

import { cn } from "@/lib/utils";

export const Card = () => (
  <section
    className={cn(
      "p-4 rounded-lg shadow-lg",          // base styles
      "lg:p-8",                            // larger padding on desktop (≥1440px)
      "md:p-6",                            // medium padding on tablet (≥768px)
      "sm:p-4"                             // small padding on mobile (≤390px)
    )}
  >
    {/* card content */}
  </section>
);

For grid layouts, the responsive prefixes control column counts across viewports:

<div className={cn(
  "grid gap-4",                     // base layout
  "lg:grid-cols-4",                 // ≥1440px: four columns
  "md:grid-cols-2",                 // ≥768px: two columns
  "sm:grid-cols-1"                  // ≤390px: single column
)}>
  {/* …components… */}
</div>

Verification Workflow

After code generation, developers verify responsive behavior by testing the application at the three reference widths (1440px, 768px, and 390px). The README.md indicates that breakpoint specifications are part of the component spec passed to builder agents. If discrepancies exist between the cloned and original sites, engineers adjust the breakpoint specifications and regenerate the components until the layouts match.

Summary

• The template uses manual inspection at 1440px, 768px, and 390px rather than hard-coded breakpoints.
• CSS values are extracted using getComputedStyle() and recorded as design tokens in docs/research/INSPECTION_GUIDE.md.
• The cn() utility in src/lib/utils.ts composes Tailwind responsive classes (lg:, md:, sm:) for Next.js components.
• Each breakpoint documents specific layout changes, such as grid column shifts or padding adjustments.
• The workflow requires verification at all three viewport widths to ensure fidelity to the original design.

Frequently Asked Questions

What specific viewport widths does the template use for breakpoint extraction?

The template specifies three reference widths documented in .windsurf/workflows/clone-website.md: 1440px for Desktop, 768px for Tablet, and 390px for Mobile. These widths represent the standard breakpoints where layouts typically transition between devices.

How does the template capture CSS properties at specific breakpoints?

Engineers use the browser's native getComputedStyle() method to extract computed CSS values at the exact viewport width where layout changes occur. This captures properties like display, flexDirection, and margin-bottom as documented in the workflow file (lines 62-68).

Why doesn't the template use hard-coded breakpoint values?

The template defines a process rather than fixed values because cloned websites may use custom breakpoints that differ from standard frameworks. By inspecting the original site manually, engineers capture the actual pixel widths where the original designer implemented responsive changes, ensuring accurate replication regardless of the source site's breakpoint conventions.

What is the purpose of the cn() utility function?

The cn() function exported from src/lib/utils.ts combines twMerge and clsx to safely compose Tailwind CSS class strings. It handles responsive prefixes like lg: and md: while resolving class conflicts, ensuring that padding, grid columns, and other responsive utilities apply correctly across viewport sizes.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}