Menu
Use when working with Astro, .astro files, static site generation (SSG), islands architecture, content collections, or deploying Astro projects.
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.
Manages shadcn-vue components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-vue, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn-vue init", "create an app with --preset", or "switch to --preset".
Use when asked to improve accessibility, run a11y audit, ensure WCAG compliance, add screen reader support, fix keyboard navigation, or make content accessible.
Use when picking or translating named effects like soft blur in, typewriter, shared axis, line reveal, stagger, crossfade, or kinetic builds.
Apply modern web development best practices for security, compatibility, and code quality. Use when the task involves `apply best practices`, `security audit`, `modernize code`, `code quality review`, or `check for vulnerabilities`.
Use when improving Core Web Vitals, fixing LCP, reducing CLS, optimizing INP, or addressing page experience optimization.
| name | astro |
| description | Use when working with Astro, .astro files, static site generation (SSG), islands architecture, content collections, or deploying Astro projects. |
| license | MIT |
| metadata | {"authors":"Astro Team","version":"0.0.1"} |
Always consult docs.astro.build for code examples and latest API.
Astro is the web framework for content-driven websites.
CLI looks for astro.config.js, astro.config.mjs, astro.config.cjs, and astro.config.ts in:
./. Use --config for custom path.
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.
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)| Option | Notes |
|---|---|
site | Your final, deployed URL. Used to generate sitemaps and canonical URLs. |
astro.config.tsimport { defineConfig } from 'astro/config';
export default defineConfig({
site: 'https://example.com',
});
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>
---
// src/components/Card.astro
const { title, body } = Astro.props;
---
<div class="card">
<h2>{title}</h2>
<p>{body}</p>
</div>
npx astro add vercel --yes (or node, cloudflare, netlify)npx astro check to catch type and configuration errors before building.npx astro build to produce the deployment artifact.dist/) exists and is non-empty before proceeding.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