Claude Code Plugins

Community-maintained marketplace

Feedback

astro-developer

@Wattysaid/agent-skills
0
0

|

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name astro-developer
description Build and customize websites, blogs, and web applications using Astro. Use this skill when you need to scaffold Astro projects, select and apply starter templates or themes, implement layouts and components, configure content collections and routing, integrate CSS frameworks or JavaScript libraries, add UI framework integrations, create API endpoints, optimize and deploy builds, or troubleshoot Astro-specific issues. Includes working with Astro's theme library (blog, e-commerce, landing pages, portfolios, documentation) and adapting templates to project requirements.

Building Astro Websites

Overview

Astro is a modern front-end framework and static site generator that emphasizes performance by shipping minimal JavaScript. It supports content-rich sites, blogs, portfolios, and complex web applications. You can start from an empty project or choose from hundreds of community-built templates. Astro uses file-based routing, supports Markdown/MDX content, and integrates UI libraries like React, Svelte, or Vue.

Use the references below to keep this skill concise while preserving full coverage. Load only what is needed for the task at hand.

Quick Start

  1. Scaffold a new project: npm create astro@latest.
  2. Run the dev server: npm run dev.
  3. Build for production: npm run build.

References

  • references/overview-and-setup.md - Overview, prerequisites, project creation, dev server, and TypeScript path setup.
  • references/templates-and-layouts.md - Theme selection, scaffolding from templates, layouts, components, and slots.
  • references/styling.md - Classless CSS and Tailwind setup.
  • references/content-routing.md - File-based routing, dynamic routes, Markdown/MDX, content collections.
  • references/integrations.md - UI framework integrations and client hydration.
  • references/endpoints.md - API routes and server endpoints.
  • references/deployment.md - Build outputs and adapters (Netlify, Vercel, Cloudflare, Node, static).
  • references/examples.md - Practical scenarios and snippets.
  • references/troubleshooting.md - Common issues and fixes.
  • references/resources.md - External docs and reference links.
  • references/project-structure.md - Repo-specific layout, folders, and conventions.
  • references/stack-conventions.md - Tech stack notes and coding conventions.
  • references/component-library.md - Component templates and usage examples.
  • references/component-index.md - Curated index of recommended components.
  • references/component-usage.md - Production usage notes and Vue island integration.
  • references/tabler-guidelines.md - Tabler icon usage rules and validation.
  • references/skill-authoring-notes.md - Skill authoring guidance preserved from the original content.
  • references/tabler-icons.txt - Full list of valid Tabler icon names (generated by script).
  • references/tabler-icons-curated.txt - Validated and corrected icon list from a project input list.