astrolisted

This skill enforces Astro 6+ static-first conventions. The rule: render to static HTML by default, ship JavaScript only where there is real interactivity, and pick the lightest hydration directive that works. Apply only when the project uses `astro ^6.0` or higher. If `package.json` pins an older major, **STOP** and ask before applying. ## Core principles - **Default to zero JS**. Astro components render to HTML at build (or request) time and ship no JS. Adding `client:*` to a component opts into hydration—do it deliberately. - **Pick the lightest `client:*` that works**. The directive is a hydration trigger, not a rendering choice. - **Server islands (`server:defer`)** for personalized content within an otherwise static page. Use this instead of switching the whole page to SSR. - **Content Collections** for typed markdown/MDX content. Do not hand-roll glob imports for blogs/docs. ## client:* hierarchy Pick the first directive that fits, top to bottom: | Directive | When to use | JS cost | |---|---|---| | (none) | Pure presentational HTML/CSS | 0 | | `client:visible` | Interactive but below the fold (footer widgets, late-page forms) | Loaded on viewport intersection | | `client:idle` | Interactive but not critical (search, login) | Loaded after page idle | | `client:media="(...)"` | Only on certain viewports (mobile menu) | Loaded conditionally | | `client:load` | Above-the-fold interactive (live counter, top-nav search) | Loaded eagerly, blocks | | `client:only="<frame