component-integration

# Component Integration

Comprehensive patterns for integrating React components, MDX content, and Tailwind CSS into Astro websites with type safety, performance optimization, and best practices.

## Overview

This skill provides:
- React component integration with Astro islands architecture
- MDX configuration for content-rich component authoring
- Tailwind CSS setup with custom design systems
- Type-safe component patterns with TypeScript
- Performance optimization techniques
- Component library integration (shadcn/ui, Radix, etc.)

## Setup Scripts

### Core Setup Scripts

1. **scripts/setup-react.sh** - Initialize React integration in Astro project
2. **scripts/setup-mdx.sh** - Configure MDX support with plugins
3. **scripts/setup-tailwind.sh** - Install and configure Tailwind CSS
4. **scripts/validate-integration.sh** - Validate component integration setup
5. **scripts/optimize-components.sh** - Apply performance optimizations

### Utility Scripts

6. **scripts/generate-component.sh** - Scaffold new React components
7. **scripts/add-component-library.sh** - Integrate shadcn/ui or other libraries

## Templates

### React Component Templates

1. **templates/react/basic-component.tsx** - Simple React component with TypeScript
2. **templates/react/interactive-component.tsx** - Interactive component with state
3. **templates/react/island-component.tsx** - Astro island with client directives
4. **templates/react/form-component.tsx** - Form component with validation
5. **templates/react/data-fetching-component.tsx** - Component with async data
6. **templates/react/component-with-context.tsx** - Context provider pattern

### MDX Templates

7. **templates/mdx/basic-mdx.mdx** - Basic MDX file structure
8. **templates/mdx/mdx-with-components.mdx** - MDX using custom components
9. **templates/mdx/mdx-layout.astro** - Layout wrapper for MDX content
10. **templates/mdx/remark-plugin.js** - Custom remark plugin template

### Tailwind Templates

11. **templates/tailwind/tailwi