Run any Skill in Manus with one click

astro

Stars0

Forks0

UpdatedApril 21, 2026 at 15:40

Skill for building with the Astro web framework. Helps create Astro components and pages, configure SSR adapters, set up content collections, deploy static sites, and manage project structure and CLI commands. Use when the user needs to work with Astro, mentions .astro files, asks about static site generation (SSG), islands architecture, content collections, or deploying an Astro project.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

brandonjjon

brandonjjon/astro-starter-cf

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	astro
description	Skill for building with the Astro web framework. Helps create Astro components and pages, configure SSR adapters, set up content collections, deploy static sites, and manage project structure and CLI commands. Use when the user needs to work with Astro, mentions .astro files, asks about static site generation (SSG), islands architecture, content collections, or deploying an Astro project.
license	MIT
metadata	{"authors":"Astro Team","version":"0.0.1"}

Astro Usage Guide

Always consult docs.astro.build for code examples and latest API.

Astro is the web framework for content-driven websites.

Quick Reference

File Location

CLI looks for astro.config.js, astro.config.mjs, astro.config.cjs, and astro.config.ts in: ./. Use --config for custom path.

CLI Commands

npx astro dev - Start the development server.
npx astro build - Build your project and write it to disk.
npx astro check - Check your project for errors.
npx astro add - Add an integration.
npx astro sync - Generate TypeScript types for all Astro modules.

Re-run after adding/changing plugins.

Project Structure

Reference project structure docs.

