Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
Manus
Grok
Grok Bot+18 agentsHTML to Astro Migrator
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
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
| Source | New route |
|---|---|
| index.html | src/pages/index.astro |
| about.html | src/pages/about.astro |
Layout & components extracted
Layout.astro:<head>skeleton withtitle/description/langprops, the source's Inter font (replacing the starter's font, not merged)SiteHeader.astro,SiteFooter.astro: nav links now data-drivenCategoryCard.astro(×3),ProductCard.astro(×4),EmissionRow.astro(×4): typedinterface 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.htmlis placeholder content (lorem ipsum,lang="ja"on English text). Ported, but the copy needs rewriting.public/icons.svgis 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.
index.html
PNG · 1536×1024
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
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
- Confirms the source uses Tailwind (build, package.json or CDN)
- Analyzes pages, shared blocks, scripts, images, fonts and project docs
- Asks where to create the new project and how to handle JavaScript
- Scaffolds the new project and ports layout, components, pages and images
- 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
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Frontend & Web Apps.
Requires a source that already uses Tailwind CSS. Complex JavaScript (state machines, custom routing) is ported as-is or flagged rather than rewritten. Unusual layouts may need manual review after migration. The migrated project uses Astro 7 and Tailwind v4.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 1 month ago
- Accounts
GitHub
- Software
- tiged
Node.js
Permissions
Allowed Hosts
File Scopes
Reads the source HTML project (HTML, CSS, scripts, public assets, package.json, CLAUDE.md/BRIEF.md) without modifying it, and writes a new Astro project into a new sibling directory. Network access is only for downloading the public starter template (github.com/gaspanik/astro7-tailwind4-starter via npx tiged) and installing npm packages; the terminal runs those commands plus git init and the build. No environment variables or credentials are read.