Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseOpenClawOpenClaw+21 more

    HTML to Astro Migrator

    1

    Migrates a static HTML + Tailwind site into a new Astro 7 project, extracting layouts and typed components, converting images to <Image />, and porting or rewriting your JS, without touching the original.

    $9

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned
    HTML to Astro Migrator

    HTML to Astro Migrator

    Example session with this skill installed

    /html-to-astro ./loop-thread-en-demo

    • Read your context and instructions
    • Compiled the html to astro
    • Generated the image

    Tailwind check: found (@import "tailwindcss", Tailwind v4) — OK to migrate.

    Analysis: 2 pages (index.html, about.html). No header/footer shared by both, so Layout.astro gets the <head> skeleton only. Repeated inline blocks: 3 category cards, 4 product cards, 4 supply-chain rows. JS: src/main.ts only registers 2 Lucide icons (Simple). 8 images in public/images/.

    Where should the new Astro project be created? → loop-thread-en-demo-astro (sibling)
    How should the existing JavaScript be migrated? → Rewrite (Astro-native)

    Scaffolded from the Astro 7 + Tailwind v4 starter (with sharp and a CLAUDE.md of Astro/Tailwind rules), then ported:

    ---
// src/pages/index.astro (excerpt)
import ProductCard from "@/components/ProductCard.astro";
import productTee from "@/assets/images/product-raw-cotton-tee.webp";

const products = [
  { image: productTee, alt: "Folded beige organic cotton T-shirt on a white background",
    name: "Raw Cotton Classic Tee", price: "¥6,800", material: "100% Organic Cotton" },
  // + 3 more
];
---
<ul class="grid w-full list-none grid-cols-1 gap-fig-25 sm:grid-cols-2 lg:grid-cols-4">
  {products.map((product) => <li><ProductCard {...product} /></li>)}
</ul>

    HTML → Astro Migration Results

    Pages migrated

    SourceNew route
    index.htmlsrc/pages/index.astro
    about.htmlsrc/pages/about.astro

    Layout & components extracted

    • Layout.astro: <head> skeleton with title / description / lang props, the source's Inter font (replacing the starter's font, not merged)
    • SiteHeader.astro, SiteFooter.astro: nav links now data-driven
    • CategoryCard.astro (×3), ProductCard.astro (×4), EmissionRow.astro (×4): typed interface Props, rendered from data arrays

    JavaScript

    Mode: Rewrite. lucide + createIcons() → @lucide/astro components. No client-side JS left.

    Images

    8 images moved to src/assets/ and converted to <Image /> with responsive widths/sizes; the hero loads eagerly with fetchpriority="high". Largest image: 141 kB → 47 kB. favicon.svg stays in public/.

    Flagged for manual review

    • about.html is placeholder content (lorem ipsum, lang="ja" on English text). Ported, but the copy needs rewriting.
    • public/icons.svg is not referenced by any page. Kept; safe to delete.

    Project docs

    CLAUDE.md: the starter's Typography section described its placeholder font, so it was corrected to Inter and the project's named font-weight tokens. The source's own sections (glob-based Vite multi-page build, createIcons registration) no longer apply under Astro, so they were not carried over. DESIGN.md copied as-is.

    astro-doctor (light)

    No issues. astro check: 0 errors, 0 warnings, 0 hints.

    Build

    ✓ success (2 pages, 24 optimized image variants). The source project was not modified.

    html-to-astro-migrator.png

    PNG · 1536×1024

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Convert static HTML mockups into component-based Astro projects.Extract shared headers and footers into reusable Astro layouts.Automate image optimization by switching to the Astro Image component.Transition from Tailwind CDN setups to native Vite-based builds.

    About this skill

    Moving a hand-built HTML site to Astro is rarely a rename. The value of Astro is its component model, image pipeline and content collections, and a mechanical port gets none of that: you end up with the same copy-pasted cards and unoptimized images, just in .astro files. This skill rebuilds the site the way you would if you started in Astro, and leaves the original project untouched.

    What it does

    • Scaffolds a new Astro 7 + Tailwind v4 project next to the original, from a starter that already includes sharp and a CLAUDE.md of Astro and Tailwind rules
    • Diffs pages to find shared blocks: markup on every page goes into Layout.astro, blocks on some pages or repeated within a page become typed components
    • Moves images into src/assets and converts them to Astro's <Image /> with responsive widths
    • Rewrites simple JavaScript as component-scoped, Astro-native code, or ports complex scripts as-is; you choose. CDN frameworks like Alpine.js or htmx are kept intact
    • Carries over your Tailwind @theme tokens and font setup, and drops a Tailwind Play CDN script in favor of a real build while keeping its config
    • Offers to model structurally identical pages as a content collection
    • Merges your CLAUDE.md with the starter's and corrects any starter section that no longer matches the migrated code
    • Builds the project and fixes errors before reporting, with anything ambiguous flagged for manual review

    How it works

    1. Confirms the source uses Tailwind (build, package.json or CDN)
    2. Analyzes pages, shared blocks, scripts, images, fonts and project docs
    3. Asks where to create the new project and how to handle JavaScript
    4. Scaffolds the new project and ports layout, components, pages and images
    5. Optionally runs astro-doctor (light) if you have it installed, then builds and reports

    What it is not

    It doesn't convert plain CSS or Sass to Tailwind: a source without Tailwind is stopped with a pointer to migrate first. It is a fast, structured on-ramp to Astro rather than a guarantee: unusual scripts or layouts are flagged for you to review instead of being force-migrated.

    Requirements

    Node.js with pnpm, npm, yarn or bun. Network access to download the public starter template and packages. The source must already use Tailwind CSS (v3 or v4, build or CDN).

    Works well with

    Astro Code Doctor (optional final spec check) and Astro i18n Setup (add languages once you're on Astro). All three are also available together as the Astro Toolkit bundle at a lower price: https://www.agensi.io/bundles/astro-toolkit-html-migration-code-check-i18n

    More from KMRVID

    The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 4 days ago

    • Passed all security checks, Safe to install

    Listed4 days ago
    Updated3 days ago

    What's inside

    Frequently Asked Questions