How the Component Spec File Template Captures Multi-State CSS Values

The component spec file template captures multi-state CSS values by forcing each UI element into its interactive states and responsive breakpoints, then recording the exact computed styles from the browser's getComputedStyle() API into structured JSON sections.

The AI Website Cloner template generates comprehensive component specifications for every UI element discovered during website inspection. These spec files, stored in docs/research/components/, serve as the single source of truth for builder agents that reconstruct the design. The component spec file template captures multi-state CSS values through a systematic two-step inspection process that ensures pixel-perfect fidelity across all interactive states.

State-Aware DOM Probing

The inspection process begins with state-aware DOM probing, where the inspection agent systematically forces each component into every relevant interactive state.

Forcing Interactive States

While walking the page, the inspection agent triggers click, hover, focus, and active events on each component. This manipulation forces the browser to apply state-specific CSS rules that would normally only appear during user interaction. The agent captures these states sequentially, ensuring that temporary or event-driven styles are fully computed and visible to the extraction engine.

Responsive Breakpoint Testing

The probing phase also includes responsive breakpoint testing. The agent resizes the viewport to trigger media queries at defined break points (sm, md, lg, xl), capturing how component styles adapt to different screen dimensions. This ensures the spec file contains the complete picture of how a button, navigation link, or card behaves on mobile versus desktop displays.

Exact Style Extraction with getComputedStyle

For every forced state, the template performs exact style extraction using the browser's native getComputedStyle() API. This method provides the final computed values after all CSS cascade, inheritance, and specificity rules have been applied.

Because getComputedStyle() returns the resolved values directly from the browser's rendering engine, the spec captures all inherited and cascade-resolved values including color, font-family, spacing, and box-model properties. It also records state-specific overrides such as background-color changes on :hover or outline additions on :focus, and responsive values like font-size adjustments at specific breakpoints.

Structured State Organization in Spec Files

The component spec file template organizes these computed values into clearly labeled JSON sections. According to the repository's README, the system writes detailed spec files containing "exact getComputedStyle() values, interaction models, multi-state content, responsive breakpoints, and asset paths" (see README.md lines 92-96).

Default State Baseline

Each spec file establishes a default state baseline that contains the complete set of computed CSS properties for the component at rest. This baseline serves as the reference point for all subsequent state comparisons.

Delta-Based State Storage

To maintain concise yet complete specifications, the template stores only the properties that differ from the default state in each subsequent section. A typical spec file structure looks like this:

{
  "component": "Button",
  "states": {
    "default": {
      "backgroundColor": "#1e293b",
      "color": "#f8fafc",
      "padding": "0.5rem 1rem",
      "borderRadius": "0.25rem"
    },
    "hover": {
      "backgroundColor": "#334155"
    },
    "focus": {
      "outline": "2px solid #6366f1"
    },
    "active": {
      "backgroundColor": "#0f172a"
    }
  },
  "responsive": {
    "sm": {
      "padding": "0.4rem 0.8rem"
    },
    "lg": {
      "padding": "0.6rem 1.2rem"
    }
  }
}

The responsive section mirrors this pattern, organizing values by breakpoint key (sm, md, lg) rather than interaction state.

Implementation in Builder Agents

Builder agents consume these JSON sections to generate code that faithfully reproduces the original design. As documented in the pipeline description, each builder agent receives the full component specification inline, guaranteeing that every state's CSS is reproduced faithfully (see README.md lines 96-97).

The generated components typically use the cn() utility from src/lib/utils.ts to merge class strings conditionally based on the state values. For example, a HeaderNavLink component generated from spec data might look like this:

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

export function HeaderNavLink({ 
  children, 
  state 
}: { 
  children: React.ReactNode; 
  state: 'default' | 'hover' | 'active' 
}) {
  const base = "transition-colors duration-200";
  const stateClasses = {
    default: "text-slate-600 no-underline",
    hover: "text-slate-800 underline",
    active: "text-slate-900 font-semibold",
  };
  
  return (
    <a className={cn(base, stateClasses[state])}>
      {children}
    </a>
  );
}

This approach ensures that the visual output in src/components/ui/button.tsx and other generated files matches the exact getComputedStyle() values captured during inspection, eliminating guesswork about hover states or responsive behavior.

Summary

• The component spec file template uses a two-step inspection process combining state-aware DOM probing with exact style extraction.
• getComputedStyle() captures final computed values including inherited, cascade-resolved, and state-specific CSS properties.
• Spec files organize values under sections like default, hover, focus, active, and breakpoint-<size>, storing only deltas to keep files concise.
• Builder agents consume these specifications to generate Tailwind utility classes or inline styles that mirror the original design pixel-for-pixel.
• The workflow is documented in README.md and implemented through files like src/lib/utils.ts and src/components/ui/button.tsx.

Frequently Asked Questions

What is a component spec file template?

A component spec file template is a standardized JSON structure generated by the AI Website Cloner that records every visual and interaction property of a UI element. It serves as the single source of truth for builder agents, containing computed CSS values, responsive breakpoints, and asset paths. These files live in docs/research/components/ and enable automated reconstruction of web interfaces.

How does getComputedStyle capture multi-state values?

The getComputedStyle() API returns the final computed CSS values after the browser has applied all stylesheets, inline styles, and state-specific pseudo-class rules. When the inspection agent forces a component into its :hover or :focus state, the browser recalculates the computed styles, which getComputedStyle() then captures. This ensures the spec file records exactly what the browser renders, not just what the CSS declares.

Where are component spec files stored?

Component spec files are stored in the docs/research/components/ directory within the JCodesMore/ai-website-cloner-template repository. Each discovered UI element receives its own spec file, which the builder agents reference when generating the final React components and Tailwind classes.

How do builder agents use multi-state CSS values?

Builder agents parse the state sections of the spec file to generate conditional styling logic. They map the captured CSS values to Tailwind utility classes or inline styles, ensuring components display the correct visual state when users hover, focus, or click. The agents receive the full specification inline, allowing them to implement exact visual fidelity across all interactive states.

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