---

name: react-create-layout description: Creates production-ready React layouts with proper Tailwind CSS practices. Use when building UI layouts, landing pages, dashboards, or any React component that requires styling and structure.

React Layout Creation Guidelines

Core Principles

1. Single-File Architecture

• Always create the entire layout in ONE file unless explicitly requested otherwise
• Use comment delimiters to separate logical sections for future refactoring
• Structure: Imports → Main Component → Section components (inline) → Export

Example structure:

Copyimport React from 'react';
import { Button } from '@/components/ui/button';

export default function LandingPage() {
  return (
    <div>
      {/* Hero Section */}
      <section>...</section>
      
      {/* Features Section */}
      <section>...</section>
      
      {/* Footer Section */}
      <section>...</section>
    </div>
  );
}

2. Tailwind CSS - Utility-First Only

CRITICAL RULE: NO arbitrary values

❌ NEVER do this:

Copy<div className="w-[230px] h-[450px] top-[23px]">

✅ ALWAYS do this:

Copy<div className="w-64 h-96 top-6">

Use Tailwind's design system:

• Spacing: p-4, m-8, space-y-6, gap-4
• Sizing: w-full, w-64, h-screen, max-w-4xl
• Positioning: top-4, left-8, inset-0
• Typography: text-lg, text-2xl, font-semibold

Rare exceptions (avoid at all costs):

• Only use arbitrary values if there's a specific technical constraint
• Even then, try every standard utility combination first
• Document why the arbitrary value is necessary

3. Component Libraries Integration

When using component libraries like shadcn/ui, Radix, or similar:

• Use their components as-is - they're already styled
• Customize ONLY with Tailwind utility classes
• Don't override with custom CSS or inline styles

Example:

Copyimport { Button } from '@/components/ui/button';
import { Card, CardHeader, CardContent } from '@/components/ui/card';

// ✅ Good - Using utilities to compose
<Card className="max-w-md mx-auto">
  <CardHeader className="space-y-2">
    <h2 className="text-2xl font-bold">Title</h2>
  </CardHeader>
  <CardContent className="space-y-4">
    <Button className="w-full">Click me</Button>
  </CardContent>
</Card>

4. Pure CSS Approach - No JavaScript for Styling

When using Tailwind CSS:

• All interactions should use Tailwind utilities: hover:, focus:, active:, group-hover:
• NO JavaScript for styling logic (hover effects, active states, etc.)
• Use Tailwind's responsive utilities: md:, lg:, xl:

Example:

Copy// ✅ Good - Pure CSS with Tailwind
<button className="bg-blue-500 hover:bg-blue-600 active:scale-95 transition-all">
  Click me
</button>

// ❌ Bad - JavaScript for styling
<button 
  onMouseEnter={() => setHovered(true)}
  style={{ backgroundColor: hovered ? 'blue' : 'lightblue' }}
>
  Click me
</button>

5. Minimal Comments - Only for Structure

DO NOT explain obvious code:

Copy// ❌ Bad - Unnecessary
// This button submits the form
<button type="submit">Submit</button>

DO use comments for section delimiters:

Copy// ✅ Good - Helps with organization
{/* ==================== Hero Section ==================== */}
<section className="min-h-screen flex items-center">
  ...
</section>

{/* ==================== Features Section ==================== */}
<section className="py-20">
  ...
</section>

6. Responsive Design

Always consider mobile-first responsive design:

Copy<div className="
  grid 
  grid-cols-1 
  md:grid-cols-2 
  lg:grid-cols-3 
  gap-4 
  md:gap-6 
  lg:gap-8
">

Implementation Checklist

When creating a layout, ensure:

• Everything in one file (unless specified otherwise)
• Only Tailwind utility classes (no arbitrary values)
• Component library components used properly
• No JavaScript for styling/hover effects
• Section delimiters with clear comments
• Responsive breakpoints considered
• Minimal, structural comments only

Example Output

Copyimport React from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';

export default function ProductLanding() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
      
      {/* ==================== Navigation ==================== */}
      <nav className="fixed top-0 w-full bg-white/80 backdrop-blur-sm border-b z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="text-2xl font-bold">Logo</div>
            <Button variant="default">Get Started</Button>
          </div>
        </div>
      </nav>

      {/* ==================== Hero Section ==================== */}
      <section className="pt-32 pb-20 px-4">
        <div className="max-w-4xl mx-auto text-center space-y-8">
          <h1 className="text-5xl md:text-6xl font-bold tracking-tight">
            Your Amazing Product
          </h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Transform your workflow with our innovative solution
          </p>
          <Button size="lg" className="text-lg px-8 py-6">
            Start Free Trial
          </Button>
        </div>
      </section>

      {/* ==================== Features Section ==================== */}
      <section className="py-20 px-4 bg-gray-50">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[1, 2, 3].map((i) => (
              <Card key={i} className="p-6 hover:shadow-lg transition-shadow">
                <h3 className="text-xl font-semibold mb-2">Feature {i}</h3>
                <p className="text-gray-600">Description here</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

    </div>
  );
}

Remember: The design, colors, and specific content will come from the user's prompt. Focus on clean structure, proper Tailwind usage, and maintainable code.