aigroup-workflow 2.2.1 → 2.2.3

package/skills/frontend/senior-frontend/scripts/frontend_scaffolder.py

@@ -1,1005 +1,1005 @@
-#!/usr/bin/env python3
-"""
-Frontend Project Scaffolder
-
-Generates a complete Next.js/React project structure with TypeScript,
-Tailwind CSS, and best practice configurations.
-
-Usage:
-    python frontend_scaffolder.py my-app --template nextjs
-    python frontend_scaffolder.py dashboard --template react --features auth,api
-    python frontend_scaffolder.py landing --template nextjs --dry-run
-"""
-
-import argparse
-import json
-import os
-import sys
-from pathlib import Path
-from typing import Dict, List, Optional
-
-
-# Project templates
-TEMPLATES = {
-    "nextjs": {
-        "name": "Next.js 14+ App Router",
-        "description": "Modern Next.js with App Router, Server Components, and TypeScript",
-        "structure": {
-            "app": {
-                "layout.tsx": "ROOT_LAYOUT",
-                "page.tsx": "HOME_PAGE",
-                "globals.css": "GLOBALS_CSS",
-                "(auth)": {
-                    "login": {"page.tsx": "AUTH_PAGE"},
-                    "register": {"page.tsx": "AUTH_PAGE"},
-                },
-                "api": {
-                    "health": {"route.ts": "HEALTH_ROUTE"},
-                },
-            },
-            "components": {
-                "ui": {
-                    "button.tsx": "UI_BUTTON",
-                    "input.tsx": "UI_INPUT",
-                    "card.tsx": "UI_CARD",
-                    "index.ts": "UI_INDEX",
-                },
-                "layout": {
-                    "header.tsx": "LAYOUT_HEADER",
-                    "footer.tsx": "LAYOUT_FOOTER",
-                    "sidebar.tsx": "LAYOUT_SIDEBAR",
-                },
-            },
-            "lib": {
-                "utils.ts": "UTILS",
-                "constants.ts": "CONSTANTS",
-            },
-            "hooks": {
-                "use-debounce.ts": "HOOK_DEBOUNCE",
-                "use-local-storage.ts": "HOOK_LOCAL_STORAGE",
-            },
-            "types": {
-                "index.ts": "TYPES_INDEX",
-            },
-            "public": {
-                ".gitkeep": "EMPTY",
-            },
-        },
-        "config_files": [
-            "next.config.js",
-            "tailwind.config.ts",
-            "tsconfig.json",
-            "postcss.config.js",
-            ".eslintrc.json",
-            ".prettierrc",
-            ".gitignore",
-            "package.json",
-        ],
-    },
-    "react": {
-        "name": "React + Vite",
-        "description": "Modern React with Vite, TypeScript, and Tailwind CSS",
-        "structure": {
-            "src": {
-                "App.tsx": "REACT_APP",
-                "main.tsx": "REACT_MAIN",
-                "index.css": "GLOBALS_CSS",
-                "components": {
-                    "ui": {
-                        "button.tsx": "UI_BUTTON",
-                        "input.tsx": "UI_INPUT",
-                        "card.tsx": "UI_CARD",
-                        "index.ts": "UI_INDEX",
-                    },
-                },
-                "hooks": {
-                    "use-debounce.ts": "HOOK_DEBOUNCE",
-                    "use-local-storage.ts": "HOOK_LOCAL_STORAGE",
-                },
-                "lib": {
-                    "utils.ts": "UTILS",
-                },
-                "types": {
-                    "index.ts": "TYPES_INDEX",
-                },
-            },
-            "public": {
-                ".gitkeep": "EMPTY",
-            },
-        },
-        "config_files": [
-            "vite.config.ts",
-            "tailwind.config.ts",
-            "tsconfig.json",
-            "postcss.config.js",
-            ".eslintrc.json",
-            ".prettierrc",
-            ".gitignore",
-            "package.json",
-            "index.html",
-        ],
-    },
-}
-
-# Feature modules that can be added
-FEATURES = {
-    "auth": {
-        "description": "Authentication with session management",
-        "files": {
-            "lib/auth.ts": "AUTH_LIB",
-            "middleware.ts": "AUTH_MIDDLEWARE",
-            "components/auth/login-form.tsx": "LOGIN_FORM",
-            "components/auth/register-form.tsx": "REGISTER_FORM",
-        },
-        "dependencies": ["next-auth", "@auth/core"],
-    },
-    "api": {
-        "description": "API client with React Query",
-        "files": {
-            "lib/api-client.ts": "API_CLIENT",
-            "lib/query-client.ts": "QUERY_CLIENT",
-            "providers/query-provider.tsx": "QUERY_PROVIDER",
-        },
-        "dependencies": ["@tanstack/react-query", "axios"],
-    },
-    "forms": {
-        "description": "Form handling with React Hook Form + Zod",
-        "files": {
-            "lib/form-utils.ts": "FORM_UTILS",
-            "components/forms/form-field.tsx": "FORM_FIELD",
-        },
-        "dependencies": ["react-hook-form", "@hookform/resolvers", "zod"],
-    },
-    "testing": {
-        "description": "Testing setup with Vitest and Testing Library",
-        "files": {
-            "vitest.config.ts": "VITEST_CONFIG",
-            "src/test/setup.ts": "TEST_SETUP",
-            "src/test/utils.tsx": "TEST_UTILS",
-        },
-        "dependencies": ["vitest", "@testing-library/react", "@testing-library/jest-dom"],
-    },
-    "storybook": {
-        "description": "Component documentation with Storybook",
-        "files": {
-            ".storybook/main.ts": "STORYBOOK_MAIN",
-            ".storybook/preview.ts": "STORYBOOK_PREVIEW",
-        },
-        "dependencies": ["@storybook/react-vite", "@storybook/addon-essentials"],
-    },
-}
-
-# File content templates
-FILE_CONTENTS = {
-    "ROOT_LAYOUT": '''import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import './globals.css';
-
-const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
-
-export const metadata: Metadata = {
-  title: 'My App',
-  description: 'Built with Next.js',
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body className={`${inter.variable} font-sans antialiased`}>
-        {children}
-      </body>
-    </html>
-  );
-}
-''',
-    "HOME_PAGE": '''export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-24">
-      <h1 className="text-4xl font-bold">Welcome</h1>
-      <p className="mt-4 text-lg text-gray-600">
-        Get started by editing app/page.tsx
-      </p>
-    </main>
-  );
-}
-''',
-    "GLOBALS_CSS": '''@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-''',
-    "UI_BUTTON": '''import { forwardRef } from 'react';
-import { cn } from '@/lib/utils';
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'default' | 'destructive' | 'outline' | 'ghost';
-  size?: 'default' | 'sm' | 'lg';
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = 'default', size = 'default', ...props }, ref) => {
-    return (
-      <button
-        className={cn(
-          'inline-flex items-center justify-center rounded-md font-medium transition-colors',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-          'disabled:pointer-events-none disabled:opacity-50',
-          {
-            'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
-            'bg-destructive text-destructive-foreground hover:bg-destructive/90': variant === 'destructive',
-            'border border-input bg-background hover:bg-accent': variant === 'outline',
-            'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
-          },
-          {
-            'h-10 px-4 py-2': size === 'default',
-            'h-9 px-3': size === 'sm',
-            'h-11 px-8': size === 'lg',
-          },
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Button.displayName = 'Button';
-
-export { Button, type ButtonProps };
-''',
-    "UI_INPUT": '''import { forwardRef } from 'react';
-import { cn } from '@/lib/utils';
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  error?: string;
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, error, ...props }, ref) => {
-    return (
-      <div className="w-full">
-        <input
-          className={cn(
-            'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2',
-            'text-sm ring-offset-background file:border-0 file:bg-transparent',
-            'file:text-sm file:font-medium placeholder:text-muted-foreground',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-            'disabled:cursor-not-allowed disabled:opacity-50',
-            error && 'border-destructive focus-visible:ring-destructive',
-            className
-          )}
-          ref={ref}
-          {...props}
-        />
-        {error && <p className="mt-1 text-sm text-destructive">{error}</p>}
-      </div>
-    );
-  }
-);
-
-Input.displayName = 'Input';
-
-export { Input, type InputProps };
-''',
-    "UI_CARD": '''import { cn } from '@/lib/utils';
-
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-function Card({ className, ...props }: CardProps) {
-  return (
-    <div
-      className={cn(
-        'rounded-lg border bg-card text-card-foreground shadow-sm',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardHeader({ className, ...props }: CardProps) {
-  return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
-}
-
-function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
-  return <h3 className={cn('text-2xl font-semibold leading-none', className)} {...props} />;
-}
-
-function CardContent({ className, ...props }: CardProps) {
-  return <div className={cn('p-6 pt-0', className)} {...props} />;
-}
-
-function CardFooter({ className, ...props }: CardProps) {
-  return <div className={cn('flex items-center p-6 pt-0', className)} {...props} />;
-}
-
-export { Card, CardHeader, CardTitle, CardContent, CardFooter };
-''',
-    "UI_INDEX": '''export { Button } from './button';
-export { Input } from './input';
-export { Card, CardHeader, CardTitle, CardContent, CardFooter } from './card';
-''',
-    "UTILS": '''import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export function formatDate(date: Date | string): string {
-  return new Intl.DateTimeFormat('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  }).format(new Date(date));
-}
-
-export function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-''',
-    "CONSTANTS": '''export const APP_NAME = 'My App';
-export const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api';
-
-export const ROUTES = {
-  home: '/',
-  login: '/login',
-  register: '/register',
-  dashboard: '/dashboard',
-} as const;
-
-export const QUERY_KEYS = {
-  user: ['user'],
-  products: ['products'],
-} as const;
-''',
-    "HOOK_DEBOUNCE": '''import { useState, useEffect } from 'react';
-
-export function useDebounce<T>(value: T, delay: number = 500): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-
-  return debouncedValue;
-}
-''',
-    "HOOK_LOCAL_STORAGE": '''import { useState, useEffect } from 'react';
-
-export function useLocalStorage<T>(
-  key: string,
-  initialValue: T
-): [T, (value: T | ((prev: T) => T)) => void] {
-  const [storedValue, setStoredValue] = useState<T>(() => {
-    if (typeof window === 'undefined') return initialValue;
-
-    try {
-      const item = window.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
-    } catch {
-      return initialValue;
-    }
-  });
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      window.localStorage.setItem(key, JSON.stringify(storedValue));
-    }
-  }, [key, storedValue]);
-
-  return [storedValue, setStoredValue];
-}
-''',
-    "TYPES_INDEX": '''export interface User {
-  id: string;
-  email: string;
-  name: string;
-  createdAt: Date;
-}
-
-export interface ApiResponse<T> {
-  data: T;
-  message?: string;
-  error?: string;
-}
-
-export interface PaginatedResponse<T> {
-  data: T[];
-  total: number;
-  page: number;
-  pageSize: number;
-  totalPages: number;
-}
-''',
-    "HEALTH_ROUTE": '''import { NextResponse } from 'next/server';
-
-export async function GET() {
-  return NextResponse.json({
-    status: 'ok',
-    timestamp: new Date().toISOString(),
-  });
-}
-''',
-    "AUTH_PAGE": ''''use client';
-
-export default function AuthPage() {
-  return (
-    <div className="flex min-h-screen items-center justify-center">
-      <div className="w-full max-w-md p-8">
-        <h1 className="text-2xl font-bold text-center">Authentication</h1>
-      </div>
-    </div>
-  );
-}
-''',
-    "LAYOUT_HEADER": '''import Link from 'next/link';
-
-export function Header() {
-  return (
-    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur">
-      <div className="container flex h-14 items-center">
-        <Link href="/" className="font-bold">
-          Logo
-        </Link>
-        <nav className="ml-auto flex gap-4">
-          <Link href="/about" className="text-sm text-muted-foreground hover:text-foreground">
-            About
-          </Link>
-        </nav>
-      </div>
-    </header>
-  );
-}
-''',
-    "LAYOUT_FOOTER": '''export function Footer() {
-  return (
-    <footer className="border-t py-6">
-      <div className="container text-center text-sm text-muted-foreground">
-        <p>&copy; {new Date().getFullYear()} My App. All rights reserved.</p>
-      </div>
-    </footer>
-  );
-}
-''',
-    "LAYOUT_SIDEBAR": '''interface SidebarProps {
-  children?: React.ReactNode;
-}
-
-export function Sidebar({ children }: SidebarProps) {
-  return (
-    <aside className="fixed left-0 top-14 z-30 h-[calc(100vh-3.5rem)] w-64 border-r bg-background">
-      <div className="p-4">{children}</div>
-    </aside>
-  );
-}
-''',
-    "REACT_APP": '''import { Button } from './components/ui';
-
-function App() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-24">
-      <h1 className="text-4xl font-bold">Welcome</h1>
-      <p className="mt-4 text-lg text-gray-600">
-        Get started by editing src/App.tsx
-      </p>
-      <Button className="mt-6">Get Started</Button>
-    </main>
-  );
-}
-
-export default App;
-''',
-    "REACT_MAIN": '''import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-''',
-    "EMPTY": "",
-}
-
-
-def generate_structure(
-    base_path: Path,
-    structure: Dict,
-    dry_run: bool = False
-) -> List[str]:
-    """Generate directory structure recursively."""
-    created_files = []
-
-    for name, content in structure.items():
-        current_path = base_path / name
-
-        if isinstance(content, dict):
-            # It's a directory
-            if not dry_run:
-                current_path.mkdir(parents=True, exist_ok=True)
-            created_files.extend(generate_structure(current_path, content, dry_run))
-        else:
-            # It's a file
-            if not dry_run:
-                current_path.parent.mkdir(parents=True, exist_ok=True)
-                file_content = FILE_CONTENTS.get(content, "")
-                current_path.write_text(file_content)
-            created_files.append(str(current_path))
-
-    return created_files
-
-
-def generate_config_files(
-    project_path: Path,
-    template: str,
-    project_name: str,
-    features: List[str],
-    dry_run: bool = False
-) -> List[str]:
-    """Generate configuration files."""
-    created_files = []
-    config_templates = get_config_templates(project_name, template, features)
-
-    template_config = TEMPLATES[template]
-    for config_file in template_config["config_files"]:
-        file_path = project_path / config_file
-        if config_file in config_templates:
-            if not dry_run:
-                file_path.write_text(config_templates[config_file])
-            created_files.append(str(file_path))
-
-    return created_files
-
-
-def get_config_templates(name: str, template: str, features: List[str]) -> Dict[str, str]:
-    """Get configuration file contents."""
-    deps = {
-        "nextjs": {
-            "dependencies": {
-                "next": "^14.0.0",
-                "react": "^18.2.0",
-                "react-dom": "^18.2.0",
-                "clsx": "^2.0.0",
-                "tailwind-merge": "^2.0.0",
-            },
-            "devDependencies": {
-                "@types/node": "^20.0.0",
-                "@types/react": "^18.2.0",
-                "@types/react-dom": "^18.2.0",
-                "autoprefixer": "^10.0.0",
-                "eslint": "^8.0.0",
-                "eslint-config-next": "^14.0.0",
-                "postcss": "^8.0.0",
-                "prettier": "^3.0.0",
-                "tailwindcss": "^3.4.0",
-                "typescript": "^5.0.0",
-            },
-        },
-        "react": {
-            "dependencies": {
-                "react": "^18.2.0",
-                "react-dom": "^18.2.0",
-                "clsx": "^2.0.0",
-                "tailwind-merge": "^2.0.0",
-            },
-            "devDependencies": {
-                "@types/react": "^18.2.0",
-                "@types/react-dom": "^18.2.0",
-                "@vitejs/plugin-react": "^4.0.0",
-                "autoprefixer": "^10.0.0",
-                "eslint": "^8.0.0",
-                "postcss": "^8.0.0",
-                "prettier": "^3.0.0",
-                "tailwindcss": "^3.4.0",
-                "typescript": "^5.0.0",
-                "vite": "^5.0.0",
-            },
-        },
-    }
-
-    # Add feature dependencies
-    for feature in features:
-        if feature in FEATURES:
-            for dep in FEATURES[feature].get("dependencies", []):
-                deps[template]["dependencies"][dep] = "latest"
-
-    package_json = {
-        "name": name,
-        "version": "0.1.0",
-        "private": True,
-        "scripts": {
-            "dev": "next dev" if template == "nextjs" else "vite",
-            "build": "next build" if template == "nextjs" else "vite build",
-            "start": "next start" if template == "nextjs" else "vite preview",
-            "lint": "eslint . --ext .ts,.tsx",
-            "format": "prettier --write .",
-        },
-        "dependencies": deps[template]["dependencies"],
-        "devDependencies": deps[template]["devDependencies"],
-    }
-
-    return {
-        "package.json": json.dumps(package_json, indent=2),
-        "tsconfig.json": '''{
-  "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [{ "name": "next" }],
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
-''',
-        "tailwind.config.ts": '''import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        ring: 'hsl(var(--ring))',
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-    },
-  },
-  plugins: [],
-};
-
-export default config;
-''',
-        "postcss.config.js": '''module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-''',
-        "next.config.js": '''/** @type {import('next').NextConfig} */
-const nextConfig = {
-  images: {
-    remotePatterns: [],
-    formats: ['image/avif', 'image/webp'],
-  },
-  experimental: {
-    optimizePackageImports: ['lucide-react'],
-  },
-};
-
-module.exports = nextConfig;
-''',
-        "vite.config.ts": '''import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import path from 'path';
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-});
-''',
-        ".eslintrc.json": '''{
-  "extends": ["next/core-web-vitals", "prettier"],
-  "rules": {
-    "react/no-unescaped-entities": "off"
-  }
-}
-''',
-        ".prettierrc": '''{
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "printWidth": 100
-}
-''',
-        ".gitignore": '''# Dependencies
-node_modules/
-.pnp
-.pnp.js
-
-# Build
-.next/
-out/
-dist/
-build/
-
-# Environment
-.env
-.env.local
-.env.*.local
-
-# IDE
-.vscode/
-.idea/
-
-# Debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# OS
-.DS_Store
-Thumbs.db
-
-# Testing
-coverage/
-''',
-        "index.html": '''<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>''' + name + '''</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-''',
-    }
-
-
-def scaffold_project(
-    name: str,
-    output_dir: Path,
-    template: str = "nextjs",
-    features: Optional[List[str]] = None,
-    dry_run: bool = False,
-) -> Dict:
-    """Scaffold a complete frontend project."""
-    features = features or []
-    project_path = output_dir / name
-
-    if project_path.exists() and not dry_run:
-        return {"error": f"Directory already exists: {project_path}"}
-
-    template_config = TEMPLATES.get(template)
-    if not template_config:
-        return {"error": f"Unknown template: {template}"}
-
-    created_files = []
-
-    # Create project directory
-    if not dry_run:
-        project_path.mkdir(parents=True, exist_ok=True)
-
-    # Generate base structure
-    created_files.extend(
-        generate_structure(project_path, template_config["structure"], dry_run)
-    )
-
-    # Generate config files
-    created_files.extend(
-        generate_config_files(project_path, template, name, features, dry_run)
-    )
-
-    # Add feature files
-    for feature in features:
-        if feature in FEATURES:
-            for file_path, content_key in FEATURES[feature]["files"].items():
-                full_path = project_path / file_path
-                if not dry_run:
-                    full_path.parent.mkdir(parents=True, exist_ok=True)
-                    content = FILE_CONTENTS.get(content_key, f"// TODO: Implement {content_key}")
-                    full_path.write_text(content)
-                created_files.append(str(full_path))
-
-    return {
-        "name": name,
-        "template": template,
-        "template_name": template_config["name"],
-        "features": features,
-        "path": str(project_path),
-        "files_created": len(created_files),
-        "files": created_files,
-        "next_steps": [
-            f"cd {name}",
-            "npm install",
-            "npm run dev",
-        ],
-    }
-
-
-def print_result(result: Dict) -> None:
-    """Print scaffolding result."""
-    if "error" in result:
-        print(f"Error: {result['error']}", file=sys.stderr)
-        return
-
-    print(f"\n{'='*60}")
-    print(f"Project Scaffolded: {result['name']}")
-    print(f"{'='*60}")
-    print(f"Template: {result['template_name']}")
-    print(f"Location: {result['path']}")
-    print(f"Files Created: {result['files_created']}")
-
-    if result["features"]:
-        print(f"Features: {', '.join(result['features'])}")
-
-    print(f"\nNext Steps:")
-    for step in result["next_steps"]:
-        print(f"  $ {step}")
-
-    print(f"{'='*60}\n")
-
-
-def main():
-    parser = argparse.ArgumentParser(
-        description="Scaffold a frontend project with best practices"
-    )
-    parser.add_argument(
-        "name",
-        help="Project name (kebab-case recommended)"
-    )
-    parser.add_argument(
-        "--dir", "-d",
-        default=".",
-        help="Output directory (default: current directory)"
-    )
-    parser.add_argument(
-        "--template", "-t",
-        choices=list(TEMPLATES.keys()),
-        default="nextjs",
-        help="Project template (default: nextjs)"
-    )
-    parser.add_argument(
-        "--features", "-f",
-        help="Comma-separated features to add (auth,api,forms,testing,storybook)"
-    )
-    parser.add_argument(
-        "--list-templates",
-        action="store_true",
-        help="List available templates"
-    )
-    parser.add_argument(
-        "--list-features",
-        action="store_true",
-        help="List available features"
-    )
-    parser.add_argument(
-        "--dry-run",
-        action="store_true",
-        help="Show what would be created without creating files"
-    )
-    parser.add_argument(
-        "--json",
-        action="store_true",
-        help="Output in JSON format"
-    )
-
-    args = parser.parse_args()
-
-    if args.list_templates:
-        print("\nAvailable Templates:")
-        for key, template in TEMPLATES.items():
-            print(f"  {key}: {template['name']}")
-            print(f"    {template['description']}")
-        return
-
-    if args.list_features:
-        print("\nAvailable Features:")
-        for key, feature in FEATURES.items():
-            print(f"  {key}: {feature['description']}")
-            deps = ", ".join(feature.get("dependencies", []))
-            if deps:
-                print(f"    Adds: {deps}")
-        return
-
-    features = []
-    if args.features:
-        features = [f.strip() for f in args.features.split(",")]
-        invalid = [f for f in features if f not in FEATURES]
-        if invalid:
-            print(f"Unknown features: {', '.join(invalid)}", file=sys.stderr)
-            print(f"Valid features: {', '.join(FEATURES.keys())}")
-            sys.exit(1)
-
-    result = scaffold_project(
-        name=args.name,
-        output_dir=Path(args.dir),
-        template=args.template,
-        features=features,
-        dry_run=args.dry_run,
-    )
-
-    if args.json:
-        print(json.dumps(result, indent=2))
-    else:
-        print_result(result)
-
-
-if __name__ == "__main__":
-    main()
+#!/usr/bin/env python3
+"""
+Frontend Project Scaffolder
+
+Generates a complete Next.js/React project structure with TypeScript,
+Tailwind CSS, and best practice configurations.
+
+Usage:
+    python frontend_scaffolder.py my-app --template nextjs
+    python frontend_scaffolder.py dashboard --template react --features auth,api
+    python frontend_scaffolder.py landing --template nextjs --dry-run
+"""
+
+import argparse
+import json
+import os
+import sys
+from pathlib import Path
+from typing import Dict, List, Optional
+
+
+# Project templates
+TEMPLATES = {
+    "nextjs": {
+        "name": "Next.js 14+ App Router",
+        "description": "Modern Next.js with App Router, Server Components, and TypeScript",
+        "structure": {
+            "app": {
+                "layout.tsx": "ROOT_LAYOUT",
+                "page.tsx": "HOME_PAGE",
+                "globals.css": "GLOBALS_CSS",
+                "(auth)": {
+                    "login": {"page.tsx": "AUTH_PAGE"},
+                    "register": {"page.tsx": "AUTH_PAGE"},
+                },
+                "api": {
+                    "health": {"route.ts": "HEALTH_ROUTE"},
+                },
+            },
+            "components": {
+                "ui": {
+                    "button.tsx": "UI_BUTTON",
+                    "input.tsx": "UI_INPUT",
+                    "card.tsx": "UI_CARD",
+                    "index.ts": "UI_INDEX",
+                },
+                "layout": {
+                    "header.tsx": "LAYOUT_HEADER",
+                    "footer.tsx": "LAYOUT_FOOTER",
+                    "sidebar.tsx": "LAYOUT_SIDEBAR",
+                },
+            },
+            "lib": {
+                "utils.ts": "UTILS",
+                "constants.ts": "CONSTANTS",
+            },
+            "hooks": {
+                "use-debounce.ts": "HOOK_DEBOUNCE",
+                "use-local-storage.ts": "HOOK_LOCAL_STORAGE",
+            },
+            "types": {
+                "index.ts": "TYPES_INDEX",
+            },
+            "public": {
+                ".gitkeep": "EMPTY",
+            },
+        },
+        "config_files": [
+            "next.config.js",
+            "tailwind.config.ts",
+            "tsconfig.json",
+            "postcss.config.js",
+            ".eslintrc.json",
+            ".prettierrc",
+            ".gitignore",
+            "package.json",
+        ],
+    },
+    "react": {
+        "name": "React + Vite",
+        "description": "Modern React with Vite, TypeScript, and Tailwind CSS",
+        "structure": {
+            "src": {
+                "App.tsx": "REACT_APP",
+                "main.tsx": "REACT_MAIN",
+                "index.css": "GLOBALS_CSS",
+                "components": {
+                    "ui": {
+                        "button.tsx": "UI_BUTTON",
+                        "input.tsx": "UI_INPUT",
+                        "card.tsx": "UI_CARD",
+                        "index.ts": "UI_INDEX",
+                    },
+                },
+                "hooks": {
+                    "use-debounce.ts": "HOOK_DEBOUNCE",
+                    "use-local-storage.ts": "HOOK_LOCAL_STORAGE",
+                },
+                "lib": {
+                    "utils.ts": "UTILS",
+                },
+                "types": {
+                    "index.ts": "TYPES_INDEX",
+                },
+            },
+            "public": {
+                ".gitkeep": "EMPTY",
+            },
+        },
+        "config_files": [
+            "vite.config.ts",
+            "tailwind.config.ts",
+            "tsconfig.json",
+            "postcss.config.js",
+            ".eslintrc.json",
+            ".prettierrc",
+            ".gitignore",
+            "package.json",
+            "index.html",
+        ],
+    },
+}
+
+# Feature modules that can be added
+FEATURES = {
+    "auth": {
+        "description": "Authentication with session management",
+        "files": {
+            "lib/auth.ts": "AUTH_LIB",
+            "middleware.ts": "AUTH_MIDDLEWARE",
+            "components/auth/login-form.tsx": "LOGIN_FORM",
+            "components/auth/register-form.tsx": "REGISTER_FORM",
+        },
+        "dependencies": ["next-auth", "@auth/core"],
+    },
+    "api": {
+        "description": "API client with React Query",
+        "files": {
+            "lib/api-client.ts": "API_CLIENT",
+            "lib/query-client.ts": "QUERY_CLIENT",
+            "providers/query-provider.tsx": "QUERY_PROVIDER",
+        },
+        "dependencies": ["@tanstack/react-query", "axios"],
+    },
+    "forms": {
+        "description": "Form handling with React Hook Form + Zod",
+        "files": {
+            "lib/form-utils.ts": "FORM_UTILS",
+            "components/forms/form-field.tsx": "FORM_FIELD",
+        },
+        "dependencies": ["react-hook-form", "@hookform/resolvers", "zod"],
+    },
+    "testing": {
+        "description": "Testing setup with Vitest and Testing Library",
+        "files": {
+            "vitest.config.ts": "VITEST_CONFIG",
+            "src/test/setup.ts": "TEST_SETUP",
+            "src/test/utils.tsx": "TEST_UTILS",
+        },
+        "dependencies": ["vitest", "@testing-library/react", "@testing-library/jest-dom"],
+    },
+    "storybook": {
+        "description": "Component documentation with Storybook",
+        "files": {
+            ".storybook/main.ts": "STORYBOOK_MAIN",
+            ".storybook/preview.ts": "STORYBOOK_PREVIEW",
+        },
+        "dependencies": ["@storybook/react-vite", "@storybook/addon-essentials"],
+    },
+}
+
+# File content templates
+FILE_CONTENTS = {
+    "ROOT_LAYOUT": '''import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
+
+export const metadata: Metadata = {
+  title: 'My App',
+  description: 'Built with Next.js',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={`${inter.variable} font-sans antialiased`}>
+        {children}
+      </body>
+    </html>
+  );
+}
+''',
+    "HOME_PAGE": '''export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-24">
+      <h1 className="text-4xl font-bold">Welcome</h1>
+      <p className="mt-4 text-lg text-gray-600">
+        Get started by editing app/page.tsx
+      </p>
+    </main>
+  );
+}
+''',
+    "GLOBALS_CSS": '''@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+''',
+    "UI_BUTTON": '''import { forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'destructive' | 'outline' | 'ghost';
+  size?: 'default' | 'sm' | 'lg';
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'default', ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          'inline-flex items-center justify-center rounded-md font-medium transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:pointer-events-none disabled:opacity-50',
+          {
+            'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
+            'bg-destructive text-destructive-foreground hover:bg-destructive/90': variant === 'destructive',
+            'border border-input bg-background hover:bg-accent': variant === 'outline',
+            'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
+          },
+          {
+            'h-10 px-4 py-2': size === 'default',
+            'h-9 px-3': size === 'sm',
+            'h-11 px-8': size === 'lg',
+          },
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button, type ButtonProps };
+''',
+    "UI_INPUT": '''import { forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  error?: string;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, error, ...props }, ref) => {
+    return (
+      <div className="w-full">
+        <input
+          className={cn(
+            'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2',
+            'text-sm ring-offset-background file:border-0 file:bg-transparent',
+            'file:text-sm file:font-medium placeholder:text-muted-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            error && 'border-destructive focus-visible:ring-destructive',
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+        {error && <p className="mt-1 text-sm text-destructive">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export { Input, type InputProps };
+''',
+    "UI_CARD": '''import { cn } from '@/lib/utils';
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function Card({ className, ...props }: CardProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: CardProps) {
+  return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
+}
+
+function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn('text-2xl font-semibold leading-none', className)} {...props} />;
+}
+
+function CardContent({ className, ...props }: CardProps) {
+  return <div className={cn('p-6 pt-0', className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: CardProps) {
+  return <div className={cn('flex items-center p-6 pt-0', className)} {...props} />;
+}
+
+export { Card, CardHeader, CardTitle, CardContent, CardFooter };
+''',
+    "UI_INDEX": '''export { Button } from './button';
+export { Input } from './input';
+export { Card, CardHeader, CardTitle, CardContent, CardFooter } from './card';
+''',
+    "UTILS": '''import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatDate(date: Date | string): string {
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(new Date(date));
+}
+
+export function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+''',
+    "CONSTANTS": '''export const APP_NAME = 'My App';
+export const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api';
+
+export const ROUTES = {
+  home: '/',
+  login: '/login',
+  register: '/register',
+  dashboard: '/dashboard',
+} as const;
+
+export const QUERY_KEYS = {
+  user: ['user'],
+  products: ['products'],
+} as const;
+''',
+    "HOOK_DEBOUNCE": '''import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+''',
+    "HOOK_LOCAL_STORAGE": '''import { useState, useEffect } from 'react';
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, (value: T | ((prev: T) => T)) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === 'undefined') return initialValue;
+
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(key, JSON.stringify(storedValue));
+    }
+  }, [key, storedValue]);
+
+  return [storedValue, setStoredValue];
+}
+''',
+    "TYPES_INDEX": '''export interface User {
+  id: string;
+  email: string;
+  name: string;
+  createdAt: Date;
+}
+
+export interface ApiResponse<T> {
+  data: T;
+  message?: string;
+  error?: string;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+}
+''',
+    "HEALTH_ROUTE": '''import { NextResponse } from 'next/server';
+
+export async function GET() {
+  return NextResponse.json({
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+  });
+}
+''',
+    "AUTH_PAGE": ''''use client';
+
+export default function AuthPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="w-full max-w-md p-8">
+        <h1 className="text-2xl font-bold text-center">Authentication</h1>
+      </div>
+    </div>
+  );
+}
+''',
+    "LAYOUT_HEADER": '''import Link from 'next/link';
+
+export function Header() {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur">
+      <div className="container flex h-14 items-center">
+        <Link href="/" className="font-bold">
+          Logo
+        </Link>
+        <nav className="ml-auto flex gap-4">
+          <Link href="/about" className="text-sm text-muted-foreground hover:text-foreground">
+            About
+          </Link>
+        </nav>
+      </div>
+    </header>
+  );
+}
+''',
+    "LAYOUT_FOOTER": '''export function Footer() {
+  return (
+    <footer className="border-t py-6">
+      <div className="container text-center text-sm text-muted-foreground">
+        <p>&copy; {new Date().getFullYear()} My App. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+}
+''',
+    "LAYOUT_SIDEBAR": '''interface SidebarProps {
+  children?: React.ReactNode;
+}
+
+export function Sidebar({ children }: SidebarProps) {
+  return (
+    <aside className="fixed left-0 top-14 z-30 h-[calc(100vh-3.5rem)] w-64 border-r bg-background">
+      <div className="p-4">{children}</div>
+    </aside>
+  );
+}
+''',
+    "REACT_APP": '''import { Button } from './components/ui';
+
+function App() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-24">
+      <h1 className="text-4xl font-bold">Welcome</h1>
+      <p className="mt-4 text-lg text-gray-600">
+        Get started by editing src/App.tsx
+      </p>
+      <Button className="mt-6">Get Started</Button>
+    </main>
+  );
+}
+
+export default App;
+''',
+    "REACT_MAIN": '''import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+''',
+    "EMPTY": "",
+}
+
+
+def generate_structure(
+    base_path: Path,
+    structure: Dict,
+    dry_run: bool = False
+) -> List[str]:
+    """Generate directory structure recursively."""
+    created_files = []
+
+    for name, content in structure.items():
+        current_path = base_path / name
+
+        if isinstance(content, dict):
+            # It's a directory
+            if not dry_run:
+                current_path.mkdir(parents=True, exist_ok=True)
+            created_files.extend(generate_structure(current_path, content, dry_run))
+        else:
+            # It's a file
+            if not dry_run:
+                current_path.parent.mkdir(parents=True, exist_ok=True)
+                file_content = FILE_CONTENTS.get(content, "")
+                current_path.write_text(file_content)
+            created_files.append(str(current_path))
+
+    return created_files
+
+
+def generate_config_files(
+    project_path: Path,
+    template: str,
+    project_name: str,
+    features: List[str],
+    dry_run: bool = False
+) -> List[str]:
+    """Generate configuration files."""
+    created_files = []
+    config_templates = get_config_templates(project_name, template, features)
+
+    template_config = TEMPLATES[template]
+    for config_file in template_config["config_files"]:
+        file_path = project_path / config_file
+        if config_file in config_templates:
+            if not dry_run:
+                file_path.write_text(config_templates[config_file])
+            created_files.append(str(file_path))
+
+    return created_files
+
+
+def get_config_templates(name: str, template: str, features: List[str]) -> Dict[str, str]:
+    """Get configuration file contents."""
+    deps = {
+        "nextjs": {
+            "dependencies": {
+                "next": "^14.0.0",
+                "react": "^18.2.0",
+                "react-dom": "^18.2.0",
+                "clsx": "^2.0.0",
+                "tailwind-merge": "^2.0.0",
+            },
+            "devDependencies": {
+                "@types/node": "^20.0.0",
+                "@types/react": "^18.2.0",
+                "@types/react-dom": "^18.2.0",
+                "autoprefixer": "^10.0.0",
+                "eslint": "^8.0.0",
+                "eslint-config-next": "^14.0.0",
+                "postcss": "^8.0.0",
+                "prettier": "^3.0.0",
+                "tailwindcss": "^3.4.0",
+                "typescript": "^5.0.0",
+            },
+        },
+        "react": {
+            "dependencies": {
+                "react": "^18.2.0",
+                "react-dom": "^18.2.0",
+                "clsx": "^2.0.0",
+                "tailwind-merge": "^2.0.0",
+            },
+            "devDependencies": {
+                "@types/react": "^18.2.0",
+                "@types/react-dom": "^18.2.0",
+                "@vitejs/plugin-react": "^4.0.0",
+                "autoprefixer": "^10.0.0",
+                "eslint": "^8.0.0",
+                "postcss": "^8.0.0",
+                "prettier": "^3.0.0",
+                "tailwindcss": "^3.4.0",
+                "typescript": "^5.0.0",
+                "vite": "^5.0.0",
+            },
+        },
+    }
+
+    # Add feature dependencies
+    for feature in features:
+        if feature in FEATURES:
+            for dep in FEATURES[feature].get("dependencies", []):
+                deps[template]["dependencies"][dep] = "latest"
+
+    package_json = {
+        "name": name,
+        "version": "0.1.0",
+        "private": True,
+        "scripts": {
+            "dev": "next dev" if template == "nextjs" else "vite",
+            "build": "next build" if template == "nextjs" else "vite build",
+            "start": "next start" if template == "nextjs" else "vite preview",
+            "lint": "eslint . --ext .ts,.tsx",
+            "format": "prettier --write .",
+        },
+        "dependencies": deps[template]["dependencies"],
+        "devDependencies": deps[template]["devDependencies"],
+    }
+
+    return {
+        "package.json": json.dumps(package_json, indent=2),
+        "tsconfig.json": '''{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+''',
+        "tailwind.config.ts": '''import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        ring: 'hsl(var(--ring))',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
+''',
+        "postcss.config.js": '''module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+''',
+        "next.config.js": '''/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [],
+    formats: ['image/avif', 'image/webp'],
+  },
+  experimental: {
+    optimizePackageImports: ['lucide-react'],
+  },
+};
+
+module.exports = nextConfig;
+''',
+        "vite.config.ts": '''import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});
+''',
+        ".eslintrc.json": '''{
+  "extends": ["next/core-web-vitals", "prettier"],
+  "rules": {
+    "react/no-unescaped-entities": "off"
+  }
+}
+''',
+        ".prettierrc": '''{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}
+''',
+        ".gitignore": '''# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Build
+.next/
+out/
+dist/
+build/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Testing
+coverage/
+''',
+        "index.html": '''<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>''' + name + '''</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+''',
+    }
+
+
+def scaffold_project(
+    name: str,
+    output_dir: Path,
+    template: str = "nextjs",
+    features: Optional[List[str]] = None,
+    dry_run: bool = False,
+) -> Dict:
+    """Scaffold a complete frontend project."""
+    features = features or []
+    project_path = output_dir / name
+
+    if project_path.exists() and not dry_run:
+        return {"error": f"Directory already exists: {project_path}"}
+
+    template_config = TEMPLATES.get(template)
+    if not template_config:
+        return {"error": f"Unknown template: {template}"}
+
+    created_files = []
+
+    # Create project directory
+    if not dry_run:
+        project_path.mkdir(parents=True, exist_ok=True)
+
+    # Generate base structure
+    created_files.extend(
+        generate_structure(project_path, template_config["structure"], dry_run)
+    )
+
+    # Generate config files
+    created_files.extend(
+        generate_config_files(project_path, template, name, features, dry_run)
+    )
+
+    # Add feature files
+    for feature in features:
+        if feature in FEATURES:
+            for file_path, content_key in FEATURES[feature]["files"].items():
+                full_path = project_path / file_path
+                if not dry_run:
+                    full_path.parent.mkdir(parents=True, exist_ok=True)
+                    content = FILE_CONTENTS.get(content_key, f"// TODO: Implement {content_key}")
+                    full_path.write_text(content)
+                created_files.append(str(full_path))
+
+    return {
+        "name": name,
+        "template": template,
+        "template_name": template_config["name"],
+        "features": features,
+        "path": str(project_path),
+        "files_created": len(created_files),
+        "files": created_files,
+        "next_steps": [
+            f"cd {name}",
+            "npm install",
+            "npm run dev",
+        ],
+    }
+
+
+def print_result(result: Dict) -> None:
+    """Print scaffolding result."""
+    if "error" in result:
+        print(f"Error: {result['error']}", file=sys.stderr)
+        return
+
+    print(f"\n{'='*60}")
+    print(f"Project Scaffolded: {result['name']}")
+    print(f"{'='*60}")
+    print(f"Template: {result['template_name']}")
+    print(f"Location: {result['path']}")
+    print(f"Files Created: {result['files_created']}")
+
+    if result["features"]:
+        print(f"Features: {', '.join(result['features'])}")
+
+    print(f"\nNext Steps:")
+    for step in result["next_steps"]:
+        print(f"  $ {step}")
+
+    print(f"{'='*60}\n")
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description="Scaffold a frontend project with best practices"
+    )
+    parser.add_argument(
+        "name",
+        help="Project name (kebab-case recommended)"
+    )
+    parser.add_argument(
+        "--dir", "-d",
+        default=".",
+        help="Output directory (default: current directory)"
+    )
+    parser.add_argument(
+        "--template", "-t",
+        choices=list(TEMPLATES.keys()),
+        default="nextjs",
+        help="Project template (default: nextjs)"
+    )
+    parser.add_argument(
+        "--features", "-f",
+        help="Comma-separated features to add (auth,api,forms,testing,storybook)"
+    )
+    parser.add_argument(
+        "--list-templates",
+        action="store_true",
+        help="List available templates"
+    )
+    parser.add_argument(
+        "--list-features",
+        action="store_true",
+        help="List available features"
+    )
+    parser.add_argument(
+        "--dry-run",
+        action="store_true",
+        help="Show what would be created without creating files"
+    )
+    parser.add_argument(
+        "--json",
+        action="store_true",
+        help="Output in JSON format"
+    )
+
+    args = parser.parse_args()
+
+    if args.list_templates:
+        print("\nAvailable Templates:")
+        for key, template in TEMPLATES.items():
+            print(f"  {key}: {template['name']}")
+            print(f"    {template['description']}")
+        return
+
+    if args.list_features:
+        print("\nAvailable Features:")
+        for key, feature in FEATURES.items():
+            print(f"  {key}: {feature['description']}")
+            deps = ", ".join(feature.get("dependencies", []))
+            if deps:
+                print(f"    Adds: {deps}")
+        return
+
+    features = []
+    if args.features:
+        features = [f.strip() for f in args.features.split(",")]
+        invalid = [f for f in features if f not in FEATURES]
+        if invalid:
+            print(f"Unknown features: {', '.join(invalid)}", file=sys.stderr)
+            print(f"Valid features: {', '.join(FEATURES.keys())}")
+            sys.exit(1)
+
+    result = scaffold_project(
+        name=args.name,
+        output_dir=Path(args.dir),
+        template=args.template,
+        features=features,
+        dry_run=args.dry_run,
+    )
+
+    if args.json:
+        print(json.dumps(result, indent=2))
+    else:
+        print_result(result)
+
+
+if __name__ == "__main__":
+    main()