astro-integration-authoring

Author Astro integrations as npm packages with route injection and runtime code generation.

28|1|Updated Mar 15, 2026
One-click install
npx skills add https://github.com/NauelG/astro-blocks --skill astro-integration-authoring-nauelg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-integration-authoring
Source: https://github.com/NauelG/astro-blocks/tree/main/.agents/skills/astro-integration-authoring
Command: npx skills add https://github.com/NauelG/astro-blocks --skill astro-integration-authoring-nauelg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a publishable Astro integration requires correctly implementing lifecycle hooks, injecting routes with absolute entrypoint paths, bridging consumer-defined components into package-owned routes, and declaring peer dependencies correctly — mistakes in any of these cause broken routes or version conflicts. ## Core Features & Use Cases - Lifecycle Hook Guidance: Covers astro:config:setup, astro:server:start, and astro:build:done with concrete patterns for route injection, Vite config mutation, and codegen timing. - Runtime Code Generation: Explains the .astro-blocks/ codegen pattern that writes consumer-specific runtime.mjs files so injected routes can import consumer components via a Vite alias. - Testing Patterns: Describes the playground workspace and withTempProject unit-test approach for exercising integrations end-to-end inside a real Astro project. - Use Case: You are packaging a CMS as an Astro integration and need to inject /cms admin routes, generate a component map at config time, and publish with astro as a peerDependency. ## Quick Start Ask the AI to help write src/plugin/index.ts for an Astro integration that injects an admin route and generates runtime files at config setup time.

Frequently Asked Questions about astro-integration-authoring

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I inject routes in an Astro integration?▼

Call injectRoute inside the astro:config:setup hook with a URL pattern and an absolute entrypoint path resolved via path.join against your package directory. Astro requires absolute paths and resolves routes after this hook returns.

How do Astro integrations import consumer-defined components?▼

Injected routes live inside the package and cannot statically import consumer components. Generate a runtime.mjs file in the consumer project at config setup time and map it through a Vite alias so injected routes import from the generated file.

Should astro be a dependency or peerDependency in an integration package?▼

Astro must be declared as a peerDependency so the integration uses the consumer's installed version and avoids duplicate instances. Keep it in devDependencies as well for local development and testing.

How do I test an Astro integration end-to-end?▼

Run the integration inside a real Astro project using a playground workspace for interactive verification, plus unit tests that build the package, install the tarball into a temporary consumer project, and assert on HTTP responses or generated files.

Why must code generation finish before injectRoute is called?▼

Injected routes import from generated files resolved through a Vite alias, so the files must exist on disk first. Awaiting the codegen step inside the async astro:config:setup hook guarantees the ordering.