src/* - Project source code (components, pages, styles, images, etc.)
src/pages - Required. Defines all pages and routes.
src/components - Components (convention, not required).
src/layouts - Layout components (convention, not required).
src/styles - CSS/Sass files (convention, not required).
public/* - Non-code, unprocessed assets (fonts, icons, etc.); copied as-is to build output.
package.json - Project manifest.
astro.config.{js,mjs,cjs,ts} - Astro configuration file. (recommended)
tsconfig.json - TypeScript configuration file. (recommended)

Core Config Options

Option	Notes
`site`	Your final, deployed URL. Used to generate sitemaps and canonical URLs.

Example `astro.config.ts`

import { defineConfig } from 'astro/config';

export default defineConfig({
	site: 'https://example.com',
});

Common Workflows

Creating a Basic Page

Add a file to src/pages/ — the filename becomes the route:

---
// src/pages/index.astro
const title = 'Hello, Astro!';
---

<html>
	<head><title>{title}</title></head>
	<body>
		<h1>{title}</h1>
	</body>
</html>

Creating a Component

---
// src/components/Card.astro
const { title, body } = Astro.props;
---

<div class="card">
	<h2>{title}</h2>
	<p>{body}</p>
</div>

Deploying with an Adapter

Add the adapter: npx astro add vercel --yes (or node, cloudflare, netlify)
Run npx astro check to catch type and configuration errors before building.
Run npx astro build to produce the deployment artifact.
Verify the build output directory (e.g. dist/) exists and is non-empty before proceeding.
Deploy the output per the adapter's documentation.

Adapters

Deploy to your favorite server, serverless, or edge host with build adapters. Use an adapter to enable on-demand rendering in your Astro project.

Add Node.js adapter using astro add:

npx astro add node --yes

Add Cloudflare adapter using astro add:

npx astro add cloudflare --yes

Add Netlify adapter using astro add:

npx astro add netlify --yes

Add Vercel adapter using astro add:

npx astro add vercel --yes

Other Community adapters

Resources

More from this repository

same repository

bun

brandonjjon/astro-starter-cf

Use when building JavaScript/TypeScript applications, setting up HTTP servers, managing dependencies, bundling code, running tests, or working with full-stack applications. Bun is a complete JavaScript runtime, package manager, bundler, and test runner that replaces Node.js, npm, and other tools.

2026-04-210

cloudflare-deploy

brandonjjon/astro-starter-cf

Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.

2026-04-210

cloudflare

brandonjjon/astro-starter-cf

Comprehensive Cloudflare platform skill covering Workers, Pages, storage (KV, D1, R2), AI (Workers AI, Vectorize, Agents SDK), networking (Tunnel, Spectrum), security (WAF, DDoS), and infrastructure-as-code (Terraform, Pulumi). Use for any Cloudflare development task. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

2026-04-210

playwright-best-practices

brandonjjon/astro-starter-cf

Use when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, testing accessibility (axe-core), file uploads/downloads, date/time mocking, WebSockets, geolocation, permissions, multi-tab/popup flows, mobile/responsive layouts, touch gestures, GraphQL, error handling, offline mode, multi-user collaboration, third-party services (payments, email verification), console error monitoring, global setup/teardown, test annotations (skip, fixme, slow), test tags (@smoke, @fast, @critical, filtering with --grep), project dependencies, security testing (XSS, CSRF, auth), performance budgets (Web Vitals, Lighthouse), iframes, component testing, canvas/WebGL, service workers/PWA, test coverage, i18n/localization, Electron apps, or browser extension testing. Covers E2E, component, API, visual, accessibility, security, Electron, and extension testing.

2026-04-210

tailwind-css-patterns

brandonjjon/astro-starter-cf

Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

2026-04-210

typescript-advanced-types

brandonjjon/astro-starter-cf

Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.

2026-04-210

name	astro
description	Skill for building with the Astro web framework. Helps create Astro components and pages, configure SSR adapters, set up content collections, deploy static sites, and manage project structure and CLI commands. Use when the user needs to work with Astro, mentions .astro files, asks about static site generation (SSG), islands architecture, content collections, or deploying an Astro project.
license	MIT
metadata	{"authors":"Astro Team","version":"0.0.1"}

Astro Usage Guide

Always consult docs.astro.build for code examples and latest API.

Astro is the web framework for content-driven websites.

Quick Reference

File Location

CLI looks for astro.config.js, astro.config.mjs, astro.config.cjs, and astro.config.ts in: ./. Use --config for custom path.

CLI Commands

npx astro dev - Start the development server.
npx astro build - Build your project and write it to disk.
npx astro check - Check your project for errors.
npx astro add - Add an integration.
npx astro sync - Generate TypeScript types for all Astro modules.

Re-run after adding/changing plugins.

Project Structure

Reference project structure docs.

src/* - Project source code (components, pages, styles, images, etc.)
src/pages - Required. Defines all pages and routes.
src/components - Components (convention, not required).
src/layouts - Layout components (convention, not required).
src/styles - CSS/Sass files (convention, not required).
public/* - Non-code, unprocessed assets (fonts, icons, etc.); copied as-is to build output.
package.json - Project manifest.
astro.config.{js,mjs,cjs,ts} - Astro configuration file. (recommended)
tsconfig.json - TypeScript configuration file. (recommended)

Core Config Options

Option	Notes
`site`	Your final, deployed URL. Used to generate sitemaps and canonical URLs.

Example `astro.config.ts`

import { defineConfig } from 'astro/config';

export default defineConfig({
	site: 'https://example.com',
});

Common Workflows

Creating a Basic Page

Add a file to src/pages/ — the filename becomes the route:

---
// src/pages/index.astro
const title = 'Hello, Astro!';
---

<html>
	<head><title>{title}</title></head>
	<body>
		<h1>{title}</h1>
	</body>
</html>

Creating a Component

---
// src/components/Card.astro
const { title, body } = Astro.props;
---

<div class="card">
	<h2>{title}</h2>
	<p>{body}</p>
</div>

Deploying with an Adapter

Add the adapter: npx astro add vercel --yes (or node, cloudflare, netlify)
Run npx astro check to catch type and configuration errors before building.
Run npx astro build to produce the deployment artifact.
Verify the build output directory (e.g. dist/) exists and is non-empty before proceeding.
Deploy the output per the adapter's documentation.

Adapters

Deploy to your favorite server, serverless, or edge host with build adapters. Use an adapter to enable on-demand rendering in your Astro project.

Add Node.js adapter using astro add:

npx astro add node --yes

Add Cloudflare adapter using astro add:

npx astro add cloudflare --yes

Add Netlify adapter using astro add:

npx astro add netlify --yes

Add Vercel adapter using astro add:

npx astro add vercel --yes

Other Community adapters

astro

Astro Usage Guide

Quick Reference

File Location

CLI Commands

Project Structure

Core Config Options

Example astro.config.ts

Common Workflows

Creating a Basic Page

Creating a Component

Deploying with an Adapter

Adapters

Resources

More from this repository

Astro Usage Guide

Quick Reference

File Location

CLI Commands

Project Structure

Core Config Options

Example astro.config.ts

Common Workflows

Creating a Basic Page

Creating a Component

Deploying with an Adapter

Adapters

Resources

More from this repository

Example `astro.config.ts`

Example `astro.config.ts`