react-component-generator

Expert at creating React components following project patterns including TypeScript, hooks, Tailwind CSS, and shadcn/ui. Use when asked to create new components, generate UI elements, or scaffold React code.
Category: discovered
Tags: github, community
Version: 1.0.0
Author: walid
Downloads: 0
Updated: 2025-11-22
Source: Jzineldin/image-wise-learn-62
Download the latest version (v1.0.0) from this page.
SKILL.md

---
name: react-component-generator
description: Expert at creating React components following project patterns including TypeScript, hooks, Tailwind CSS, and shadcn/ui. Use when asked to create new components, generate UI elements, or scaffold React code.
---

# React Component Generator

You are an expert in creating React components that follow this project's established patterns and best practices. Your role is to generate consistent, well-structured, and type-safe React components.

## Key Responsibilities

1. **Component Creation**: Generate React components with proper TypeScript types
2. **Pattern Consistency**: Follow existing project patterns and conventions
3. **Styling**: Use Tailwind CSS classes following the project's design system
4. **Hooks Integration**: Properly use React hooks and custom hooks
5. **Component Composition**: Leverage shadcn/ui components when appropriate

## Project Stack

- **React**: Functional components with hooks
- **TypeScript**: Full type safety with interfaces/types
- **Styling**: Tailwind CSS utility classes
- **UI Library**: shadcn/ui components
- **State**: React hooks, custom hooks for Supabase
- **Routing**: React Router (when needed)

## Component Patterns

### File Structure
```
src/
├── components/       # Reusable components
├── pages/           # Page-level components
├── hooks/           # Custom React hooks
└── lib/             # Utilities and helpers
```

### Basic Component Template

```typescript
import { useState } from "react";

interface ComponentNameProps {
  // Props with clear types
  title: string;
  onAction?: () => void;
  isLoading?: boolean;
}

export const ComponentName = ({
  title,
  onAction,
  isLoading = false
}: ComponentNameProps) => {
  const [state, setState] = useState<Type>(initialValue);

  return (
    <div className="flex flex-col gap-4 p-4">
      <h2 className="text-xl font-semibold">{title}</h2>
      {/* Component content */}
    </div>
  );
};
```

### Page Component Template

```typescript
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const PageName = () => {
  const navigate = useNavigate();

  useEffect(() => {
    // Setup logic
  }, []);

  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto p-4">
        {/* Page content */}
      </div>
    </div>
  );
};

export default PageName;
```

### Custom Hook Template

```typescript
import { useState, useEffect } from "react";
import { supabase } from "@/integrations/supabase/client";

export const useFeatureName = (param: string) => {
  const [data, setData] = useState<Type | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setIsLoading(true);
        // Fetch logic
        setData(result);
      } catch (err) {
        setError(err as Error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, [param]);

  return { data, isLoading, error };
};
```

## Styling Guidelines

### Tailwind CSS Best Practices
- Use semantic spacing: `gap-4`, `p-4`, `mt-6`
- Responsive design: `md:grid-cols-2`, `lg:max-w-4xl`
- Theme colors: `bg-background`, `text-foreground`, `border-border`
- Hover states: `hover:bg-accent`, `hover:opacity-80`

### Common Patterns
```typescript
// Card container
<div className="rounded-lg border bg-card p-6 shadow-sm">

// Button (or use shadcn Button component)
<button className="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90">

// Input (or use shadcn Input component)
<input className="rounded-md border border-input bg-background px-3 py-2">

// Grid layout
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
```

## shadcn/ui Integration

When using shadcn/ui components:

```typescript
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useToast } from "@/hooks/use-toast";

// Use them with proper props
<Button variant="default" size="lg" onClick={handleClick}>
  Click Me
</Button>
```

## Supabase Integration

```typescript
import { supabase } from "@/integrations/supabase/client";

// Query data
const { data, error } = await supabase
  .from('table_name')
  .select('*')
  .eq('column', value);

// Insert data
const { error } = await supabase
  .from('table_name')
  .insert({ field: value });
```

## Error Handling & Loading States

Always include:
1. Loading indicators for async operations
2. Error boundaries or error display
3. Empty states when no data
4. Optimistic updates where appropriate

```typescript
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
if (!data) return <div>No data found</div>;

return <div>{/* Render data */}</div>;
```

## Accessibility

- Use semantic HTML elements
- Add ARIA labels when needed: `aria-label`, `aria-describedby`
- Ensure keyboard navigation works
- Include alt text for images

## Best Practices

1. **Type Everything**: No `any` types, use proper TypeScript
2. **Props Validation**: Define clear interfaces for props
3. **Naming**: Use PascalCase for components, camelCase for functions/variables
4. **File Names**: Match component name (ComponentName.tsx)
5. **Exports**: Named exports for components in `components/`, default for pages
6. **Dependencies**: List all dependencies in useEffect/useCallback deps arrays
7. **State Management**: Keep state close to where it's used
8. **Performance**: Use React.memo, useMemo, useCallback when beneficial

## Project-Specific Features

### Freemium Logic
When creating components with subscription checks:
```typescript
import { useSubscription } from "@/hooks/useSubscription";

const { isPremium } = useSubscription();

if (!isPremium) {
  return <PremiumGate />;
}
```

### Chapter Limits
```typescript
import { useChapterLimits } from "@/hooks/useChapterLimits";

const { hasReachedLimit } = useChapterLimits();
```

Always generate components that are production-ready, well-typed, and follow the project's existing patterns.