Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseOpenClawOpenClaw+21 more

    Astro Code Doctor

    1

    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.

    $9

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned
    Astro Code Doctor

    Astro Code Doctor

    Example session with this skill installed

    Run astro-doctor on src/pages/ with medium level to clean up my index page and extract any repeated cards.

    • Read your context and instructions
    • Compiled the astro code doctor
    • Generated the UI component

    I have analyzed the files in src/pages/ using the medium optimization level. I identified several spec violations and opportunities for component extraction.

    Optimization Plan (level: medium)

    Doc source: AstroDocs MCP

    src/pages/index.astro

    • [fix] Remove export default (line 12) — not valid in .astro files
    • [extract] Hero section (lines 15–40) → new component: src/components/HeroSection.astro
    • [extract] FeatureCard repeated ×4 (lines 55–80) → src/components/FeatureCard.astro with Props { title, description }
    • [refactor] Replace space-y-6 with flex flex-col gap-6 (Tailwind v4)

    src/components/Header.astro

    • [fix] <nav> missing ul > li structure around navigation links
    • [refactor] Move repeated link classes to *: on parent ul

    src/content/blog/first-post.mdx

    • [fix] Frontmatter field author_name not defined in schema — should be author
    • [fix] <InteractiveButton /> used without client:visible — currently static HTML

    Next steps

    1. Confirm if you want to apply all changes or only the [fix] items.
    2. I will create the new component files and update the imports.
    3. I will run a build check to verify the refactor.

    astro-code-doctor.tsx

    TSX · React component

    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

    Fix Astro spec violations and hydration directive errors automatically.Extract duplicated HTML blocks into reusable Astro components with typed props.Update Tailwind spacing utilities to modern v4 gap patterns.Validate MDX frontmatter against Zod schemas to prevent build breakages.

    About this skill

    Astro code generated quickly — by an AI agent or a human moving fast — tends to drift from spec over time and pile up as monolithic pages instead of reusable components. Catching this manually means re-reading every file against changing Astro conventions, which nobody has time to do consistently.

    What it does

    • Checks spec compliance: invalid export default in .astro files, missing client:* hydration directives, Tailwind v4 class naming (space-y-* to gap-*, flex-shrink/flex-grow to shrink/grow), img tags that should use the Image component, deprecated z imports in MDX/MD content collections, and basic accessibility structure (nav > ul > li, button text, input labels)
    • Extracts components at medium and deep levels: repeated inline HTML blocks, page-level monoliths with no component imports, and inconsistent granularity across files
    • Restructures with an atomic-design lens at the deep level: atoms, molecules, organisms, and proper slot composition, including the Header/Footer-belongs-in-Layout rule
    • Looks up current Astro documentation (via the Astro Docs MCP or Context7 when available) for the handful of things it is not fully certain about, rather than relying only on built-in knowledge
    • Always shows the full optimization plan before touching anything, and builds the project afterward to confirm nothing broke

    How it works

    1. Collects every .astro, .tsx, .ts, .mdx, and .md file in the given scope
    2. Analyzes each file across spec compliance, component granularity, and (deep only) architecture
    3. Queries live Astro documentation for the most uncertain findings
    4. Displays a structured, file-by-file plan with severity labels and asks how to proceed: apply everything, spec fixes only, file-by-file, or cancel
    5. Applies the confirmed changes, then runs the project's build command and fixes any resulting errors before reporting

    What it is not

    This is a code reviewer and refactorer, not a linter you wire into CI — it runs interactively, shows its plan, and waits for confirmation before changing anything. It does not add new features or content; it restructures and corrects what is already there.

    Requirements

    Works on any Astro project. Uses the Astro Docs MCP or Context7 MCP for up-to-date documentation lookups when either is available in the agent — falls back to built-in Astro knowledge otherwise, so neither is required to run it.

    More from KMRVID

    The full Claude Code skill bundle for web design and Astro workflows, including the companion astro-i18n skill, 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