You are on a live call. In minutes you hand your client a cinematic, interactive artifact with their name on it, their business inside it, and a working system they can click through. They watch it get built. That is the sale.
← All Claude SkillsClient Wow Machine builds a one-of-a-kind interactive React artifact for one specific client, live, during your call. Their name, their business, and their transformation become a working experience they can explore right there. Copy the two blocks below and give them to your Claude.
Step 1. Copy the skill block below.
Step 2. Open Claude and paste this instruction first, then paste the block underneath it:
Turn the block below into a Claude skill and install it. Create the skill file exactly as written. Then personalize it with smart defaults from what you know about me: my business, my brand, and my clients. Confirm when it is installed and tell me 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)
Claude reads the block, builds the skill file, and installs it. From then on, you just run the skill in any conversation. No folders to find, no code to write.
Every week you see what's working, build it live, and put it to work in your business.
Here's the shape of what this skill hands you when it runs. Copy it, use it, keep moving.
You don't need to hold any of this in your head. That's the skill's job. If you're curious what it's doing for you, here's the idea underneath it.
Telling a client what is possible is one thing. Handing them a working system with their name on it, built while they watch, is another. The artifact is the proof. The fact that it appeared during your conversation is the demonstration. The moment they click through it, they stop imagining and start wanting it.
The artifact gets created in real time while the client watches. Going from idea to a working build in minutes is the whole demonstration.
Journey Map, Command Center, Intelligence Dashboard, Skill Showcase, Revenue Architecture, and Team Blueprint. The skill picks the one that fits the client, and can combine them.
Their name, their business, their tools, their metrics, their language from the conversation. Every headline and step references them directly, so it feels built for one person.
Every tab, button, and hover state functions. Cinematic typography, a signature accent color, a canvas particle-field hero. It reads as a creative studio build.
Every artifact closes with 3 to 4 specific next steps sequenced for that client, doable starting today and tied to the system you just showed them.
The skill builds around six architectures and picks the one that fits the client: the Journey Map for migration stories, the Command Center for a full system, the Intelligence Dashboard for data-driven clients, the Skill Showcase for demonstrating specific skills, the Revenue Architecture for growth-focused clients, and the Team Blueprint for clients rolling AI across a team. You can combine them, like a Journey Map that leads into a Command Center with a personalized action plan.
Building it live is the demonstration. When a client watches a working, branded system with their name on it appear in minutes, they experience the speed of idea-to-build firsthand. That is what shifts them from this is cool to I need this for my business. A polished artifact sent days later loses the moment that made it land.
It loads everything known about the client from your notes and the conversation, then references them in every element. The hero shows their company name, headlines name their specific transformation, the features show only skills relevant to their business, and the personalized action plan gives 3 to 4 next steps written with their name, their tools, and their timeline.