---
spec_name: "Claude Code Artifacts Client Workflow"
version: 1.0
author: "Mike Kwal"
description: "A spec for Claude Code to manage a client project using a live Artifact dashboard, including initial setup, client communication, and final handoff."
---

# Task: Manage a Client Project with a Live Artifact Dashboard

## Context

We are starting a new client project to build a data dashboard. The goal is to use a Claude Code Artifact as the primary way to show progress to the client, eliminating the need for screen-share meetings. The client's email is `[client_email@example.com]` and their name is `[Client Name]`.

## Execution Steps

### Phase 1: Setup and Initiation

1.  **Initialize Project:** Start a new Claude Code session for the project named `[Project Name] Dashboard`.
2.  **Generate Artifact:** Execute the command to create a new Artifact for this session. Name it `[Project Name] Live Build`.
3.  **Configure Sharing:** In the Artifact's sharing settings, grant view-only access to `[client_email@example.com]`.
4.  **Retrieve URL:** Copy the unique, private URL for the newly created Artifact.

### Phase 2: Client Communication

1.  **Draft Invitation Email:** Compose an email to `[Client Name]` at `[client_email@example.com]`.
2.  **Email Subject:** Use the subject line: `Your Live Project Dashboard is Ready: [Project Name]`.
3.  **Email Body:** Use the following template, inserting the Artifact URL you retrieved in Phase 1:

    ```
    Hi [Client Name],

    Here is the private link to your live project build:
    [Insert Artifact URL here]

    This is not a video or a mockup. It's a live webpage that updates in real time as our AI agent works on it. You can watch charts, text, and layouts appear as they are built.

    On the right side of the page, you'll see a version history. You can click any previous version to see how the project looked at that point. This is great for comparing changes.

    Let me know what you think. No meeting needed—just watch the progress at your convenience.

    Best,
    Mike
    ```
4.  **Send Email:** Send the drafted email to the client.

### Phase 3: The Build

1.  **Begin Development:** Start executing the coding tasks for the dashboard within the Claude Code session.
2.  **Monitor Artifact:** Periodically check the Artifact URL in a separate browser tab to ensure the output is rendering as expected for the client.
3.  **Log Milestones:** After completing a significant feature, add a comment in the code session like `// Milestone: Initial data table loaded.` to correlate with the Artifact's version history.

### Phase 4: Handoff

1.  **Finalize Build:** Complete the final tasks for the current project phase.
2.  **Archive URL:** Save the final Artifact URL in the project's central documentation (e.g., Notion, Google Docs) for future reference.
3.  **Notify Client:** Send a follow-up email confirming the completion of the phase and noting that the final state is available at their link.