--- name: jack-premium-site-system description: > Orchestrate a Jack Roberts inspired premium 3D/scroll website workflow from brand and purpose through asset prompting, scroll-driven 3D implementation, SEO polish, and optional launch. Use when the user asks to build, redesign, pitch, or publish a premium animated website, 3D scroll site, scroll-stopping landing page, AI-built client website, AntiGravity-style site, or "Jack Roberts" website system. Route to the narrower Jack skills when only one part is needed. --- # Jack Premium Site System Use this skill as the top-level playbook for premium AI-assisted websites inspired by Jack Roberts' public teaching on 3D scroll-based client websites. Source attribution: this workflow is a public-safe synthesis of Jack Roberts' YouTube video at https://www.youtube.com/watch?v=TZUTe7s11-I and his linked Skool page at https://www.skool.com/aiautomationsbyjack/about?ref=d4618abaabee44c7ac3c146938a72100&el=youtube_description_paid. Do not copy or redistribute Jack's raw PDFs, zips, templates, prompts, or downloaded skill text unless the user has reviewed redistribution rights. ## When To Use - The user wants an end-to-end premium website workflow, not only an animation or SEO audit. - The user wants to pitch a redesigned site to a business or create a client-facing demo. - The request includes brand extraction, competitor research, scroll-based visual assets, SEO, GitHub/Vercel, or publishing. - The user says "Jack Roberts", "3D scroll website", "scroll-stopping website", "premium AI website", or "AntiGravity website". If the request is narrow, use a narrower skill instead: - `jack-website-intelligence` for brand/competitor research and build brief. - `jack-scroll-asset-prompts` for image/video prompt sets. - `jack-scroll-3d-sites` for frame-sequence or video-on-scroll implementation. - `jack-seo-launch-audit` for SEO, metadata, structured data, and launch checks. ## Pair With Existing Skills - `design-taste-frontend` for anti-generic visual direction. - `emil-design-eng` and `emil-animation-polish` for interaction feel, easing, and transitions. - `fluid-animations` for direct-manipulation, spring, snap, velocity, or tactile scroll/gesture behavior. - `modern-web-guidance` plus Context7 for current Next.js, HTML/CSS, GSAP, Framer Motion, Three.js, Vercel, or platform docs. - `playwright-cli` for screenshots, responsive checks, and real-browser verification. - `seo-audit`, `schema`, `site-architecture`, or `ai-seo` when deeper SEO specialization is needed. ## Public-Safe Operating Rules - Treat Firecrawl, GitHub, Vercel, browser connectors, and image/video generators as optional tools. Do not assume they exist. - Keep Context7 as the only public-standard MCP recommendation. - Never request, print, commit, zip, or screenshot API keys, OAuth tokens, MCP secrets, browser profiles, or account sessions. - Ask before remote side effects: creating repos, deploying, buying domains, sending emails, charging credits, or publishing. - Use a client's existing site for structure, brand cues, and content understanding, not for close visual copying. - Do not invent testimonials, reviews, certifications, pricing, or claims. Mark placeholders clearly when real data is missing. - Verify reduced-motion, mobile layout, performance, accessibility, and responsive text before calling the work done. ## Workflow 1. Define the commercial goal. - Identify the brand, audience, offer, primary CTA, desired conversion, and what "premium" should mean for this business. - If this is for a real client, confirm the user has rights to use the brand assets and public content. 2. Run website intelligence. - Use `jack-website-intelligence` to extract brand cues, summarize the current site, inspect competitors, and produce a build brief. - Stop for user approval before implementation if the brief changes positioning, copy, or page structure. 3. Create scroll-stop visual asset prompts. - Use `jack-scroll-asset-prompts` to produce a coordinated start frame, end frame, and transition prompt. - Prefer clean backgrounds, stable camera angle, consistent lighting, and generous object margins for downstream animation. 4. Build the scroll-driven experience. - Use `jack-scroll-3d-sites` to implement either a video-controlled scroll section or an extracted frame-sequence canvas. - Choose the stack that fits the project: vanilla HTML/CSS/JS for portable demos, or Next.js/React when the app already uses it. 5. Extend pages and SEO. - Use `jack-seo-launch-audit` to add page metadata, structured data, social previews, sitemap/robots guidance, internal links, and an SEO report. - Add marketing skills only when the request needs deeper keyword, CRO, content, or positioning work. 6. Validate and optionally launch. - Run local checks, browser screenshots, mobile/responsive checks, and performance sanity checks. - Only deploy through GitHub, Vercel, or another host after explicit user approval and with their configured credentials. ## Default Deliverables For end-to-end tasks, produce: - `research/01-brand-snapshot.md` - `research/02-competitor-analysis.md` - `research/03-build-brief.md` - asset prompt set or links to generated assets - implemented local website - SEO/launch audit report - clear notes on optional external setup still required Keep deliverables proportional. For quick demos, make a compact version instead of a full agency report.