```
```javascript
// src/pages/error/[...code].astro
export function getStaticPaths() {
return [{ params: { code: "403" } }, { params: { code: "500" } }];
}
const { code } = Astro.params;
const errorMessages = {
403: "Forbidden",
500: "Internal Server Error",
};
```
## Common Issues & Solutions
### Component Not Interactive
**Problem**: React/Vue components render but don't respond to user interaction.
**Solution**: Add `client:*` directive. By default, Astro strips all client-side JavaScript.
```astro
---
import ReactComponent from '@/components/ReactComponent.jsx';
---
```
### Context API Not Working Across Islands
**Problem**: React Context providers don't share state between different component islands.
**Solution**: Each Astro island hydrates in isolation. Use external state management (Zustand, Redux, MobX) for cross-island state sharing.
See [State Management Guide](references/state-management.md) for detailed patterns.
### `document` or `window` is Not Defined
**Problem**: Error accessing browser APIs during server-side rendering.
**Solution**: Move browser-only code to `
```
### TypeScript Ref Callback Errors
When using React refs with arrays in TypeScript, avoid this common error:
```tsx
// ❌ Incorrect - TypeScript error
(cardsRef.current[index] = el)}>
// ✅ Correct - Wrap the assignment
{
cardsRef.current[index] = el;
}}>
```
### Tailwind CSS v4 Migration
Common issues when migrating from Tailwind CSS v3 to v4:
1. **Gradient classes**: Always use `bg-linear-to-*` instead of `bg-gradient-to-*`
2. **Aspect ratios**: Use `aspect-3/2` instead of `aspect-[3/2]` for simple ratios
3. **Flexbox**: Use `shrink-0` instead of `flex-shrink-0`
4. **Filters**: Use `grayscale-30` instead of `grayscale-[30%]` for percentage values
### File Path Resolution
If you encounter errors about missing files that should exist:
1. Check if the file exists at the expected path
2. The error might be from an outdated diagnostic cache
3. Files may have been renamed or moved
## Resources
### scripts/
The scripts/ directory contains automation utilities:
- `create-component.js` - Generates component boilerplate
- `optimize-images.js` - Batch image optimization
- `generate-sitemap.js` - Custom sitemap generation
Execute scripts without loading into context:
```bash
node scripts/create-component.js --name MyComponent --type astro
```
### references/
Reference materials for detailed information:
- `component-patterns.md` - Common Astro component patterns
- `integration-guide.md` - Detailed integration setup guides (React, Vue, Tailwind, MDX, etc.)
- `testing-guide.md` - **NEW**: Comprehensive testing strategies with Vitest, Playwright, and Container API
- `common-pitfalls.md` - **NEW**: Common mistakes and solutions for islands architecture, client directives, SSR vs static rendering
- `performance-optimization.md` - **NEW**: Build optimization, image optimization, code splitting, deployment strategies
- `state-management.md` - **NEW**: State management patterns for React islands (Zustand, Redux Toolkit, Jotai, TanStack Query)
Load reference materials when specific detailed information is needed:
```
Read references/testing-guide.md when setting up testing infrastructure
Read references/common-pitfalls.md when troubleshooting hydration or directive issues
Read references/performance-optimization.md when optimizing build size or load times
Read references/state-management.md when implementing cross-island state sharing
```
### assets/
Templates and boilerplate code:
- `component-templates/` - Starting templates for different component types
- `layout-templates/` - Common layout patterns
- `page-templates/` - Page boilerplate for different use cases
Use assets as starting points:
- Copy component templates for new components
- Reference layout templates for consistent structure
- Adapt page templates for common page types
---
This skill provides comprehensive Astro development guidance from project setup through deployment optimization.