Project structure

HolyStitch writes a complete, ready-to-run project to the output directory you specify. Nothing is left for you to scaffold — every config file, component, page, and stylesheet is generated from the source HTML.

Full directory tree

Next.js
Vite

my-app/
├── components/
│   ├── TopNavBar.tsx          ← shared across all pages
│   ├── Footer.tsx             ← shared across all pages
│   ├── HeroSection.tsx
│   ├── PricingCard.tsx
│   └── ...
├── app/
│   ├── layout.tsx             ← root layout with Google Fonts
│   ├── globals.css            ← Tailwind directives + custom CSS
│   ├── page.tsx               ← route: /
│   ├── changelog/
│   │   └── page.tsx           ← route: /changelog
│   └── pricing-plan/
│       └── page.tsx           ← route: /pricing-plan
├── stitch-source/             ← original HTML kept for reference
│   ├── Home.html
│   ├── Changelog.html
│   └── PricingPlan.html
├── tailwind.config.js         ← your exact Stitch theme
├── next.config.js
├── package.json
├── tsconfig.json
├── postcss.config.js
├── .gitignore
└── project-context.md         ← routing table + AI fix checklist

my-app/
├── src/
│   ├── components/
│   │   ├── TopNavBar.tsx
│   │   ├── Footer.tsx
│   │   ├── HeroSection.tsx
│   │   └── ...
│   ├── pages/
│   │   ├── Home.tsx           ← route: /
│   │   ├── Changelog.tsx      ← route: /#/changelog
│   │   └── PricingPlan.tsx    ← route: /#/pricing-plan
│   ├── App.tsx                ← hash-based router
│   ├── main.tsx               ← ReactDOM.createRoot entry point
│   └── index.css              ← Tailwind directives + custom CSS
├── stitch-source/
│   ├── Home.html
│   └── ...
├── tailwind.config.js
├── package.json
├── tsconfig.json
├── postcss.config.js
├── .gitignore
└── project-context.md

Route mapping

The first screen in your Stitch project always maps to /. Every subsequent screen is converted to a lowercase, hyphenated route derived from its name:

Screen name	Route
`Home` (first screen)	`/`
`Changelog`	`/changelog`
`Pricing Plan`	`/pricing-plan`
`404 Page`	`/404-page`

In Next.js, this creates app/<route>/page.tsx files using the App Router. In Vite, the same screens become src/pages/<ScreenName>.tsx and are registered in src/App.tsx using hash-based routing (/#/changelog).

Config files

`tailwind.config.js`

Contains the Tailwind theme.extend block extracted directly from your Stitch HTML — colors, font families, dark mode configuration, and any plugins. If Stitch embedded a theme config in the HTML, it is reproduced exactly. If no config was found, HolyStitch falls back to the default Tailwind theme and notes it in project-context.md.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      // your extracted Stitch colors, fonts, etc.
    },
  },
  plugins: [],
};

When converting multiple screens, HolyStitch checks for conflicting color token values across screens. If two screens define the same token with different values, a warning is written to project-context.md. Reconcile conflicts in tailwind.config.js using stitch-source/ as the reference.

`next.config.js`

A minimal Next.js config with no opinionated defaults. Extend it as needed after conversion.

/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = nextConfig;

`tsconfig.json`

