No. 002 · recommended
Astro Development
Content collections, islands, and rendering modes, used correctly
Astro’s whole pitch is that pages ship zero JavaScript by default —
which means the most common bug report is “this component doesn’t do
anything when I click it,” and the answer is almost always a missing
client: directive, not a real bug. This skill puts that diagnosis
first, along with a working decision table for which directive to
reach for (client:load, client:idle, client:visible,
client:media, client:only) instead of defaulting to client:load
everywhere out of caution.
It also covers the Content Layer API correctly for current Astro
versions — collections live in src/content.config.ts at the project
root, not buried in src/content/, and the glob loader has its own
small set of gotchas around schema validation and slug generation that
are easy to misdiagnose as the loader being broken.
Rendering modes (static, server, hybrid) and the handful of
configuration values that quietly break SEO if they’re missing — the
site field in particular — round out the rest.
This is the same skill used to build this directory.
When it triggers
- creating an Astro page or layout
- defining or querying a content collection
- a component isn't interactive
- choosing static, server, or hybrid rendering