react-component-generator

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

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

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

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

// 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:

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

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

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:

import { useSubscription } from "@/hooks/useSubscription";

const { isPremium } = useSubscription();

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

Chapter Limits

import { useChapterLimits } from "@/hooks/useChapterLimits";

const { hasReachedLimit } = useChapterLimits();

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