1. Habit
  2. Skills
  3. Astro Framework skill
delineas · 2K installs

Astro Framework skill
Runs by itself, Astro pull request.

Astro pages ship only needed JavaScript.

Install the Astro Framework skill and make it a habit: follow https://gethabit.dev/skills/delineas/astro-framework.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

2K installs47 starsMIT licenceSource on GitHub ↗

Astro Framework

by delineas · 2K installs

The skill

The astro framework skill helps web developers build fast content sites with Astro islands: hydration directives, server islands, Content Layer loaders, SSR adapters, sessions, actions and i18n.

Only when you ask.

The habit

Astro pages ship only needed JavaScript.

↻ Runs by itselfAstro pull request

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

Astro pull request. Runs in GitHub Actions or Claude Code routine.

  • ↻ Astro pull request
  • pull_request touches .astro files or astro.config.mjs

02

It checks its work

build and rules pass. If a check fails, it tells you.

  • ✓the Astro build passes
  • ✓no client:only without a framework
  • ✓no new src/content/config.ts; collections use loaders in src/content.config.ts
  • ✓no functions passed as props to server:defer components

03

It remembers

hydration findings log. The next run reads it first: components flagged before and the output mode in use.

loops/astro-hydration-review-loop/run-log.md

One run, step by step.
Then it stops.

Stop ruleStops after one pull request per run.

  1. 01

    List directives

    Collect client:* and server:defer uses in the change.

  2. 02

    Apply the tree

    Decide static, server island or client island for each component.

  3. 03

    Check common mistakes

    Flag client:visible on above-the-fold parts and hydrated navbars that need only a script.

  4. 04

    Check content

    Confirm glob or file loaders, Zod from astro/zod and schema validation.

  5. 05

    Check images and env

    Confirm Image or Picture with imports and astro:env for variables.

  6. 06

    Build

    Run the build and log findings.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Astro Framework skill helps.

Use it when

  • ✓ You build an Astro component
  • ✓ You choose a client directive
  • ✓ You set up content collections

Skip it when

  • – You build a full SPA
  • – You use Next.js or SvelteKit

Questions

Astro Framework skill, answered.

Which output mode should I use?

The skill favors static, hybrid for mostly static sites with some dynamic routes, and server only when most pages need request data.

When is Astro the wrong choice?

For full SPAs, heavy real-time collaboration or apps that are entirely behind auth.

How do I install the Astro Framework skill?

Copy the prompt at the top into your agent. It installs the skill from delineas/astro-framework-agents and sets up the habit. Or run npx skills add delineas/astro-framework-agents --skill astro-framework.

Is the Astro Framework skill free?

Yes. It is published under MIT. Habit is free too.

Astro Framework. Now as a habit.

Install the Astro Framework skill and make it a habit: follow https://gethabit.dev/skills/delineas/astro-framework.md

  • Free
  • No account
  • Undo in one line

All delineas skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by delineas, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.