Best Practices

Build a complete e-commerce site with product listings, shopping cart,
checkout, user accounts, order history, and admin dashboard

Step 1: "Create a product listing page with a grid of product cards
showing image, name, price, and 'Add to Cart' button"

Step 2: "Add a shopping cart sidebar that shows added items and
calculates the total"

Step 3: "Create a checkout page with shipping address form"

Step 4: "Add user authentication for checkout"

Step 5: "Create an order confirmation page"

"Make a nice looking hero section"

"Create a hero section with:
- Centered text layout
- Large heading (4xl) with gradient text from blue to purple
- Subheading in gray-600
- Two buttons: primary 'Get Started' and secondary 'Learn More'
- Background with subtle dots pattern"

"Copy the card style from the features section and use it for the
testimonials section"

"Make this button match the primary button in the header"

"Use the same color scheme as the pricing cards"

"Add a flex container with justify-between and items-center"

"Make this an interactive React island that loads my bookings from the Kleap Database"

"Add a useState hook to track the selected tab"

"Put these items side by side with space between them"

"Create a pricing table similar to Stripe's pricing page, with
three tiers and a toggle for monthly/annual billing"

"Make the hover effect on these cards like Apple's product cards -
subtle lift and shadow"

"I prefer rounded corners, subtle shadows, and plenty of whitespace.
Create a dashboard layout with these preferences in mind."

"Create a product list that:
- Shows a loading spinner while fetching
- Shows 'No products found' if the list is empty
- Shows an error message if the fetch fails"

"That's wrong, make a completely different hero section"

"The hero is good but:
- Make the heading smaller
- Change the button color to blue
- Add more padding on mobile"

"Create a new page at /about with:
- Company story section
- Team member cards
- Office locations map"

"Add a contact form with name, email, and message fields.
Save the submissions to my dashboard and email me a
notification whenever someone submits."

"Add a bookings database. Let visitors submit a booking,
and show my upcoming bookings in a table on a private page."

"Add email/password accounts:
- A signup page at /signup
- A login page at /login
- A members-only dashboard only logged-in users can see
- A user menu in the header when logged in"

"Make this layout:
- Single column on mobile
- Two columns on tablet
- Three columns on desktop"

"Create [component] with [features/characteristics]"

Example: "Create a testimonial carousel with auto-play,
dots navigation, and quote cards"

"When [trigger], [action]"

Example: "When the user scrolls down 100px, make the
header background solid instead of transparent"

"Make it like [reference] but [changes]"

Example: "Like the existing contact form but with
additional phone number and company fields"