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.