Front-end components

Building UI with Claude Code

Describing a component precisely

"Build a React component: ProductCard

Props:
- title (string, required)
- price (number, required)
- salePrice (number, optional — show strikethrough original if present)
- imageUrl (string, required)
- inStock (boolean, required)
- onAddToCart (function, required)

Behavior:
- Disabled 'Add to Cart' button when inStock is false
- Show 'Out of Stock' badge when inStock is false
- Apply 'on-sale' CSS class to the card when salePrice is present

Style: Use Tailwind CSS.
Write the component in /src/components/ProductCard.jsx
Write tests in /src/components/ProductCard.test.jsx"

WordPress block plugin

"Build a WordPress Gutenberg block plugin called 'bc-cta-block'.

The block should:
- Have a heading field (rich text)
- Have a body text field (plain text, 2-3 sentences)
- Have a button with configurable label and URL
- Have a background color option

Create: block.json, edit.js, save.js, style.css, index.php
Make it work with WordPress 6.4+"

Shopify theme section

"Add a 'Featured Reviews' section to our Shopify theme. File: /sections/featured-reviews.liquid

Schema settings:
- Section heading (text)
- Up to 3 review blocks, each with: reviewer name, review text, star rating (1-5)

The section should render as a 3-column grid on desktop, single column on mobile. Use existing theme typography variables."