React Local Business Website

Build complete, modern multi-page React websites for local businesses (landscapers, restaurants, salons, plumbers, gyms, etc.). Use when a user asks to build...

Security Scan

The skill's files and runtime instructions are coherent with its stated purpose (generating React websites) and do not request credentials or perform obvious exfiltration, but review the dev/serve instructions before running to avoid unintentionally exposing a local dev server.

Purpose & Capability

The name/description (create multi‑page React sites for local businesses) matches the provided assets, page templates, components, Tailwind config, and SKILL.md instructions. There are no unrelated required binaries, env variables, or config paths.

Instruction Scope

SKILL.md stays within the site‑generation scope (scaffold with Vite, install React/Tailwind, write files, build). It references external image sources (Unsplash) and Google Fonts which is expected. One notable item: a commented example shows running the dev server with OpenClaw background exec using `npx vite --host 0.0.0.0 --port 5173` — if used as written this exposes the dev server to the network. The instruction is otherwise explicit about what files to write and commands to run and does not tell the agent to read unrelated system files or secrets.

Install Mechanism

This is an instruction-only skill with templates included in the bundle (no external install spec). The runtime workflow uses standard npm tooling (create‑vite, npm install, tailwind init) which will download packages from public registries — expected for a JS project. There are no obscure download URLs or archive extracts in the skill itself.

Credentials

The skill declares no required environment variables, no credentials, and the SKILL.md and code do not access environment vars or other secrets. All external network usage is for normal resources (npm registry, images.unsplash.com, fonts.googleapis.com).

Persistence & Privilege

always:false and no requests to modify other skills or global agent config. The only persistence-ish behavior is the suggestion to run a background dev server (commented example) which would create a long‑running process if executed; this is normal for local development but increases exposure if run with host 0.0.0.0.

Assessment

This skill appears to be what it says: a React site template + step‑by‑step setup. Before running anything: 1) Inspect the provided files locally (they're bundled) to confirm content and placeholder data (phone/address) are acceptable. 2) When you follow SKILL.md you'll run npm create / npm install which downloads packages from npm — only proceed if you trust those registries and your network. 3) Avoid running the dev server bound to 0.0.0.0 on an unprotected host (the SKILL.md shows a background exec example); prefer localhost or behind a firewall to prevent external access. 4) Verify any third‑party image/font usage complies with licensing. 5) If you want absolute isolation, run the build in a sandboxed environment or container. Overall the skill is coherent and not requesting secrets, but treat it like any external code: review and run in a controlled environment.

Generates a complete, polished 5-page React site for any local business. No coding agent required — write all files directly.

Stack

Tool	Purpose
Vite + React	Project scaffold
Tailwind CSS v3	Styling
React Router v6	Page routing
Framer Motion	Scroll animations
Lucide React	Icons

Quick Workflow

1. Identify business — name, type, location, brand vibe
2. Pick color palette — see references/business-types.md
3. Scaffold project — run setup commands
4. Write config files — tailwind, CSS, index.html, App.jsx
5. Write components — Navbar, Footer, ScrollToTop
6. Write 5 pages — Home, Services, Portfolio/Gallery, About, Contact
7. Build & verify — npm run build must pass clean

Setup Commands

mkdir -p <project-dir> && cd <project-dir> && git init
npm create vite@latest . -- --template react --force
npm install
npm install -D tailwindcss@3 postcss autoprefixer && npx tailwindcss init -p
npm install react-router-dom framer-motion lucide-react

File Structure

src/
  App.jsx          # BrowserRouter + Routes + Navbar/Footer wrap
  main.jsx         # createRoot entry
  index.css        # @import fonts → @tailwind directives → @layer base/components
  components/
    Navbar.jsx     # Sticky, transparent-on-hero → white-on-scroll, mobile hamburger
    Footer.jsx     # 4-col dark footer: brand, links, services, contact
    ScrollToTop.jsx
  pages/
    Home.jsx       # Hero, stats bar, services preview, why-us, portfolio grid, testimonials, CTA
    Services.jsx   # Service cards grid + how-it-works steps
    Portfolio.jsx  # Filterable gallery + lightbox
    About.jsx      # Story, values, timeline, team, awards
    Contact.jsx    # Form with validation + contact info panel

Design Principles

See references/design-system.md for the full design token system, reusable CSS component classes, and animation patterns.

Pages Reference

See references/page-templates.md for section-by-section structure for each of the 5 pages.

Business Types & Images

See references/business-types.md for per-industry color palettes and curated Unsplash image packs.

Key Patterns

App.jsx

<BrowserRouter>
  <ScrollToTop />
  <div className="flex flex-col min-h-screen">
    <Navbar />
    <main className="flex-1"><Routes>...</Routes></main>
    <Footer />
  </div>
</BrowserRouter>

Framer Motion — Scroll Animations

// Standard fade-up on scroll
<motion.div
  initial={{ opacity: 0, y: 30 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ delay: index * 0.1 }}
>

Staggered Children

const stagger = { visible: { transition: { staggerChildren: 0.12 } } };
const fadeUp = { hidden: { opacity: 0, y: 30 }, visible: { opacity: 1, y: 0 } };
<motion.div initial="hidden" animate="visible" variants={stagger}>
  <motion.h1 variants={fadeUp}>...</motion.h1>
</motion.div>

Navbar Transparency Logic

const transparent = isHome && !scrolled && !mobileOpen;
// Apply: transparent ? "bg-transparent text-white" : "bg-white/95 backdrop-blur shadow"

Contact Form Validation

const validate = () => {
  const e = {};
  if (!form.name.trim()) e.name = "Required";
  if (!/\S+@\S+\.\S+/.test(form.email)) e.email = "Valid email required";
  if (!form.message.trim()) e.message = "Required";
  return e;
};

Image Strategy

Use 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.

Build Verification

npm run build   # Must exit 0 with no errors

CSS @import must come before @tailwind directives or PostCSS will warn.

Dev Server

# Keep alive via OpenClaw background exec (not nohup):
# exec(command: "cd <dir> && npx vite --host 0.0.0.0 --port 5173", background: true)
# Access: http://localhost:5173