Prompting for Components

Create a team member card with:        ← Component type
- Photo, name, role, and bio           ← Content
- Social links at the bottom           ← Content
- Photo on left, info on right         ← Layout
- Rounded corners, subtle shadow       ← Style

Dashboard sidebar navigation with:
- Logo at the top (company name: "Acme")
- Main nav: Dashboard, Projects, Tasks, Messages, Settings
- Each item has an icon on the left
- Active state shows filled background
- Notification badge on Messages (show "3")
- User profile section at bottom
- Collapse button to minimize sidebar

A pricing toggle component:
At the top, centered text saying "Choose your plan"
Below that, a pill-shaped toggle with "Monthly" on left and "Annual" on right
Annual should show "Save 20%" badge
When toggled, the active side is highlighted in the primary color
Below the toggle, show three pricing cards that update based on selection

A command palette like VS Code's or Raycast:
- Triggered by Cmd+K
- Search input at top
- Categorized results below
- Keyboard navigation support
- Recent items section
- Icons next to each result

Multi-step onboarding wizard:
Step 1: Welcome screen with company logo and "Get Started" button
Step 2: Form asking for name and email
Step 3: Dropdown to select role (Developer, Designer, Manager, Other)
Step 4: Success screen with "Go to Dashboard" button
Include progress indicator showing current step
Back button available from step 2 onwards

[Type] card showing:
- [Header content]: title, subtitle, badge
- [Body content]: description, data, metrics
- [Media]: image, icon, avatar
- [Actions]: buttons, links, menu
- [Footer]: metadata, timestamp

Style: [shadow/border], [rounded corners], [colors]

Product card for an e-commerce site showing:
- Product image at top (4:3 aspect ratio)
- Name, brand, and price in the body
- Rating stars with review count
- "Add to Cart" button
- Sale badge if discounted

Subtle shadow, rounded-lg corners, white background

[Type] form with fields:
- [Field]: [type], [placeholder], [validation]
- [Field]: [type], [options if select]
...
- Submit button: [label]
- [Additional actions]

Show [validation style] for errors
[Loading state] when submitting

Job application form with fields:
- Full Name: text input, required
- Email: email input, required, validate format
- Phone: tel input, optional
- Resume: file upload, PDF only, max 5MB
- Cover Letter: textarea, optional, 500 char limit
- Submit button: "Submit Application"

Show inline errors below invalid fields
Disabled state with spinner while submitting

[Type] navigation for [context]:
- [Logo/brand]: position, size
- [Nav items]: list with any groupings
- [Actions]: search, buttons, user menu
- [Mobile behavior]: hamburger, bottom nav

[Sticky/fixed] positioning
[Desktop and mobile] breakpoints

E-commerce header navigation:
- Logo on left linking to home
- Categories dropdown: Electronics, Clothing, Home, Sports
- Search bar in center expanding on focus
- Right side: Wishlist icon, Cart with item count, User menu
- Mobile: hamburger menu, bottom bar with Home, Search, Cart, Account

Sticky on scroll with subtle shadow

Table displaying [data type] with columns:
- [Column]: [data type], [sortable?], [width]
- [Column]: [type]
...

Features:
- [Sorting, filtering, pagination]
- [Row actions]
- [Selection]
- [Empty state]

Order management table with columns:
- Order ID: text, sortable
- Customer: name + avatar
- Items: number with preview tooltip
- Total: currency, sortable
- Status: badge (pending/shipped/delivered)
- Date: relative time, sortable
- Actions: view, edit, delete dropdown

Sortable headers, pagination (10 per page)
Checkbox selection for bulk actions
Empty state: "No orders yet"

Use blue as the primary color (#3B82F6)
Accent color: amber for highlights
Gray-100 backgrounds for sections
Dark mode: slate-900 background

Generous padding (p-6) inside cards
Tight spacing (gap-2) between form fields
Section margins of 16px

Headings: bold, text-lg
Body: text-sm, text-gray-600
Captions: text-xs, uppercase, tracking-wide

Cards: shadow-sm, hover:shadow-md transition
Buttons: scale up slightly on hover
Images: rounded-full for avatars
Borders: border-gray-200

On hover:
- Card lifts with larger shadow
- Button background darkens
- Link shows underline
- Image zooms slightly

When clicked:
- Button shows pressed state
- Dropdown opens below trigger
- Modal slides in from right
- Tab content changes

Focus styles:
- Ring outline on inputs
- Background highlight on list items
- Bold text on navigation items

Loading states:
- Skeleton loaders for content
- Spinner on submit buttons
- Disabled state during async operations
- Progress bar for uploads

Layout:
- Desktop: 3-column grid
- Tablet: 2-column grid
- Mobile: single column stack

Sidebar:
- Desktop: always visible, 280px
- Tablet: collapsible
- Mobile: drawer overlay

Mobile adjustments:
- Stack all elements vertically
- Full-width buttons
- Larger touch targets (min 44px)
- Hide secondary actions in menu
- Simplified table (card view)

Create an email client interface:

Part 1: Sidebar
- Folders list (Inbox, Sent, Drafts, Archive)
- Compose button at top
- Unread counts on folders

Part 2: Email List
- Search and filter bar
- List of email previews (sender, subject, preview, time)
- Checkbox selection
- Unread indicator

Part 3: Email View
- Header: sender, recipients, subject, time
- Body: email content
- Actions: Reply, Forward, Delete, Archive

Product grid that receives:
- products: array of { id, name, price, image, rating }
- onAddToCart: function called with product id
- onFavorite: function to toggle favorite

Map through products to render cards
Handle empty state when products is empty

Todo list component with state for:
- List of todos (id, text, completed)
- Current filter (all, active, completed)
- Text input for new todo

Actions:
- Add todo on Enter
- Toggle completion on checkbox click
- Delete on X button click
- Filter changes update displayed todos

❌ "A nice card"
❌ "A dashboard"
❌ "Something modern"

❌ "Use useState and useEffect with a debounced callback"
❌ "Implement virtual scrolling with windowing"

❌ "Minimal design with lots of decorative elements"
❌ "Simple form with 15 fields"

❌ "Use exactly 16.5px padding with rgba(0,0,0,0.08) shadow
    at 2px offset with 8px blur radius"

Add to this component:
- Hover state that shows action buttons
- Loading skeleton while data fetches

Change the layout:
- Move the image to the top instead of left
- Make the card full-width on mobile

Adjust the styling:
- Reduce the shadow intensity
- Use rounded-full for the avatar instead of rounded-lg
- Increase padding inside the card

The button is too small on mobile. Make it full-width
below the md breakpoint and increase the touch target.