astro

Create Astro components, pages, and SSR adapter configurations for content-driven websites.

Updated Mar 24, 2026
One-click install
npx skills add https://github.com/samline/forms --skill astro-samline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro
Source: https://github.com/samline/forms/tree/main/example/.agents/skills/astro
Command: npx skills add https://github.com/samline/forms --skill astro-samline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building content-driven websites with Astro requires knowing its file-based routing, component syntax, CLI commands, and deployment adapters, and this Skill provides that operational guidance in one place. ## Core Features & Use Cases - Project Scaffolding Guidance: Explains Astro project structure, required src/pages directory, and configuration file locations. - Component and Page Creation: Shows how to write .astro pages with frontmatter and reusable components using Astro.props. - SSR Adapter Deployment: Covers adding Node, Cloudflare, Netlify, and Vercel adapters via npx astro add and verifying build output. - Use Case: A developer needs to deploy an Astro blog to Cloudflare with on-demand rendering; the Skill walks through adding the adapter, running astro check, building, and verifying the dist output. ## Quick Start Ask the AI to create a new Astro page and configure the Cloudflare adapter for deployment.

Frequently Asked Questions about astro

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

FAQPage Schema
How do I create a page in Astro?▼

Add a .astro file to the src/pages directory and the filename becomes the route. Write JavaScript or TypeScript in the frontmatter block at the top, then use HTML with expressions like {title} in the template below.

How to deploy an Astro site with SSR?▼

Add a deployment adapter with npx astro add, choosing from node, cloudflare, netlify, or vercel. Then run npx astro check to catch errors, run npx astro build, and verify the output directory exists before deploying.

What is the required directory structure for an Astro project?▼

The src/pages directory is required because it defines all pages and routes. Conventional but optional directories include src/components, src/layouts, and src/styles, while public holds unprocessed assets copied as-is to the build output.

Does Astro support TypeScript configuration files?▼

Yes, the Astro CLI looks for astro.config.js, astro.config.mjs, astro.config.cjs, and astro.config.ts in the project root. You can also pass a custom path with the --config flag, and npx astro sync generates TypeScript types for Astro modules.

Why should I re-run astro sync after adding integrations?▼

Running npx astro sync regenerates TypeScript types for all Astro modules, so type definitions stay accurate after adding or changing plugins. Skipping it can cause stale types and confusing editor errors.