#601

Globales Ranking · von 601 Skills

astro AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Critical

Installation

npx skills add oakoss/agent-skills --skill astro

38

Installationen

Astro

Overview

Astro is an all-in-one web framework for building fast, content-focused websites. It uses an islands architecture that ships zero JavaScript by default, hydrating only interactive components on demand. Components from React, Svelte, Vue, Solid, and Preact can coexist in a single project.

When to use: Content-driven sites (blogs, docs, marketing), portfolios, e-commerce storefronts, any site where most pages are primarily static with isolated interactive regions.

When NOT to use: Highly interactive single-page applications (dashboards, real-time collaboration tools), apps requiring full client-side routing with shared global state across all components.

Quick Reference

Pattern API / Directive Key Points
Content collection defineCollection({ loader, schema }) Zod schemas, glob/file loaders, type-safe queries
Query collection getCollection('blog') Returns typed array, supports filter callback
Single entry getEntry('blog', 'my-post') Fetch by collection name and entry ID
Island (load) <Component client:load /> Hydrate immediately on page load
Island (idle) <Component client:idle /> Hydrate when browser is idle
Island (visible) <Component client:visible /> Hydrate when component enters viewport
Island (media) <Component client:media="(max-width: 768px)" /> Hydrate on media query match
Island (client-only) <Component client:only="react" /> Skip SSR, render only on client
View transitions <ClientRouter /> Add to <head>, enables SPA-like navigation
Persist state transition:persist Maintain island state across navigations
Programmatic navigate navigate(href) Client-side navigation from scripts
Static output output: 'static' Pre-render all pages at build time (default)
Server output output: 'server' Server-render all pages on demand
Hybrid (opt-in SSR) output: 'static' + per-page prerender = false Static by default, opt individual pages into SSR
Hybrid (opt-in static) output: 'server' + per-page prerender = true SSR by default, opt individual pages into static
Server islands <Component server:defer /> Defer server rendering for dynamic content in static
Middleware onRequest(context, next) Runs before every route, chain with sequence()
Astro DB table defineTable({ columns }) Type-safe SQL with column definitions
Framework component Import .jsx / .svelte / .vue Auto-detected by file extension
Integration astro add react CLI to add framework adapters and tools
Render content const { Content } = await entry.render() Compile Markdown/MDX to component
Dynamic routes getStaticPaths() + collection query Generate pages from collection entries
API endpoint export const GET: APIRoute Server-rendered REST endpoints
Shared island state nanostores Reactive state across framework boundaries
Environment variables import.meta.env.PUBLIC_* PUBLIC_ prefix for client-accessible vars
Transition animation transition:animate="slide" initial, fade, slide, none
Prefetch links data-astro-prefetch hover, viewport, load, or false
Collection reference reference('authors') Type-safe cross-collection relations
Script re-execution data-astro-rerun Re-run <script> on every view transition navigation
Redirect context.redirect(url, status) Redirect from middleware or server pages

Common Mistakes

Mistake Correct Pattern
Adding client: directive to .astro components Only UI framework components (React, Svelte, Vue) accept client:
Using client:load everywhere Default to client:idle or client:visible; use client:load sparingly
Forgetting framework string with client:only Must specify framework: client:only="react"
Mixing framework components in non-Astro files Only .astro files can compose components from multiple frameworks
Using output: 'server' for mostly static sites Use output: 'static' with per-page prerender = false for hybrid
Omitting <ClientRouter /> for view transitions Must be in <head> of every page (use shared layout)
Content config not at src/content.config.ts File must be named content.config.ts in src/ root
Not awaiting getCollection() calls Always await collection queries in frontmatter
Importing from astro:content in client scripts Content APIs are server-only; pass data as props to client components
Placing middleware outside src/middleware.ts Middleware must be at src/middleware.ts or src/middleware/index.ts
Passing functions as props to islands Only serializable data crosses the server/client boundary
Using transition:persist without matching pages Component must appear on both old and new page with same persist value
Missing adapter for server/hybrid mode Install an adapter: npx astro add vercel (or node, netlify, etc.)

Delegation

  • Pattern discovery: Use Explore agent
  • Build configuration: Use Task agent
  • Code review: Delegate to code-reviewer agent

If the tailwind skill is available, delegate styling and Tailwind CSS configuration to it.
If the vitest skill is available, delegate unit testing patterns to it.
If the playwright skill is available, delegate end-to-end testing patterns to it.
If the vite skill is available, delegate build configuration and Vite plugin setup to it.
If the drizzle skill is available, delegate advanced database query patterns to it.
If the sentry skill is available, delegate error monitoring and observability setup to it.
If the pino-logging skill is available, delegate server-side logging configuration to it.
If the tanstack-query skill is available, delegate client-side data fetching and caching to it.

References

Installationen

Installationen 38
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Critical
Warnungen: 1 Bewertung: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

So verwenden Sie diesen Skill

1

Install astro by running npx skills add oakoss/agent-skills --skill astro in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für astro, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Kundensupport