astro

Create Astro components, configure static site generation, and manage content collections.

Updated Oct 7, 2025
One-click install
npx skills add https://github.com/JP-Cano/personal-portfolio --skill astro-jp-cano
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: astro
Source: https://github.com/JP-Cano/personal-portfolio/tree/main/frontend/.agents/skills/astro
Command: npx skills add https://github.com/JP-Cano/personal-portfolio --skill astro-jp-cano

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps solve the problem of creating modern, full-stack web applications efficiently using the Astro web framework, providing a streamlined way to develop, deploy, and maintain static sites and applications.

Core Features & Use Cases

  • Component Creation: Generate Astro components and pages for building dynamic and reusable web elements.
  • Static Site Generation (SSG): Configure and use SSG to pre-render pages for improved performance and SEO.
  • Content Collections: Manage content collections for a structured and maintainable site structure.
  • Deployment: Deploy static sites and applications with various hosting providers.
  • CLI Commands: Utilize a variety of CLI commands to streamline development processes, such as astro dev, astro build, and astro check.

Quick Start

To create a new page, navigate to src/pages/ and add a new file with the desired filename, which will become the route for that page.

Frequently Asked Questions about astro

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

FAQPage Schema
How do I create a new page with the Astro framework?

To create a new page in Astro, navigate to the `src/pages/` directory and add a new file with your desired filename. The filename automatically becomes the route for that page.

What is static site generation and how does it work in Astro?

Static site generation in Astro pre-renders your pages at build time to produce static HTML. This mechanism improves website performance and SEO by serving pre-built files instead of dynamically generating content.

How do I manage structured content using content collections in Astro?

Astro content collections let you manage structured content by defining schemas and organizing files within your project. This provides a maintainable site structure and validated content queries for your static pages.

Can I use Astro for full-stack web application development?

Yes, Astro is built for creating modern, full-stack web applications efficiently. It supports islands architecture and component creation, allowing you to build dynamic web elements while leveraging static site generation.

What CLI commands do I need to build and check an Astro project?

Astro CLI commands streamline development processes. Use `astro dev` to run the local development server, `astro build` to generate static output, and `astro check` to diagnose project issues.

What is the best way to deploy a static site generated by Astro?

Astro allows you to deploy static sites and applications with various hosting providers. Running the `astro build` command generates the pre-rendered output directory, which you can upload to your chosen hosting platform.