skills.rest
AdelysAlberto
AdelysAlbertoCOMMUNITY
Explore all skills by this author →
Website𝕏@adelysalbertoGitHub

astro

Build Astro components, pages, and deployments with CLI commands and adapters.

1|Updated Jul 18, 2025
Search Tags:#deployment#components#astro#web framework#static site generation#islands architecture#ssr adapters
One-click install
npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill astro-adelysalberto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro
Source: https://github.com/AdelysAlberto/md-configs-and-agents/tree/main/agents-copilot/skills/astro
Command: npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill astro-adelysalberto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers working with the Astro web framework need accurate guidance on project structure, CLI commands, configuration, and deployment adapters without constantly searching documentation. ## Core Features & Use Cases - Project Setup & CLI Reference: Covers essential commands like npx astro dev, build, check, add, and sync, plus the standard project structure (src/pages, src/components, public/). - Component & Page Creation: Provides patterns for creating .astro pages and components, including modular architecture for large components using CSS Modules, extracted client scripts, and Astro Islands with React. - Deployment with Adapters: Step-by-step workflows for adding SSR adapters (Node.js, Cloudflare, Netlify, Vercel) and verifying build output before deployment. - Use Case: When asked to create a new Astro page or deploy a static site to Vercel, the Skill supplies the correct file structure, config options, and adapter commands. ## Quick Start Ask the AI to create a new Astro page with a reusable card component and configure the project for deployment to Netlify.

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. The file uses frontmatter between triple dashes for server-side JavaScript, followed by the HTML template.

How do I deploy an Astro site to Vercel or Netlify?▼

Run npx astro add vercel or npx astro add netlify to install the adapter, then run npx astro check and npx astro build. Verify the dist output directory exists, then deploy per the adapter documentation.

Does Astro support React components?▼

Yes, Astro supports React through islands architecture. Create a .tsx component and hydrate it in an .astro file using client directives like client:load for interactive stateful UI.

What is the Astro project structure?▼

Astro projects use src/pages for routes (required), src/components and src/layouts by convention, and public/ for unprocessed static assets. Configuration lives in astro.config.ts and tsconfig.json.

When should I split a large Astro component?▼

Split components exceeding 100-150 lines into subcomponents, extract styles to CSS Modules, and move inline scripts to separate TypeScript files. Use React islands for complex reactive state.

Related Skills

Explore More Software Engineering Skills→
vab1997vab1997
5

astro

Guides developers in building Astro components, pages, adapters, and deployments.

Community
Advanced
vallafedericovallafederico

solidstart-config

Configure SolidStart deployment presets, Vite plugins, and prerendering in app.config.ts.

Community
Intermediate
oakossoakoss
14

astro

Create content-driven websites with Astro content collections and island architecture.

Official
Intermediate
Baphomet480Baphomet480

kitchen-sink-design-system

...

Community
Advanced