Skill This
AI Skill Report Card

Full Stack AI Cinematic Development

B-72·May 22, 2026·Source: Web

Full-Stack AI Cinematic Development

Quick Start12 / 15
Bash
# Project initialization
npx create-next-app@latest ai-cinematic-app --typescript --tailwind --app
cd ai-cinematic-app
npm install framer-motion @supabase/supabase-js @google-cloud/storage openai
npm install -D prisma @types/node
TypeScript
// app/layout.tsx - Base cinematic setup
import { Inter } from 'next/font/google'
import { motion } from 'framer-motion'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.8 }}
        >
          {children}
        </motion.div>
      </body>
    </html>
  )
}
Recommendation▾
Reduce verbosity - assumes too little about Claude's knowledge of Next.js, React, and full-stack development basics
Workflow15 / 15

Progress:

  • Architecture & Planning - Design system architecture and tech stack
  • Environment Setup - Configure development environment and tools
  • Database Design - Create schemas and relationships
  • Authentication System - Implement Google Auth with security
  • Backend APIs - Build secure API endpoints
  • AI Integration - Connect AI services and prompting logic
  • Frontend Components - Create cinematic UI components
  • State Management - Implement global state and real-time updates
  • Animation System - Build advanced motion graphics
  • Payment Integration - Add Stripe/payment processing
  • Testing Suite - Comprehensive testing coverage
  • Optimization - Performance and bundle optimization
  • Deployment Pipeline - CI/CD and production deployment
  • Monitoring & Analytics - Error tracking and user analytics

Step 1: Architecture & Planning

TypeScript
// project-structure.md
src/
├── app/                    # Next.js 13+ app directory
├── components/
│   ├── ui/                # Base UI components
│   ├── cinematic/         # Animation components
│   └── ai/                # AI-specific components
├── lib/
│   ├── auth/              # Authentication logic
│   ├── database/          # Database utilities
│   ├── ai/                # AI service integrations
│   └── animations/        # Animation utilities
├── hooks/                 # Custom React hooks
├── types/                 # TypeScript definitions
└── utils/                 # Helper functions

Step 2: Database Schema

SQL
-- schema.sql
CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR UNIQUE NOT NULL,
  google_id VARCHAR UNIQUE,
  avatar_url TEXT,
  subscription_tier VARCHAR DEFAULT 'free',
  created_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE ai_sessions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id),
  prompt TEXT NOT NULL,
  response JSONB,
  model VARCHAR,
  tokens_used INTEGER,
  created_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE projects (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id),
  title VARCHAR NOT NULL,
  description TEXT,
  config JSONB,
  is_published BOOLEAN DEFAULT false,
  created_at TIMESTAMP DEFAULT NOW()
);

Step 3: Google Authentication Setup

TypeScript
// lib/auth/google-auth.ts
import { GoogleAuth } from 'google-auth-library'

const auth = new GoogleAuth({
  scopes: ['https://www.googleapis.com/auth/userinfo.email'],
  keyFilename: process.env.GOOGLE_SERVICE_ACCOUNT_KEY
})

export async function verifyGoogleToken(token: string) {
  try {
    const client = await auth.getClient()
    const ticket = await client.verifyIdToken({
      idToken: token,
      audience: process.env.GOOGLE_CLIENT_ID
    })
    return ticket.getPayload()
  } catch (error) {
    throw new Error('Invalid token')
  }
}
TypeScript
// components/auth/GoogleSignIn.tsx
'use client'
import { useState } from 'react'
import { motion } from 'framer-motion'

export default function GoogleSignIn() {
  const [isLoading, setIsLoading] = useState(false)

  const handleGoogleSignIn = async () => {
    setIsLoading(true)
    // Google Sign-In implementation
    window.google.accounts.id.prompt()
  }

  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      onClick={handleGoogleSignIn}
      className="bg-white text-gray-900 px-6 py-3 rounded-lg shadow-lg"
    >
      {isLoading ? 'Signing in...' : 'Continue with Google'}
    </motion.button>
  )
}

Step 4: Backend API Development

TypeScript
// app/api/ai/chat/route.ts
import { NextRequest, NextResponse } from 'next/server'
import OpenAI from 'openai'
import { verifyAuth } from '@/lib/auth/verify'

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
})

export async function POST(request: NextRequest) {
  try {
    const user = await verifyAuth(request)
    const { prompt, model = 'gpt-4' } = await request.json()

    const completion = await openai.chat.completions.create({
      model,
      messages: [
        {
          role: 'system',
          content: 'You are a creative AI assistant for cinematic web experiences.'
        },
        { role: 'user', content: prompt }
      ],
      temperature: 0.7,
      max_tokens: 1000
    })

    // Log usage to database
    await logAIUsage(user.id, prompt, completion, model)

    return NextResponse.json({
      response: completion.choices[0].message.content,
      usage: completion.usage
    })
  } catch (error) {
    return NextResponse.json(
      { error: 'AI request failed' },
      { status: 500 }
    )
  }
}

Step 5: Cinematic Frontend Components

TypeScript
// components/cinematic/HeroSection.tsx
'use client'
import { motion, useScroll, useTransform } from 'framer-motion'
import { useRef } from 'react'

export default function CinematicHero() {
  const ref = useRef(null)
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start start', 'end start']
  })

  const y = useTransform(scrollYProgress, [0, 1], ['0%', '50%'])
  const opacity = useTransform(scrollYProgress, [0, 1], [1, 0])

  return (
    <div ref={ref} className="relative h-screen overflow-hidden">
      <motion.div
        style={{ y, opacity }}
        className="absolute inset-0 bg-gradient-to-b from-purple-900 via-blue-900 to-black"
      >
        <motion.h1
          initial={{ y: 100, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 1.2, ease: 'easeOut' }}
          className="text-7xl font-bold text-white pt-48 text-center"
        >
          AI Cinematic Experience
        </motion.h1>
      </motion.div>
    </div>
  )
}

