React, MDX, and Tailwind CSS integration patterns for Astro websites. Use when adding React components, configuring MDX content, setting up Tailwind styling, integrating component libraries, building interactive UI elements, or when user mentions React integration, MDX setup, Tailwind configuration, component patterns, or UI frameworks.
View on GitHubvanman2024/ai-dev-marketplace
website-builder
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/vanman2024/ai-dev-marketplace/blob/main/plugins/website-builder/skills/component-integration/SKILL.md -a claude-code --skill component-integrationInstallation paths:
.claude/skills/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