# Scaffolding Frontend > 🏗️ Scaffolding Frontend - Skill: `7a336e6e/scaffolding-frontend-2` (Agent Skill) - Install (CLI): `npx skillmds@latest add 7a336e6e/scaffolding-frontend-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/7a336e6e/scaffolding-frontend-2/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: 7a336e6e (https://skillmd.com/u/7a336e6e) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/7a336e6e/scaffolding-frontend-2 --- # 🏗️ Scaffolding Frontend > Set up the Next.js + Tailwind + Framer Motion project foundation for an immersive storybook landing page. --- ## Prerequisites - Node.js 18+ - npm or pnpm --- ## Step 1 — Create the Next.js Project ```bash npx create-next-app@latest my-landing \ --typescript \ --tailwind \ --app \ --eslint \ --src-dir=false \ --import-alias="@/*" ``` This gives you: - App Router (`app/` directory) - TypeScript - Tailwind CSS 3+ - Path alias `@/*` mapping to project root --- ## Step 2 — Install Core Dependencies ```bash # Animation engine npm install framer-motion # Icon library (tree-shakeable) npm install lucide-react # UI primitives (shadcn/ui) npx shadcn@latest init # Choose: dark theme, New York style, zinc/slate base # Install specific shadcn components you'll need npx shadcn@latest add badge button card accordion ``` ### Optional Dependencies (use as needed) ```bash # Smooth scrolling (for non-hijacked pages) npm install lenis # Form handling (for signup/contact sections) npm install react-hook-form @hookform/resolvers zod # Charts (for stats/data visualization sections) npm install recharts ``` --- ## Step 3 — Project Structure ``` app/ layout.tsx ← Root layout: fonts, metadata, body classes page.tsx ← Mounts the Journey component (thin wrapper) globals.css ← ALL custom CSS: theme vars, utilities, keyframes components/ journey/ journey.tsx ← Main storybook orchestrator (single file) star-field.tsx ← Background ambience (optional) landing/ faq-section.tsx ← Embeddable content sections signup-form-section.tsx footer-section.tsx shared/ navbar.tsx ← Navigation bar (optional, can overlay) logo.tsx ← Brand logo component ui/ badge.tsx ← shadcn/ui primitives button.tsx ... lib/ utils.ts ← cn() helper from shadcn public/ fonts/ ← Custom fonts if needed images/ ← Static assets ``` --- ## Step 4 — Configure Tailwind ```typescript // tailwind.config.ts import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", ], theme: { extend: { colors: { // Map your brand colors here brand: { primary: "var(--color-primary)", accent: "var(--color-accent)", bg: "var(--color-bg-dark)", }, }, // shadcn/ui HSL color system // ... (auto-generated by shadcn init) }, }, plugins: [], } export default config ``` --- ## Step 5 — Root Layout ```tsx // app/layout.tsx import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-body" }) export const metadata: Metadata = { title: "Your Product Name", description: "Your product description", } export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } ``` --- ## Step 6 — Page Entry Point ```tsx // app/page.tsx "use client" import Journey from "@/components/journey/journey" export default function Home() { return } ``` The `"use client"` directive is placed here because the Journey needs browser APIs (scroll events, sessionStorage, mouse tracking). --- ## Step 7 — Next.js Configuration ```javascript // next.config.mjs /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true }, // speed up builds typescript: { ignoreBuildErrors: true }, // prototype fast, fix later images: { unoptimized: true }, // static export friendly } export default nextConfig ``` --- ## Verification ```bash npm run dev # Should see a blank dark page at localhost:3000 # No errors in terminal or browser console ``` --- ## Next Step → [Building Components](../building-components/SKILL.md) — Set up the theme, build scenes, create the mascot.