# Web App Builder > Builds modern, production-ready full-stack web applications with a premium design aesthetic. Uses Next.js (React) for the frontend with Tailwind CSS v3, Supabase as the primary backend (auth, Postgres, storage), and optional FastAPI or Express.js API layers. Enforces modern design patterns — glassmorphism, gradients, micro-animations, dark mode — with built-in SEO, responsive design, testing, and deployment to Vercel. Use this skill when the user wants to build, scaffold, or architect a full-stack web application, SPA, dashboard, or any frontend-heavy project. Do NOT use for simple static HTML pages with no interactivity, CLI tools, mobile-native apps, or backend-only microservices. - Skill: `zusu12/web-app-builder` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add zusu12/web-app-builder` - Raw SKILL.md: https://api.skillmd.com/api/skills/zusu12/web-app-builder/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: Zusu12 (https://skillmd.com/u/zusu12) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/zusu12/web-app-builder --- # 🚀 Web App Builder Skill Build **modern, production-ready, full-stack web applications** with a premium design aesthetic that wows users at first glance. This skill covers the entire lifecycle — from scaffolding to deployment. --- ## Tech Stack Overview | Layer | Technology | |-----------------|-----------------------------------------------| | **Frontend** | Next.js 14+ (React, App Router) | | **Styling** | Tailwind CSS v3, Google Fonts (Inter/Outfit) | | **Backend** | Supabase (primary) — Auth, Postgres, Storage | | **API Layer** | FastAPI (Python) or Express.js (Node) optional | | **Package Mgr** | npm | | **Language** | JavaScript (ES2022+) | | **Deployment** | Vercel (primary), with guides for alternatives | | **Testing** | Jest + React Testing Library + Playwright | --- ## When to Use This Skill Activate this skill when the user says things like: - "Build me a web app for ..." - "Create a full-stack application with ..." - "Scaffold a new Next.js project" - "I need a dashboard / SPA / landing page with backend" - "Set up a project with Supabase authentication" - "Build a modern web app with dark mode and animations" **Do NOT use when:** - The user wants a CLI tool, mobile-native app, or backend-only API - The user wants a simple static HTML page with zero interactivity - The user explicitly requests a different framework (Angular, Vue, Svelte) — ask if they want to proceed with Next.js or switch --- ## Step-by-Step Workflow ### Step 1 — Understand the Requirements Before writing any code, clarify the following with the user: 1. **App purpose** — What does the app do? (e.g., "a task manager", "a blog") 2. **Core features** — List the 3–5 most important features for the MVP 3. **Authentication needed?** — Does it need user login/signup? (default: yes) 4. **Database tables** — What data models are needed? (e.g., users, posts, tasks) 5. **Design preference** — Confirm dark mode / glassmorphism / color palette preference, or use the default premium dark theme 6. **Pages needed** — List all pages/routes (e.g., Home, Dashboard, Settings) > **Tip:** If the user is vague, propose a reasonable MVP scope and ask for > confirmation before proceeding. --- ### Step 2 — Scaffold the Project Use the following command to create a new Next.js project: ```bash npx -y create-next-app@latest ./ --js --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm ``` **Flags explained:** - `--js` — JavaScript (not TypeScript) - `--tailwind` — Pre-configure Tailwind CSS - `--eslint` — Include ESLint - `--app` — Use the App Router (not Pages Router) - `--src-dir` — Use `src/` directory - `--import-alias "@/*"` — Clean import paths - `--use-npm` — Use npm as the package manager After scaffolding, install additional dependencies: ```bash npm install @supabase/supabase-js @supabase/auth-helpers-nextjs framer-motion lucide-react clsx ``` **Optional (if user needs API layer):** For FastAPI: ```bash pip install fastapi uvicorn python-dotenv supabase ``` For Express: ```bash npm install express cors dotenv @supabase/supabase-js nodemon ``` --- ### Step 3 — Set Up Project Structure Use the following **recommended** project structure (adapt as needed): ``` project-root/ ├── public/ │ ├── fonts/ │ └── images/ ├── src/ │ ├── app/ │ │ ├── layout.js ← Root layout (fonts, metadata, providers) │ │ ├── page.js ← Home / landing page │ │ ├── globals.css ← Global styles + Tailwind directives │ │ ├── (auth)/ │ │ │ ├── login/page.js │ │ │ └── signup/page.js │ │ ├── dashboard/ │ │ │ ├── layout.js │ │ │ └── page.js │ │ └── api/ ← Next.js API routes (if no separate backend) │ │ └── [...]/route.js │ ├── components/ │ │ ├── ui/ ← Reusable UI primitives │ │ │ ├── Button.js │ │ │ ├── Card.js │ │ │ ├── Input.js │ │ │ ├── Modal.js │ │ │ └── Badge.js │ │ ├── layout/ ← Layout components │ │ │ ├── Navbar.js │ │ │ ├── Sidebar.js │ │ │ └── Footer.js │ │ └── features/ ← Feature-specific components │ │ └── [feature-name]/ │ ├── lib/ │ │ ├── supabase/ │ │ │ ├── client.js ← Browser Supabase client │ │ │ ├── server.js ← Server-side Supabase client │ │ │ └── middleware.js ← Auth middleware helper │ │ ├── utils.js ← Shared utility functions │ │ └── constants.js ← App-wide constants │ ├── hooks/ ← Custom React hooks │ │ ├── useAuth.js │ │ └── useSupabase.js │ ├── context/ ← React context providers │ │ └── AuthProvider.js │ └── styles/ ← Additional style modules (if needed) ├── api/ ← Optional FastAPI/Express backend │ ├── main.py ← FastAPI entry (or index.js for Express) │ ├── routes/ │ ├── models/ │ └── requirements.txt ← (or package.json for Express) ├── tests/ │ ├── unit/ │ ├── integration/ │ └── e2e/ ├── .env.local ← Supabase keys + secrets (NEVER commit) ├── .env.example ← Template for env vars ├── tailwind.config.js ├── next.config.js ├── jsconfig.json └── package.json ``` > **Important:** Always create `.env.example` with placeholder values AND > add `.env.local` to `.gitignore`. --- ### Step 4 — Configure the Design System #### 4.1 — Tailwind Configuration Update `tailwind.config.js` with a premium design system: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ './src/pages/**/*.{js,jsx}', './src/components/**/*.{js,jsx}', './src/app/**/*.{js,jsx}', ], darkMode: 'class', theme: { extend: { colors: { // Primary palette — deep indigo/purple primary: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, // Accent palette — vibrant cyan accent: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', }, // Surface colors for dark mode surface: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 700: '#1e293b', 800: '#0f172a', 900: '#020617', 950: '#010313', }, }, fontFamily: { sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'], display: ['Outfit', 'Inter', 'system-ui', 'sans-serif'], mono: ['JetBrains Mono', 'Fira Code', 'monospace'], }, borderRadius: { '4xl': '2rem', }, backdropBlur: { xs: '2px', }, animation: { 'fade-in': 'fadeIn 0.5s ease-out', 'fade-in-up': 'fadeInUp 0.6s ease-out', 'slide-in-right': 'slideInRight 0.4s ease-out', 'scale-in': 'scaleIn 0.3s ease-out', 'glow-pulse': 'glowPulse 2s ease-in-out infinite', 'shimmer': 'shimmer 2s linear infinite', 'float': 'float 6s ease-in-out infinite', }, keyframes: { fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' }, }, fadeInUp: { '0%': { opacity: '0', transform: 'translateY(20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' }, }, slideInRight: { '0%': { opacity: '0', transform: 'translateX(-20px)' }, '100%': { opacity: '1', transform: 'translateX(0)' }, }, scaleIn: { '0%': { opacity: '0', transform: 'scale(0.95)' }, '100%': { opacity: '1', transform: 'scale(1)' }, }, glowPulse: { '0%, 100%': { boxShadow: '0 0 20px rgba(99, 102, 241, 0.3)' }, '50%': { boxShadow: '0 0 40px rgba(99, 102, 241, 0.6)' }, }, shimmer: { '0%': { backgroundPosition: '-200% 0' }, '100%': { backgroundPosition: '200% 0' }, }, float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-10px)' }, }, }, boxShadow: { 'glass': '0 8px 32px 0 rgba(31, 38, 135, 0.15)', 'glass-lg': '0 16px 48px 0 rgba(31, 38, 135, 0.25)', 'neon': '0 0 20px rgba(99, 102, 241, 0.4), 0 0 60px rgba(99, 102, 241, 0.1)', 'neon-accent': '0 0 20px rgba(6, 182, 212, 0.4), 0 0 60px rgba(6, 182, 212, 0.1)', }, }, }, plugins: [], }; ``` #### 4.2 — Global CSS (`globals.css`) ```css @tailwind base; @tailwind components; @tailwind utilities; /* Google Fonts — loaded via next/font in layout.js for performance */ @layer base { :root { --glass-bg: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); } body { @apply bg-surface-950 text-surface-100 antialiased; } ::selection { @apply bg-primary-500/30 text-white; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { @apply bg-surface-900; } ::-webkit-scrollbar-thumb { @apply bg-surface-700 rounded-full; } ::-webkit-scrollbar-thumb:hover { @apply bg-surface-600; } } @layer components { /* Glassmorphism card */ .glass-card { @apply relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur-xl; box-shadow: var(--glass-shadow); } .glass-card::before { content: ''; @apply absolute inset-0 rounded-2xl; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%, transparent 100% ); pointer-events: none; } /* Gradient text */ .text-gradient { @apply bg-gradient-to-r from-primary-400 via-accent-400 to-primary-300 bg-clip-text text-transparent; } /* Premium button */ .btn-primary { @apply relative inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-primary-600 to-primary-500 px-6 py-3 font-semibold text-white shadow-lg shadow-primary-500/25 transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/40 hover:translate-y-[-2px] active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-primary-400/50 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0; } .btn-secondary { @apply relative inline-flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/5 px-6 py-3 font-semibold text-surface-200 backdrop-blur-sm transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:translate-y-[-2px] active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-white/20; } /* Glow effect */ .glow { @apply relative; } .glow::after { content: ''; @apply absolute -inset-1 -z-10 rounded-2xl opacity-0 transition-opacity duration-500; background: linear-gradient(135deg, theme('colors.primary.500'), theme('colors.accent.500')); filter: blur(20px); } .glow:hover::after { @apply opacity-40; } /* Shimmer loading skeleton */ .skeleton { @apply relative overflow-hidden rounded-lg bg-surface-800; } .skeleton::after { content: ''; @apply absolute inset-0 animate-shimmer; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100% ); background-size: 200% 100%; } } @layer utilities { .text-balance { text-wrap: balance; } } ``` #### 4.3 — Root Layout (`layout.js`) ```jsx import { Inter, Outfit } from 'next/font/google'; import './globals.css'; const inter = Inter({ subsets: ['latin'], variable: '--font-inter', }); const outfit = Outfit({ subsets: ['latin'], variable: '--font-outfit', }); export const metadata = { title: 'App Name — Tagline', description: 'A brief, compelling description of the application for SEO.', keywords: ['relevant', 'keywords', 'here'], authors: [{ name: 'Your Name' }], openGraph: { title: 'App Name — Tagline', description: 'A brief description for social sharing.', type: 'website', }, }; export default function RootLayout({ children }) { return ( {children} ); } ``` --- ### Step 5 — Set Up Supabase #### 5.1 — Environment Variables Create `.env.local`: ```env NEXT_PUBLIC_SUPABASE_URL=your-project-url NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key SUPABASE_SERVICE_ROLE_KEY=your-service-role-key ``` Create `.env.example`: ```env NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here ``` #### 5.2 — Supabase Client (`lib/supabase/client.js`) ```javascript import { createBrowserClient } from '@supabase/auth-helpers-nextjs'; export function createClient() { return createBrowserClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ); } ``` #### 5.3 — Supabase Server Client (`lib/supabase/server.js`) ```javascript import { createServerClient } from '@supabase/auth-helpers-nextjs'; import { cookies } from 'next/headers'; export function createServerSupabaseClient() { const cookieStore = cookies(); return createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, { cookies: { get(name) { return cookieStore.get(name)?.value; }, set(name, value, options) { cookieStore.set({ name, value, ...options }); }, remove(name, options) { cookieStore.set({ name, value: '', ...options }); }, }, } ); } ``` #### 5.4 — Auth Middleware (`middleware.js` at project root) ```javascript import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'; import { NextResponse } from 'next/server'; export async function middleware(req) { const res = NextResponse.next(); const supabase = createMiddlewareClient({ req, res }); const { data: { session }, } = await supabase.auth.getSession(); // Redirect unauthenticated users from protected routes if (!session && req.nextUrl.pathname.startsWith('/dashboard')) { return NextResponse.redirect(new URL('/login', req.url)); } // Redirect authenticated users away from auth pages if (session && (req.nextUrl.pathname === '/login' || req.nextUrl.pathname === '/signup')) { return NextResponse.redirect(new URL('/dashboard', req.url)); } return res; } export const config = { matcher: ['/dashboard/:path*', '/login', '/signup'], }; ``` --- ### Step 6 — Build Reusable UI Components Create the following **base UI components** in `src/components/ui/`. Each component should use the design system classes from Step 4. Refer to the component templates in `examples/components/` for full implementations of: | Component | File | Description | |------------------|-----------------------|----------------------------------------------| | `Button` | `Button.js` | Primary, secondary, ghost, icon variants | | `Card` | `Card.js` | Glass card with hover glow effect | | `Input` | `Input.js` | Styled input with label, error states | | `Modal` | `Modal.js` | Animated overlay modal with framer-motion | | `Badge` | `Badge.js` | Status badges (success, warning, error, info) | | `Avatar` | `Avatar.js` | User avatar with fallback initials | | `Dropdown` | `Dropdown.js` | Animated dropdown menu | | `Toast` | `Toast.js` | Notification toasts with auto-dismiss | | `Skeleton` | `Skeleton.js` | Loading skeleton with shimmer animation | | `EmptyState` | `EmptyState.js` | Illustrated empty state placeholder | > **Design Rules:** > - Every interactive element must have a `transition-all duration-300` > - Hover states should include `translate-y-[-2px]` lift effect > - Use `backdrop-blur` and semi-transparent backgrounds for glass effects > - Shadows should use colored shadows (e.g., `shadow-primary-500/25`) > - All components must have unique `id` attributes for testing --- ### Step 7 — Build Pages For each page, follow this pattern: 1. **SEO**: Set page-specific `metadata` export 2. **Layout**: Use semantic HTML (`
`, `
`, `