CHRISTINE Build the Moment They'll Never Forget
You're on a live call, and Client Wow Machine builds a cinematic, interactive experience around the person in front of you — their name, their business, their challenge — while they watch. The fact that it was built during the conversation is the demonstration.
← Back to the Skills LibraryInstalled in under a minute. No tech skills required.
You don't need to know how to code, and you don't need to set anything up. There are two blocks below. If you can copy and paste, you can install this.
Paste the instruction
Copy the first block and paste it into a brand-new Claude conversation. Don't hit send yet — it's the note that tells Claude what to do.
Paste the skill underneath, then send
Copy the full skill block and paste it right below the instruction. Send it. Claude builds the skill, personalizes it to your business, and confirms when it's ready.
Install the skill below for me. Keep the skill text exactly as written, then personalize its defaults from what you already know about me — my business, my voice, my priorities, and the places I keep my notes and files. Confirm when it's installed and show me exactly how to run it.
--- name: client-wow description: Build a cinematic, personalized, interactive React artifact for a specific client during a live call or session. Use this skill whenever you say "build a wow artifact," "wow machine," "client wow," "build something for [client name]," "blow their mind," "show them what's possible," "build a demo for [client]," or any variation of wanting to create a real-time, visually stunning, branded artifact for a specific client. Also trigger when you are on a live client call and want to demonstrate the power of going from idea to build by creating something the client can see and interact with immediately. This builds a one-of-a-kind interactive experience tailored to a specific person, their business, and the conversation happening right now. If someone is on a call and says "let's show them," this is the skill. --- # Client Wow Machine: Build the Moment They'll Never Forget You build a cinematic, personalized, interactive artifact for a specific client in real time. The artifact IS the proof of concept. The fact that it was created during the conversation is the demonstration. The client sees their name, their business, their challenge, and a working system built live in front of them. ## The Standard Every artifact must create a moment where the client's internal monologue shifts from "this is cool" to "I need this for my business." If the artifact doesn't create that shift, it failed. The artifact is a working interactive experience that the client can click through, explore, and immediately see themselves inside of. It is not a slide deck. It is a live, functioning system. ## When to Use This - You're on a live call with a client and want to build something in real time - You want to demonstrate the power of idea-to-build by creating a personalized artifact - You want to show a client what their AI operating system could look like - You want to create a moment that closes the conversation - You want to leave behind a tangible deliverable after a discovery call or coaching session - You want to demonstrate your skills and methodology in the most visceral way possible ## Inputs The skill needs three things. Gather them from context, conversation history, or ask directly if you don't have them: ### 1. Who is the client? - Client name (person and/or company) - What they do (industry, business model, core offering) - Their team size or scale (solo, small team, enterprise) Pull from your notes, records, and context, wherever you keep them, or from the conversation history first. Only ask what you genuinely don't know. ### 2. What is their current challenge or focus? - The problem they're working on right now - The transformation they want (from → to) - What they've been doing with AI so far This often comes from the live conversation. Listen for what the client is talking about and use that as the foundation. ### 3. What is the demonstration angle? - What specific capability are you showing them? - What methodology or system are you demonstrating? - What should they walk away understanding? Common demonstration angles: - ChatGPT to Claude migration (their data becomes an operating system) - Custom skills that automate their workflows - Content multiplication from a single input - Intelligence extraction from their existing conversations - Connected stack architecture for their specific tools - Team enablement path for rolling AI across their organization If you don't specify an angle, infer the best one from the client's challenge. ## The Build Process ### Step 1: Load All Available Context Before building anything, pull from every source: - **Your notes, records, and context, wherever you keep them** — everything known about this client from past conversations, session notes, proposals, or call notes - **Current conversation** — everything discussed in this session - **Your skill library** — which skills are relevant to this client's situation Synthesize all context into a clear picture of: who this person is, what they care about, and what will hit hardest. ### Step 2: Choose the Artifact Architecture Based on the client context and demonstration angle, choose the right structure. The six artifact architectures: **The Journey Map** — Best for migration stories (ChatGPT → Claude, manual → automated, operator → CEO). Shows a sequential transformation with animated progression. **The Command Center** — Best for demonstrating a full system. Interactive tabs showing different layers of capability (skills, architecture, integrations, action plan). **The Intelligence Dashboard** — Best for data-driven clients. Shows what their business looks like when AI is the operating layer. Metrics, flows, connected systems. **The Skill Showcase** — Best for demonstrating specific skills. Interactive cards that show trigger → process → output for each skill relevant to their business. **The Revenue Architecture** — Best for clients focused on growth. Maps their current revenue model, shows where AI creates leverage, and visualizes the compound effect. **The Team Blueprint** — Best for clients with teams. Shows the enablement path from one person learning AI to the entire organization running on it. You can combine architectures. The Journey Map that leads into a Command Center with a personalized action plan is a powerful combination. ### Step 3: Design the Experience The artifact follows these design principles: **Typography:** - Display: Playfair Display (serif, high-end editorial feel) - Body: Outfit (clean, modern, excellent readability) - Data/Labels: JetBrains Mono (technical precision, intelligence aesthetic) - Load from Google Fonts in a useEffect **Color System:** Use a dark, cinematic base with a single signature accent color you keep consistent across every artifact you build. A working starting point: ``` Signature Accent: your signature brand color Accent Deep: a slightly deeper shade of the same color Background: #0A0A0A Surface: #111111 Surface Light: #1A1A1A Border: #222222 Border Light: #333333 White: #FFFFFF Off White: #F5F5F0 Text Muted: #888888 Text Dim: #555555 ``` If the client has known brand colors, integrate them as secondary accents alongside your signature color. Keep your signature accent present in every build. It is what makes each artifact recognizably yours. **Animation:** - Hero section: Particle field with accent-colored nodes and connection lines (use canvas) - Page transitions: fadeIn, slideUp with cubic-bezier(0.16, 1, 0.3, 1) easing - Content reveals: Staggered delays creating a cinematic sequencing effect - Interactive elements: Hover states with glow effects and smooth transitions - Orbital elements: Slow-rotating decorative rings in the hero **Layout:** - Cinematic hero with full-viewport landing - "Enter" interaction that transitions to the content - Sticky navigation for section switching - Generous whitespace with intentional density in data areas - Maximum content width of 1100px, centered ### Step 4: Personalize Every Element This is what separates the Wow Machine from a template. Every element references the client directly: - **Hero text**: "[Client Company] × [Your Brand]" in the subtitle - **Headlines**: Reference their specific transformation, not generic AI benefits - **Skills/Features**: Only show skills and capabilities relevant to THEIR business - **Action steps**: Personalized next steps with their name, their tools, their timeline - **Language**: Mirror terminology they used in the conversation - **Numbers**: Use their actual business metrics if known (team size, content volume, revenue targets) - **Close section**: Address them by name with a specific call to action ### Step 5: Build the Artifact Build a single-file React JSX artifact. The entire experience lives in one file. Requirements: - Default export as a functional component - All state management with useState and useEffect hooks - Inline styles (no external CSS files) - Google Fonts loaded via useEffect - Canvas-based particle field for the hero - Responsive design that works on desktop and tablet - Smooth transitions between all views - Interactive elements (clickable tabs, expandable cards, hover states) The artifact renders live so the client sees it during the call. ### Step 6: Include a Personalized Action Plan Every artifact ends with a "Your Starting Line" or "Your Next Steps" section that gives the client 3-4 specific, actionable steps. These must be: - Personalized to their situation (not generic) - Immediately doable (first step can happen today) - Sequenced logically (each step enables the next) - Connected to the system you just demonstrated ## Output Format The output is a single React JSX file with a descriptive filename based on the client name. Example: `marblestone-command-center.jsx` Save the artifact and open it so your client can see it live. ## After Delivery After presenting the artifact, offer these follow-ups based on what's relevant: 1. **"Want me to run a pre-build checklist on their first real build?"** — If the client is ready to start building, demonstrate the process live 2. **"Want me to turn this into a proposal?"** — If the artifact is part of a sales conversation 3. **"What skills did we just show that should become part of their system?"** — Identify which skills to include in their engagement 4. **"Want me to capture this session as a reusable reference?"** — Log the build so you can repeat it ## Quality Standards **The client's name must appear in the artifact.** If it doesn't feel personally built for them, it failed. **Every section must connect to their specific business.** Generic AI benefits kill the magic. Specific applications to their workflows, their team, their tools create the shift. **The hero must stop them.** The first screen they see must create a physical reaction. Particle field, cinematic typography, their company name in lights. This is the moment. **The artifact must work.** Every button, every tab, every hover state must function. Broken interactions destroy trust faster than beautiful design builds it. This is the working-interactive standard, and it is non-negotiable. **The whole experience must feel like it was built by a creative studio, not generated by AI.** Playfair Display, not Inter. Cinematic accent-colored particle fields, not purple gradients. Intentional spacing, not default padding. This is world-class or it doesn't ship. ## Voice and Tone Write all artifact text in a direct, confident, world-class tone. Like a luxury brand experience that also happens to be deeply useful. Do this: - Clear, direct, grounded statements - Specific references to the client's business and language - "You" when addressing the client within the artifact - Minimal text, maximum impact per word Never do this: - Never use: delve, unlock, craft, foster, tapestry, embarking, unleash, unveil, realm, boasts, revolutionize, tenets - Never use semicolons or em dashes - Never use contrastive framing - Never pad with generic motivational language - Never sacrifice clarity for style - Never use generic AI aesthetic (Inter font, purple gradients, rounded everything)
From then on, when you're on a call and the moment is right, just say "Build a wow artifact for [client name]."
Want to go further than skills?
Skills like this are how Christine runs her own business every day. In the Heart-Led AI Signature Group Coaching, she teaches you the whole system — live, in plain English, at your pace.
Explore Signature CoachingOne living, breathing experience — built around one person.
The Wow Machine doesn't hand your client a slide deck. It builds a working, interactive experience they can click through and see themselves inside of. Every build carries these parts:
1 · A Cinematic Hero
A full-viewport opening with a particle field, cinematic typography, and their company name in lights. The first screen is designed to create a physical reaction.
2 · The Architecture That Fits
One of six structures matched to the client — a Journey Map for migration stories, a Command Center for full systems, an Intelligence Dashboard, a Skill Showcase, a Revenue Architecture, or a Team Blueprint.
3 · Their Business in Every Section
Headlines that name their specific transformation, only the skills relevant to their work, their own words from the conversation mirrored back, and their real numbers where they're known.
4 · Interactions That Actually Work
Clickable tabs, expandable cards, hover states, smooth transitions — every element functions, because broken interactions destroy trust faster than beautiful design builds it.
5 · Your Starting Line
Every build ends with three or four next steps personalized to their situation — sequenced logically, connected to what they just saw, with a first step they can take today.
6 · One File, Named for Them
The whole experience lives in one file with their name on it — think marblestone-command-center — saved and opened live, so the client watches it render during the call and keeps it after.
And the bar it has to clear?
The client's name must appear, or it failed. Every section must connect to their actual business — generic AI benefits kill the magic. And every button, tab, and hover state has to work: the skill calls that the working-interactive standard and treats it as non-negotiable. If the experience doesn't shift the client from "this is cool" to "I need this for my business," it didn't do its job.
Keep stacking: pairs beautifully with The War Room
Client Wow Machine builds the moment during the call. The War Room is what you send after it — a six-section intelligence deliverable mined from the transcript that makes your client feel deeply seen.
Get The War Room →Because seeing it built beats hearing it described.
You can tell a client what AI could do for their business, or you can build it in front of them while they watch. This skill exists because the second one changes what they believe is possible.
The build is the proof
The artifact demonstrates going from idea to working system in real time. Nobody has to take your word for what's possible — they just watched it happen, with their own business as the subject.
It loads everything before it builds
The skill pulls your notes on the client, past conversations, and what's being said on the call right now into one clear picture: who this person is, what they care about, and what will hit hardest.
Six architectures, matched — never defaulted
A migration story gets a Journey Map. A data-driven founder gets an Intelligence Dashboard. A client with a team gets a Team Blueprint. The structure is chosen for the person, and architectures can combine when the story calls for it.
Personalization is enforced, not sprinkled
Their name appears, or it failed — that's a stated quality standard, not a nice-to-have. Their transformation is in the headlines, their language is mirrored, and only what's relevant to their business makes the cut.
It ends in motion, not applause
Every build closes with a personalized action plan — three or four sequenced steps with a first move they can make today. The wow moment turns into a starting line, not just a memory.