Legacy Site to Astro
Four Claude Code skills for moving an old hand-written site onto Astro, in order. CSS to Tailwind converts a plain CSS or Sass stylesheet to Tailwind v4 classes as a first pass and lists what needs a manual fix. HTML to Astro Migrator then moves the Tailwind site into a new Astro 7 project with a real layout and typed components. Astro Code Doctor checks the result against the current Astro spec, and Astro i18n Setup adds multi-language routing once you need more than one language. Each skill also works on its own; the bundle costs less than buying the four separately.
Works with every agent that reads SKILL.md — Claude Code, Cursor, Codex CLI, Gemini CLI, GitHub Copilot, Windsurf, OpenClaw, and more.
One payment, lifetime access. 4 skills unlock instantly in your library.
30-day refund guarantee
Instant unlock in your library
Free updates from the creator
What's included
4 skills
Converts a plain CSS or Sass site to Tailwind v4 classes as a fast first pass, checks every class against Tailwind's own scale, and lists exactly what you still have to fix by hand.
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.
Audits Astro code for spec compliance and refactors oversized pages into typed, reusable components — three levels from quick spec fixes to full atomic-design restructuring, then verifies with a real build.
Retrofits an existing Astro site with locale routing, a translation dictionary, a language switcher, and hreflang tags — using Astro's own built-in i18n APIs, no external library required.
See it in action
CSS to Tailwind — First-Pass Converter
Example session with this skill installed
/css-to-tailwind Migrate this site's styles to Tailwind. I only want to see what converts cleanly and what I'd have to fix by hand.
- Read your context and instructions
- Compiled the css to tailwind
- Generated the app files
Sample project: a three-page cafe site (index, menu, about) with one Sass-built stylesheet, about 50 selectors, BEM naming, media queries, hover states and a few things Tailwind has no direct class for.
Conversion mode
Tool-assisted: 42 converter calls, and every result checked against Tailwind's own scale and color tables.
Migrated
| File | Selectors converted | Stylesheet | Backup |
|---|---|---|---|
| index.html | 22 | kept, 5 rules flagged | index.html.bak |
| menu.html | 19 | kept, 5 rules flagged | menu.html.bak |
| about.html | 15 | kept, 5 rules flagged | about.html.bak |
Across the three pages that is 32 selector blocks, including their hover and media-query variants and the active-link compound selector. The original Sass and CSS files are untouched.
Flagged for manual review
.menu__item + .menu__item(the divider line between menu items): sibling combinator, not converted..about__quote::before(the opening quote mark): generated content, not converted.@keyframes fade-in: no utility class.- The
animationon.notice: depends on the keyframes above; the rest of.noticewas converted. @supports (display: grid)block: not converted.
While the old stylesheet stays linked, its rules win every conflict, so the page looks right mostly because of the old CSS. To see what the Tailwind classes do on their own, comment out that link. The flagged rules then visibly change, and that is your to-do list.
What the check caught in the converter's output
| Selector | Converter said | Corrected to | Why |
|---|---|---|---|
| .container | max-w-24 | max-w-275 | max-width: 1100px; max-w-24 is 96px |
| .container | my-0 for margin: 0 auto | mx-auto | the auto horizontal margin was lost, which would break centering |
| .hero (768px and up) | py-24 | md:py-28 | padding: 112px; py-24 is 96px |
| body | text-4 | text-base | 16px; text-4 is not a font-size class |
| .site-header__logo | text-6 | text-2xl | 24px |
| .card__title | text-5 | text-xl | 20px |
| .notice, footer | text-3.5 | text-sm | 14px |
| brand colors | bg-f7f1e8, text-3b2a20 | bg-[#f7f1e8], text-[#3b2a20] | not real classes; kept as exact hex |
| .cards | grid columns unsupported | grid-cols-1 md:grid-cols-3 | standard utilities preferred over arbitrary ones |
| .menu__list | list-style unsupported | list-none | one-to-one literal match |
Most converter calls had at least one wrong or missing declaration. The check corrected them before anything reached your HTML.
Values left as arbitrary (no standard step)
Font sizes 13, 15, 32, 40 and 56px, line heights 1.2 and 1.7, letter spacing 0.08em and 0.2em, one shadow, the font stack, and eight brand colors from the Sass variables. They are listed for a visual check. One near-miss color was snapped: #fff7e6 became bg-yellow-50, flagged for confirmation.
Tailwind preflight differences
Tailwind resets browser defaults that the original CSS never set, so a page can differ slightly even where every rule converted. The report lists what applies here, with the fix.
- index.html: the hero title and the three card titles lose their default bold (add
font-bold). - menu.html: the page heading loses its default bold (add
font-bold). - All pages: the unclassed paragraph in the footer loses its top and bottom margins, and footer links lose their underline (add
my-4andunderline).
Tailwind runtime
No Tailwind build was found, so a version-pinned CDN script with an integrity hash was added to each page so the classes render right away. This is a preview convenience, not a production setup.
Before you trust this
This is a best-effort mechanical conversion. Nothing was checked in a browser by the agent. Compare the pages visually, including hover states and the md breakpoint.
css-to-tailwind-first-pass-converter-app.zip
ZIP · project files
Example file from a real run - the skill writes it into your workspace.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 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 skill in this bundle passes our trust checks.
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