global-tech-stack
Use Astro's modern web development stack including TypeScript, Tailwind CSS, Content Collections, islands architecture, and performance-first deployment practices. Use this skill when selecting technologies, configuring integrations, choosing deployment platforms, or making architectural decisions about the tech stack. When working on Astro configuration and integrations setup, choosing between SSG/hybrid/SSR rendering modes, selecting UI frameworks for interactive islands (React, Vue, Svelte), configuring Tailwind CSS or styling solutions, setting up Content Collections for type-safe content, choosing deployment adapters (Vercel, Netlify, Cloudflare), configuring testing tools (Vitest, Playwright), implementing performance optimization strategies, or adding third-party integrations and plugins.
When & Why to Use This Skill
This Claude skill provides comprehensive guidance for architecting and configuring modern web applications using the Astro framework. It assists developers in making critical technical decisions regarding rendering modes (SSG, SSR, or hybrid), UI framework integration (React, Vue, Svelte), and performance-first deployment strategies. By leveraging best practices for TypeScript, Tailwind CSS, and islands architecture, it ensures the creation of high-performance, type-safe, and scalable web projects.
Use Cases
- Tech Stack Selection: Choosing the optimal combination of UI frameworks, styling solutions, and deployment platforms for a new Astro project.
- Rendering Strategy Optimization: Deciding between Static Site Generation (SSG), Server-Side Rendering (SSR), or hybrid rendering to balance performance and dynamic functionality.
- Islands Architecture Implementation: Integrating interactive components from React, Vue, or Svelte into Astro's lightweight HTML structure.
- Type-Safe Content Management: Setting up Astro Content Collections with Zod schemas to ensure rigorous data validation and improved developer experience.
- Deployment and CI/CD Configuration: Selecting and configuring deployment adapters for platforms like Vercel, Netlify, or Cloudflare, and establishing testing workflows with Vitest and Playwright.
| name | Global Tech Stack |
|---|---|
| description | Use Astro's modern web development stack including TypeScript, Tailwind CSS, Content Collections, islands architecture, and performance-first deployment practices. Use this skill when selecting technologies, configuring integrations, choosing deployment platforms, or making architectural decisions about the tech stack. When working on Astro configuration and integrations setup, choosing between SSG/hybrid/SSR rendering modes, selecting UI frameworks for interactive islands (React, Vue, Svelte), configuring Tailwind CSS or styling solutions, setting up Content Collections for type-safe content, choosing deployment adapters (Vercel, Netlify, Cloudflare), configuring testing tools (Vitest, Playwright), implementing performance optimization strategies, or adding third-party integrations and plugins. |
Global Tech Stack
This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle global tech stack.
When to use this skill
- When configuring Astro integrations in astro.config.mjs
- When choosing between static (SSG), hybrid, or server (SSR) rendering modes
- When selecting UI frameworks for interactive components (React, Vue, Svelte, etc.)
- When setting up Tailwind CSS or other styling frameworks
- When configuring Content Collections with Zod schemas for type-safe content
- When choosing deployment platforms (Vercel, Netlify, Cloudflare Pages, Node.js)
- When setting up testing infrastructure (Vitest for unit tests, Playwright for E2E)
- When implementing performance optimizations (image optimization, code splitting)
- When adding analytics, SEO, authentication, or i18n integrations
- When making decisions about package managers (pnpm, npm) or build tools
- When configuring TypeScript strict mode and linting/formatting tools
Instructions
For details, refer to the information provided in this file: global tech stack