Step 6: State Management with Zustand

TypeScript
// lib/store/app-store.ts
import { create } from 'zustand'
import { subscribeWithSelector } from 'zustand/middleware'

interface AppState {
  user: User | null
  aiSessions: AISession[]
  isLoading: boolean
  currentProject: Project | null
  setUser: (user: User | null) => void
  addAISession: (session: AISession) => void
  updateProject: (project: Project) => void
}

export const useAppStore = create<AppState>()(
  subscribeWithSelector((set, get) => ({
    user: null,
    aiSessions: [],
    isLoading: false,
    currentProject: null,

    setUser: (user) => set({ user }),
    
    addAISession: (session) =>
      set((state) => ({
        aiSessions: [session, ...state.aiSessions]
      })),

    updateProject: (project) =>
      set({ currentProject: project })
  }))
)

Step 7: Real-time Features

TypeScript
// hooks/useRealtime.ts
import { useEffect } from 'react'
import { supabase } from '@/lib/supabase'
import { useAppStore } from '@/lib/store/app-store'

export function useRealtimeUpdates() {
  const { user, addAISession } = useAppStore()

  useEffect(() => {
    if (!user) return

    const channel = supabase
      .channel('ai-sessions')
      .on(
        'postgres_changes',
        {
          event: 'INSERT',
          schema: 'public',
          table: 'ai_sessions',
          filter: `user_id=eq.${user.id}`
        },
        (payload) => {
          addAISession(payload.new as AISession)
        }
      )
      .subscribe()

    return () => {
      supabase.removeChannel(channel)
    }
  }, [user, addAISession])
}

Step 8: Advanced Animations

TypeScript
// components/cinematic/ParallaxScene.tsx
import { motion, useScroll, useTransform, MotionValue } from 'framer-motion'

function useParallax(value: MotionValue<number>, distance: number) {
  return useTransform(value, [0, 1], [-distance, distance])
}

export default function ParallaxScene({ children }) {
  const { scrollY } = useScroll()
  const y1 = useParallax(scrollY, -300)
  const y2 = useParallax(scrollY, -200)
  const y3 = useParallax(scrollY, -100)

  return (
    <div className="relative overflow-hidden">
      <motion.div style={{ y: y1 }} className="absolute inset-0 z-0">
        {/* Background layer */}
      </motion.div>
      <motion.div style={{ y: y2 }} className="absolute inset-0 z-10">
        {/* Mid layer */}
      </motion.div>
      <motion.div style={{ y: y3 }} className="relative z-20">
        {children}
      </motion.div>
    </div>
  )
}

Step 9: Testing Implementation

TypeScript
// __tests__/api/ai/chat.test.ts
import { POST } from '@/app/api/ai/chat/route'
import { NextRequest } from 'next/server'

describe('/api/ai/chat', () => {
  it('should return AI response for authenticated user', async () => {
    const request = new NextRequest('http://localhost/api/ai/chat', {
      method: 'POST',
      body: JSON.stringify({
        prompt: 'Create a cinematic intro',
        model: 'gpt-4'
      }),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer valid-token'
      }
    })

    const response = await POST(request)
    const data = await response.json()

    expect(response.status).toBe(200)
    expect(data).toHaveProperty('response')
    expect(data).toHaveProperty('usage')
  })
})
Recommendation▾
Provide concrete input/output examples instead of abstract descriptions like 'User uploads image + prompt' - show actual code examples with specific inputs and expected outputs
Examples10 / 20

Example 1: AI-Powered Content Generation Input: User uploads image + prompt "Create cinematic description" Output: Animated card with AI-generated content, smooth transitions, real-time updates

Example 2: Interactive Dashboard Input: User authentication + project selection Output: Cinematic dashboard with parallax effects, real-time data visualization, smooth page transitions

Example 3: Payment Integration Input: User selects premium features Output: Animated checkout flow with Stripe integration, success animations

Recommendation▾
Focus the skill scope - currently tries to cover too much (authentication, payments, AI, animations, deployment) making it overwhelming rather than actionable
Best Practices
  • Performance First: Use React.memo, useMemo, and useCallback for expensive operations
  • Animation Guidelines: Keep animations under 60fps, use transform and opacity for smooth performance
  • Security: Always validate inputs, use environment variables, implement rate limiting
  • Code Organization: Separate concerns, use TypeScript strictly, implement proper error boundaries
  • User Experience: Loading states, error handling, accessibility compliance
  • AI Integration: Implement token usage tracking, content moderation, response caching
Common Pitfalls
  • Over-animating: Too many simultaneous animations hurt performance
  • Authentication bypass: Always verify tokens server-side
  • Memory leaks: Clean up event listeners and subscriptions
  • Bundle size: Code-split heavy libraries like Framer Motion
  • Rate limiting: Implement proper API rate limiting for AI endpoints
  • State management: Avoid prop drilling, use global state wisely
  • Database queries: Always use prepared statements, implement connection pooling
  • Error handling: Don't expose internal errors to client
  • SEO neglect: Implement proper meta tags and structured data
0
Grade B-AI Skill Framework
Scorecard
Criteria Breakdown
Quick Start
12/15
Workflow
15/15
Examples
10/20
Completeness
12/20
Format
15/15
Conciseness
8/15
Save to My Skills