{"skill":{"slug":"react-local-biz","displayName":"React Local Business Website","summary":"Build complete, modern multi-page React websites for local businesses (landscapers, restaurants, salons, plumbers, gyms, etc.). Use when a user asks to build...","description":"---\nname: react-local-biz\ndescription: Build complete, modern multi-page React websites for local businesses (landscapers, restaurants, salons, plumbers, gyms, etc.). Use when a user asks to build or design a website for a local/small business using React. Handles project scaffolding (Vite + React + Tailwind CSS v3 + Framer Motion + React Router v6 + Lucide React), full design system, all 5 standard pages, image strategy, responsive layout, animations, and production build — all generated directly without requiring a coding agent.\n---\n\n# React Local Business Website\n\nGenerates a complete, polished 5-page React site for any local business. No coding agent required — write all files directly.\n\n## Stack\n\n| Tool | Purpose |\n|---|---|\n| Vite + React | Project scaffold |\n| Tailwind CSS v3 | Styling |\n| React Router v6 | Page routing |\n| Framer Motion | Scroll animations |\n| Lucide React | Icons |\n\n## Quick Workflow\n\n1. **Identify business** — name, type, location, brand vibe\n2. **Pick color palette** — see `references/business-types.md`\n3. **Scaffold project** — run setup commands\n4. **Write config files** — tailwind, CSS, index.html, App.jsx\n5. **Write components** — Navbar, Footer, ScrollToTop\n6. **Write 5 pages** — Home, Services, Portfolio/Gallery, About, Contact\n7. **Build & verify** — `npm run build` must pass clean\n\n## Setup Commands\n\n```bash\nmkdir -p <project-dir> && cd <project-dir> && git init\nnpm create vite@latest . -- --template react --force\nnpm install\nnpm install -D tailwindcss@3 postcss autoprefixer && npx tailwindcss init -p\nnpm install react-router-dom framer-motion lucide-react\n```\n\n## File Structure\n\n```\nsrc/\n  App.jsx          # BrowserRouter + Routes + Navbar/Footer wrap\n  main.jsx         # createRoot entry\n  index.css        # @import fonts → @tailwind directives → @layer base/components\n  components/\n    Navbar.jsx     # Sticky, transparent-on-hero → white-on-scroll, mobile hamburger\n    Footer.jsx     # 4-col dark footer: brand, links, services, contact\n    ScrollToTop.jsx\n  pages/\n    Home.jsx       # Hero, stats bar, services preview, why-us, portfolio grid, testimonials, CTA\n    Services.jsx   # Service cards grid + how-it-works steps\n    Portfolio.jsx  # Filterable gallery + lightbox\n    About.jsx      # Story, values, timeline, team, awards\n    Contact.jsx    # Form with validation + contact info panel\n```\n\n## Design Principles\n\nSee `references/design-system.md` for the full design token system, reusable CSS component classes, and animation patterns.\n\n## Pages Reference\n\nSee `references/page-templates.md` for section-by-section structure for each of the 5 pages.\n\n## Business Types & Images\n\nSee `references/business-types.md` for per-industry color palettes and curated Unsplash image packs.\n\n## Key Patterns\n\n### App.jsx\n```jsx\n<BrowserRouter>\n  <ScrollToTop />\n  <div className=\"flex flex-col min-h-screen\">\n    <Navbar />\n    <main className=\"flex-1\"><Routes>...</Routes></main>\n    <Footer />\n  </div>\n</BrowserRouter>\n```\n\n### Framer Motion — Scroll Animations\n```jsx\n// Standard fade-up on scroll\n<motion.div\n  initial={{ opacity: 0, y: 30 }}\n  whileInView={{ opacity: 1, y: 0 }}\n  viewport={{ once: true }}\n  transition={{ delay: index * 0.1 }}\n>\n```\n\n### Staggered Children\n```jsx\nconst stagger = { visible: { transition: { staggerChildren: 0.12 } } };\nconst fadeUp = { hidden: { opacity: 0, y: 30 }, visible: { opacity: 1, y: 0 } };\n<motion.div initial=\"hidden\" animate=\"visible\" variants={stagger}>\n  <motion.h1 variants={fadeUp}>...</motion.h1>\n</motion.div>\n```\n\n### Navbar Transparency Logic\n```jsx\nconst transparent = isHome && !scrolled && !mobileOpen;\n// Apply: transparent ? \"bg-transparent text-white\" : \"bg-white/95 backdrop-blur shadow\"\n```\n\n### Contact Form Validation\n```jsx\nconst validate = () => {\n  const e = {};\n  if (!form.name.trim()) e.name = \"Required\";\n  if (!/\\S+@\\S+\\.\\S+/.test(form.email)) e.email = \"Valid email required\";\n  if (!form.message.trim()) e.message = \"Required\";\n  return e;\n};\n```\n\n## Image Strategy\n\nUse Unsplash with size + quality params: `?w=1920&q=80` (hero), `?w=800&q=80` (cards), `?w=600&q=80` (thumbnails). Always add `object-cover` class. See `references/business-types.md` for per-industry URL packs.\n\n## Build Verification\n\n```bash\nnpm run build   # Must exit 0 with no errors\n```\n\nCSS `@import` must come **before** `@tailwind` directives or PostCSS will warn.\n\n## Dev Server\n\n```bash\n# Keep alive via OpenClaw background exec (not nohup):\n# exec(command: \"cd <dir> && npx vite --host 0.0.0.0 --port 5173\", background: true)\n# Access: http://localhost:5173\n```\n","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":857,"installsAllTime":2,"installsCurrent":2,"stars":1,"versions":1},"createdAt":1772499880725,"updatedAt":1778491695332},"latestVersion":{"version":"1.0.0","createdAt":1772499880725,"changelog":"Initial release — 5-page React site builder for local businesses. Includes design system, 8 business-type color/image packs, page templates, and a full landscaping site reference template.","license":null},"metadata":null,"owner":{"handle":"maverick-software","userId":"s172zy52hz8d9fxcmyr9padghd842s7c","displayName":"maverick-software","image":"https://avatars.githubusercontent.com/u/85259593?v=4"},"moderation":null}