7a336e6e/frontend-landing/scaffolding-frontend
frontend-landing/scaffolding-frontend/SKILL.md
# 🏗️ 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 projec
$ install --global
skillsauthnpx skillsauth add 7a336e6e/skills frontend-landing/scaffolding-frontendInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
4 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
4
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 26, 2026, 1:43 AM130.4s1 file scanned
SKILL.md
🏗️ 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
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
# 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)
# 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
// 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
// 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 (
<html lang="en" className="dark">
<body className={`${inter.variable} font-sans antialiased`}>
{children}
</body>
</html>
)
}
Step 6 — Page Entry Point
// app/page.tsx
"use client"
import Journey from "@/components/journey/journey"
export default function Home() {
return <Journey />
}
The "use client" directive is placed here because the Journey needs browser APIs (scroll events, sessionStorage, mouse tracking).
Step 7 — Next.js Configuration
// 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
npm run dev
# Should see a blank dark page at localhost:3000
# No errors in terminal or browser console
Next Step
→ Building Components — Set up the theme, build scenes, create the mascot.
Related Skills
7a336e6e/Test Driven Development
development
VerifiedTrustedCommunity
Implement features using the Red-Green-Refactor cycle to ensure testability and correctness from the start.
1SKILL.mdUpdated Mar 25, 2026
7a336e6e/task-tracking
data-ai
VerifiedTrustedCommunity
Manage the `tasks.md` ledger with strict locking and collision avoidance protocols to allow multiple agents to work in parallel safely.
1SKILL.mdUpdated Mar 25, 2026
7a336e6e/git-workflow
development
VerifiedTrustedCommunity
The git-workflow skill defines branching conventions, commit message formats, and pull request standards that all agents must follow for consistent version control.
1SKILL.mdUpdated Mar 25, 2026
7a336e6e/environment-config
development
VerifiedTrustedCommunity
The environment-config skill standardizes how agents manage environment variables, secrets, and application configuration across local development and deployed environments.
1SKILL.mdUpdated Mar 25, 2026