A standard TypeScript config targeting ES2017, with strict mode enabled, bundler module resolution, and the next plugin registered. Path aliases include @/* mapped to the project root.

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "strict": true,
    "noEmit": true,
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "incremental": true,
    "paths": { "@/*": ["./*"] }
  }
}

`postcss.config.js`

Minimal PostCSS config that enables tailwindcss and autoprefixer.

module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };

`app/layout.tsx` — Google Fonts via `next/font/google`

HolyStitch scans every screen’s <head> for Google Fonts <link> tags and converts them to next/font/google imports in app/layout.tsx. This avoids the CSS @import pattern that triggers a Next.js performance warning. Each font family becomes a named import. Font weights are extracted from the Google Fonts URL query string:

import type { Metadata } from 'next';
import './globals.css';

import { Inter } from 'next/font/google';
const interFont = Inter({ subsets: ["latin"], weight: ["400", "500", "700"], display: "swap" });

export const metadata: Metadata = {
  title: 'Stitch App',
  description: 'Generated from Google Stitch',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={`${interFont.className}`}>{children}</body>
    </html>
  );
}

Icon fonts (Material Symbols, Material Icons) cannot be loaded via next/font/google. HolyStitch keeps these as @import url(...) in globals.css regardless of other font settings.

If dark mode is set to "class" in the Stitch theme, the <html> element receives className="dark" automatically.

`app/globals.css` — Tailwind + custom CSS + icon fonts

globals.css (Next.js) or src/index.css (Vite) is assembled in this order:

Tailwind directives (@tailwind base, @tailwind components, @tailwind utilities)
Icon font @import statements (Material Symbols, etc.) — always present as CDN imports
Custom CSS extracted from <style> blocks in the Stitch HTML <head>

Any Google Fonts @import lines from the original HTML are stripped when Next.js font optimization is active — next/font/google in layout.tsx handles them instead.

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

/* Custom CSS extracted from Stitch <head> */
.custom-scrollbar { scrollbar-width: thin; }

`stitch-source/` directory

Every screen’s original HTML is written verbatim to stitch-source/<ScreenName>.html before any transformation. The file names are sanitised (non-alphanumeric characters replaced with underscores) to ensure they are safe across operating systems. This directory is the single source of truth for the AI post-conversion workflow. When a generated component has broken JSX or missing content, the AI reads the corresponding stitch-source/ file directly to reconstruct it accurately.

Do not delete stitch-source/. It is deliberately committed alongside the generated code so any AI working on the project in a future session can still verify its output against the original designs.

`project-context.md`

project-context.md is a Markdown handoff file written after the project files so the AI agent can resume work in a new session without losing context. It contains:

Routing table — every route mapped to its page file path, root components, and source HTML file
Shared components list — component names that appear on two or more screens, written once and imported everywhere
Structural warnings — any issues the converter detected (unclosed tags, low-similarity component name collisions, Tailwind color conflicts)
Fix checklist — 9 ordered steps the AI works through to complete the conversion (see Post-conversion checklist)
Source HTML reference — a lookup table mapping each screen name to its stitch-source/ file

# Stitch → React Conversion — Agent Handoff

| Route | File | Root Components | Source HTML |
|-------|------|-----------------|-------------|
| /     | app/page.tsx | TopNavBar, HeroSection, Footer | stitch-source/Home.html |
| /changelog | app/changelog/page.tsx | TopNavBar, ChangelogList, Footer | stitch-source/Changelog.html |

## Shared Components (appear on multiple pages)

- `components/TopNavBar.tsx`
- `components/Footer.tsx`

The file is written last, after all component and page files, so its component and page counts are always accurate.

Get Started

Configuration

How It Works

Output

Contributing

Full directory tree

Route mapping

Config files

`tailwind.config.js`

`next.config.js`

`tsconfig.json`

`postcss.config.js`

`app/layout.tsx` — Google Fonts via `next/font/google`

`app/globals.css` — Tailwind + custom CSS + icon fonts

`stitch-source/` directory

`project-context.md`

​Full directory tree

​Route mapping

​Config files

​tailwind.config.js

​next.config.js

​tsconfig.json

​postcss.config.js

​app/layout.tsx — Google Fonts via next/font/google

​app/globals.css — Tailwind + custom CSS + icon fonts

​stitch-source/ directory

​project-context.md

Full directory tree

Route mapping

Config files

`tailwind.config.js`

`next.config.js`

`tsconfig.json`

`postcss.config.js`

`app/layout.tsx` — Google Fonts via `next/font/google`

`app/globals.css` — Tailwind + custom CSS + icon fonts

`stitch-source/` directory

`project-context.md`