Work on Astro pages, components, and static-site patterns with strict static-first rules, explicit validation, and minimal client JavaScript.
Use this skill when the task touches Astro pages, components, layouts, routing, or site structure.
---
const sections = [
{ title: 'Fast to load', body: 'Static content keeps hosting simple.' },
{ title: 'Easy to maintain', body: 'Content lives in one place.' },
{ title: 'Predictable output', body: 'The build always produces the same page shape.' },
];
---
<main class="page-shell">
<header class="hero">
<p class="eyebrow">Astro static site</p>
<h1>Build pages that stay simple to deploy.</h1>
<p>Use Astro markup first, then add interactivity only when the request truly needs it.</p>
</header>
<section class="feature-grid" aria-label="Benefits">
{sections.map((section) => (
<article class="feature-card">
<h2>{section.title}</h2>
<p>{section.body}</p>
</article>
))}
</section>
</main>
Why this is good:
---
import SearchFilters from '../components/SearchFilters.tsx';
---
<main>
<section>
<h1>Browse resources</h1>
<p>Use a static page shell, then isolate the filter controls.</p>
</section>
<SearchFilters client:visible />
</main>
Why this is good:
client:visible boundary is explicit and minimal.---
import { useState } from 'react';
---
<script>
// unnecessary page-wide scripting for content that could be static
</script>
<main>
<!-- page shell, but the whole thing now depends on client behavior -->
</main>
Why this is bad: