Build a Brand Machine with Claude

Create a Claude skill studio that ships branded artifacts via AI agents.

Introduction

30 Second Summary

Every brand needs consistent visuals across merch, pitch decks, and video. Most teams juggle five different tools and still end up with mismatched colors and fonts.

In this project, you will build a Claude Code skill studio that generates three portfolio-grade brand artifacts from a single shared design system file. You will also create three AI agents that review every output before it ships.

What You'll Build

A reusable Claude Code skill studio for a fictional startup called Pineapple AGI that produces a print-ready shirt design, a 5-slide pitch deck, and a 10-second animated logo reveal video.

By the end of this project, you'll have:

  • A working BRAND.md design system that every skill reads as its single source of truth for colors, typography, and voice.
  • Three production skills (shirt, deck, video) authored as SKILL.md files that generate real brand artifacts on demand.
  • Three quality-gate agents (Brand Architect, Creative Director, Production Engineer) that review every output before it ships.
  • A public GitHub repo anyone can fork, swap the brand file, and get their own branded artifacts from the same skills.
  • Secret Mission: Add a 4th social card skill and wire it through all 3 agents automatically.

Are there any prerequisites?

You need an active Claude Pro or Max subscription with Claude Desktop installed. You will also install Node.js and Git in Step 1 if you do not already have them.

Install Tools and Scaffold the Project

Before you can build any skills or agents, you need a working development environment. This project uses Node.js for rendering video later and Git for version control.

In this step, you will verify your tools are installed and scaffold the project folder structure that Claude Code expects.

In this step, get ready to:
  • Verify Node.js and Git are installed.
  • Create the project directory and initialize a Git repo.
  • Scaffold the Claude skill and agent folder structure.
Verify Node.js is installed

Node.js is the JavaScript runtime you will use later to render the animated launch video with Remotion. You need version 16 or higher. The current LTS is v24.x (codename Krypton).

  • Open your terminal by pressing Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Terminal (macOS) or PowerShell (Windows) and press Enter to open it.
  • Check your Node.js version by running this command:
node --version

✔️ I see a version number

You should see something like v24.15.0 (or any number v16 or higher). Node.js is ready.

ⓧ Command not found

Node.js is not installed yet. Follow these steps to install it.

  • Open https://nodejs.org in your browser.
  • Click the LTS download button (currently v24.x).
  • Run the installer and accept the default options.
  • Close and reopen your terminal, then run node --version again to confirm.

Still not seeing a version number?

Make sure you closed and reopened your terminal after installing. The terminal needs a fresh session to pick up the new PATH. Help me troubleshoot my Node.js installation

Verify Git is installed

Git tracks changes to your project files and lets you push the final repo to GitHub.

  • Check your Git version by running this command:
git --version

✔️ I see a version number

You should see something like git version 2.x.x. Git is ready.

ⓧ Command not found

Git is not installed yet. Follow these steps.

  • Open https://git-scm.com/downloads in your browser.
  • Download the installer for your operating system.
  • Run the installer and accept the default options.
  • Close and reopen your terminal, then run git --version again to confirm.

Still not seeing a version?

On macOS, running git --version may prompt you to install Xcode Command Line Tools. Accept the prompt and wait for the installation to finish. Help me get Git working

Create the project directory and scaffold the folder structure

Claude Code expects a specific folder layout to discover skills and agents. You will create this structure now so everything is in place when you start writing content.

  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create the project folder, move into it, and initialize a Git repository by running these commands:

macOS

mkdir pineapple-brand-machine
cd pineapple-brand-machine
git init

Windows

mkdir pineapple-brand-machine
cd pineapple-brand-machine
git init

You should see a message like Initialized empty Git repository in the output.

  • Create the Claude skill and agent directories by running these commands:

macOS

mkdir -p .claude/skills/shirt-design
mkdir -p .claude/skills/pitch-deck
mkdir -p .claude/skills/launch-video
mkdir -p .claude/agents
mkdir -p output

Windows

mkdir .claude/skills/shirt-design -Force
mkdir .claude/skills/pitch-deck -Force
mkdir .claude/skills/launch-video -Force
mkdir .claude/agents -Force
mkdir output -Force

What does this folder structure do?

Claude Code reads from .claude/skills/ to discover available skills and from .claude/agents/ to load quality-gate agents. The output/ folder is where every skill writes its finished artifact.

Because these folders live inside the project, anyone who clones your repo gets the full skill studio automatically.

  • Confirm the folders were created by running:
ls -la

You should see .claude and output listed in the output. The .git folder confirms Git is initialized.

Don't see .claude in the list?

Folders starting with a dot are hidden by default. The -la flag forces hidden files to show. On Windows PowerShell, use ls -Force instead to reveal hidden items. Help me see hidden folders in my terminal

Your environment is ready and the project skeleton is in place. Next up, you will write the BRAND.md design system that every skill reads before producing output.

Write the BRAND.md Design System

Your project structure is ready with all the folders in place. Now you need to give your skills something to read from.

Every skill in this studio will produce visual artifacts, and those artifacts need to look like they came from the same brand. Instead of repeating color codes and font names in every skill file, you will create a single BRAND.md file that acts as the source of truth. Every skill reads this file before producing output.

In this step, get ready to:
  • Create a BRAND.md design system file for Pineapple AGI.
  • Define the full visual identity including colors, typography, logo mark, and voice.
  • Validate that the file reads as a complete creative brief.
Create the BRAND.md design system

The BRAND.md pattern comes from the open-design convention where entire design systems are shipped as portable Markdown files. Any designer or AI agent can execute from this file without needing access to Figma or a style guide app.

  • Create a file called BRAND.md at the root of your pineapple-brand-machine folder by running this command:
touch BRAND.md
  • Open BRAND.md in your text editor and paste the following content:
# Pineapple AGI Design System

> Category: AI & Startup

## Brand Identity

- **Name**: Pineapple AGI
- **Tagline**: Guidance compass with speed
- **Mission**: Deliver intelligent navigation for ambitious teams who move fast and demand clarity.

## Color Palette

- Primary (Gold): #F5A623
- Secondary (Deep Navy): #1B2838
- Accent (Electric Teal): #00D4AA
- Surface (Off-White): #FAFAFA
- Text Primary: #1B2838
- Text Secondary: #5A6B7B

## Typography

- Display: Space Grotesk, 700 weight, tight tracking (-0.02em)
- Body: Inter, 400 weight, normal tracking
- Mono: JetBrains Mono, 400 weight
- Scale: 14 / 16 / 20 / 28 / 40 / 56 / 72

## Logo Mark

Geometric pineapple silhouette composed of:
- A compass needle forming the crown leaves (pointing north)
- Radiating speed lines extending from the fruit body
- Constructed on a 64x64 grid with 4px stroke weight
- Always rendered in Primary Gold on Dark backgrounds or Secondary Navy on Light backgrounds

## Voice

- Direct. No hedging. Say the thing.
- Kinetic. Verbs over nouns. Motion over stillness.
- Confident. We know the path. We move.
- Zero fluff. Every word earns its place.

## Forbidden Patterns

- Gradients used for decoration (only functional gradients for depth)
- Rounded-everything syndrome (use sharp corners except buttons)
- Stock photography or generic illustrations
- More than 2 font weights on a single surface
- Color combinations not in the palette above

What does this file do?

This file defines the complete visual identity for a fictional startup called Pineapple AGI. Each section serves a specific purpose for the skills that will read it:

  • Color Palette gives every skill exact hex values to use. No guessing, no off-brand colors.
  • Typography defines the font stack and size scale so headings and body text stay consistent across shirt, deck, and video.
  • Logo Mark describes the construction spec so any skill can recreate the mark as SVG without a source file.
  • Voice constrains the writing style for any text that appears on artifacts.
  • Forbidden Patterns tells the Brand Architect agent what to reject outright.
  • Save BRAND.md.
  • Confirm the file exists by running:
ls BRAND.md

You should see BRAND.md listed in the output.

  • Open the file in your text editor and scan through each section. It should read like a complete creative brief that a designer could execute from without any other context.

File is empty or missing content?

Make sure you saved the file after pasting the content. Some editors require an explicit save with Cmd+S (macOS) or Ctrl+S (Windows).

Check that the file is at the root of pineapple-brand-machine/, not inside a subdirectory like .claude/.

Help me verify my BRAND.md file is in the right place and has the correct content.

Why a Markdown file instead of JSON or YAML?

Claude reads Markdown natively as context. A JSON or YAML config would work, but Markdown lets you include prose descriptions (like the logo construction spec and voice attributes) alongside structured data. The skills treat this file as a creative brief, not a config file.

✔️ Awesome, I've got everything!

Great. Double check you have saved your file before moving on.

ⓧ I'd like to double check the full code

Here is the complete BRAND.md file. Make sure yours matches exactly:

# Pineapple AGI Design System

> Category: AI & Startup

## Brand Identity

- **Name**: Pineapple AGI
- **Tagline**: Guidance compass with speed
- **Mission**: Deliver intelligent navigation for ambitious teams who move fast and demand clarity.

## Color Palette

- Primary (Gold): #F5A623
- Secondary (Deep Navy): #1B2838
- Accent (Electric Teal): #00D4AA
- Surface (Off-White): #FAFAFA
- Text Primary: #1B2838
- Text Secondary: #5A6B7B

## Typography

- Display: Space Grotesk, 700 weight, tight tracking (-0.02em)
- Body: Inter, 400 weight, normal tracking
- Mono: JetBrains Mono, 400 weight
- Scale: 14 / 16 / 20 / 28 / 40 / 56 / 72

## Logo Mark

Geometric pineapple silhouette composed of:
- A compass needle forming the crown leaves (pointing north)
- Radiating speed lines extending from the fruit body
- Constructed on a 64x64 grid with 4px stroke weight
- Always rendered in Primary Gold on Dark backgrounds or Secondary Navy on Light backgrounds

## Voice

- Direct. No hedging. Say the thing.
- Kinetic. Verbs over nouns. Motion over stillness.
- Confident. We know the path. We move.
- Zero fluff. Every word earns its place.

## Forbidden Patterns

- Gradients used for decoration (only functional gradients for depth)
- Rounded-everything syndrome (use sharp corners except buttons)
- Stock photography or generic illustrations
- More than 2 font weights on a single surface
- Color combinations not in the palette above

Your brand system is locked in. Every skill you build from here will pull its colors, fonts, and identity from this single file. Next up, you will write the governance layer that enforces quality rules across the entire studio.

Write the Governance Layer

Your brand system is defined. Now you need to make sure Claude actually follows it every time it produces an artifact.

Claude Code reads two governance surfaces on every session: a CLAUDE.md file for behavioral rules, and a settings.json file for technical enforcement (permissions, hooks, deny lists). Together they form a governance layer that constrains what Claude can do and how it must behave.

In this step, get ready to:
  • Create the CLAUDE.md governance file with project rules, quality bar, and agent invocation map.
  • Create .claude/settings.json with permissions, deny rules, and a PostToolUse hook.
  • Validate that Claude Code loads your settings on startup.
Create the CLAUDE.md governance file

Claude Code reads CLAUDE.md at the start of every session. It defines the behavioral rules Claude must follow, like "always read BRAND.md first" and "no artifact ships without agent review."

  • Create a file called CLAUDE.md at the root of your pineapple-brand-machine folder with the following content:
# Pineapple Brand Machine - Project Governance

## Identity

This is a Claude skill studio that produces brand-consistent artifacts for Pineapple AGI.

## Rules

1. Every skill MUST read BRAND.md before producing any output.
2. No artifact ships without passing at least the Brand Architect agent review.
3. All visual outputs MUST use only colors defined in BRAND.md Color Palette.
4. All text outputs MUST follow the Voice section of BRAND.md.
5. Output files go in the `output/` directory. Never overwrite without confirmation.
6. HTML outputs must be self-contained. No external CDN dependencies except Google Fonts.
7. Remotion compositions must use frame-driven animation only. No CSS transitions.

## Quality Bar

"Would a hiring manager at a Series A startup stop scrolling for this?"

If the answer is not a clear yes, iterate before shipping.

## Agent Invocation

- `/shirt-design` -> Brand Architect (required)
- `/pitch-deck` -> Brand Architect + Creative Director (required)
- `/launch-video` -> Brand Architect + Creative Director + Production Engineer (required)

What does this file do?

The Rules section sets hard constraints. Rule 1 forces every skill to load brand context before generating. Rule 2 ensures no output bypasses quality review.

The Agent Invocation section maps each skill to specific quality-gate agents. More complex outputs (like video) require more agents to sign off.

What is CLAUDE.md?

CLAUDE.md is Claude Code's persistent memory file. It loads at the start of every session, giving Claude project-level instructions it carries throughout the conversation. Think of it as the project constitution that guides Claude's behavior.

  • Save CLAUDE.md.
Create the settings.json permissions file

While CLAUDE.md is behavioral guidance (Claude chooses to follow it), settings.json is technical enforcement. Deny rules in this file physically block Claude from accessing sensitive files or running dangerous commands.

  • Create a file called settings.json inside your .claude/ directory (which you created in Step 1) with the following content:
{
  "$schema": "https://json.schemastore.org/claude-code-settings.json",
  "permissions": {
    "allow": [
      "Read",
      "Write(./output/**)",
      "Write(./.claude/**)",
      "Write(./launch-video/src/**)",
      "Write(./README.md)",
      "Write(./BRAND.md)",
      "Write(./CLAUDE.md)",
      "Bash(node *)",
      "Bash(npm *)",
      "Bash(npx *)",
      "Bash(git *)",
      "Glob",
      "Grep"
    ],
    "deny": [
      "Read(./.env)",
      "Read(./.env.*)",
      "Read(./secrets/**)",
      "Bash(rm -rf *)",
      "Bash(curl *)"
    ]
  },
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write",
        "hooks": [
          {
            "type": "command",
            "command": "echo PostToolUse: brand output written",
            "timeout": 5
          }
        ]
      }
    ]
  }
}

What does this configuration do?

  • The allow array pre-approves read access everywhere, write access only to specific paths (output, .claude, launch-video source, README, BRAND.md, CLAUDE.md), and Bash for node/npm/npx/git commands.
  • The deny array blocks access to environment files and secrets. It also blocks destructive commands (rm -rf) and network requests (curl). Deny rules always take precedence over allow rules.
  • The PostToolUse hook fires every time Claude writes a file. It echoes a confirmation message, creating a visible log of brand output activity.

Why use settings.json instead of just CLAUDE.md?

Instructions in CLAUDE.md are behavioral guidance. Claude reads them and follows them, but it could technically still access a denied file if asked insistently. Deny rules in settings.json are enforced at the tool level. They physically prevent the action from executing, regardless of what the prompt says.

  • Save .claude/settings.json.

JSON syntax errors?

Make sure there are no trailing commas after the last item in any array or object. JSON does not allow trailing commas, unlike JavaScript.

Verify that the file is saved at exactly .claude/settings.json (not .claude/settings/settings.json or another nested path).

Why is my settings.json not being recognized by Claude Code?

Validate that Claude Code loads your settings

You need to confirm that Claude Code actually sees your new governance files. The /config command opens a settings UI that shows which files are loaded.

  • Launch Claude Code in your project directory by running this command:
claude
  • Once the interactive session starts, type /config and press Enter.
  • Confirm that the settings UI shows your project-scoped .claude/settings.json is loaded with the permissions and hooks you defined.
  • Exit the Claude session by typing /exit or pressing Ctrl+C.

Check hooks with /hooks

You can also type /hooks inside a Claude Code session to browse all configured hooks. You should see your PostToolUse hook with the Write matcher listed under "Project" scope.

Settings not showing up?

Make sure you launched claude from inside the pineapple-brand-machine directory. Claude Code only discovers project-scoped settings from the current working directory.

Verify your JSON is valid with no trailing commas or comments. Claude Code silently ignores malformed settings files.

My Claude Code /config doesn't show my project settings

✔️ Awesome, I've got everything!

Great. Double check that both CLAUDE.md and .claude/settings.json are saved.

ⓧ I'd like to double check the full code

Here is the complete CLAUDE.md:

# Pineapple Brand Machine - Project Governance

## Identity

This is a Claude skill studio that produces brand-consistent artifacts for Pineapple AGI.

## Rules

1. Every skill MUST read BRAND.md before producing any output.
2. No artifact ships without passing at least the Brand Architect agent review.
3. All visual outputs MUST use only colors defined in BRAND.md Color Palette.
4. All text outputs MUST follow the Voice section of BRAND.md.
5. Output files go in the `output/` directory. Never overwrite without confirmation.
6. HTML outputs must be self-contained. No external CDN dependencies except Google Fonts.
7. Remotion compositions must use frame-driven animation only. No CSS transitions.

## Quality Bar

"Would a hiring manager at a Series A startup stop scrolling for this?"

If the answer is not a clear yes, iterate before shipping.

## Agent Invocation

- `/shirt-design` -> Brand Architect (required)
- `/pitch-deck` -> Brand Architect + Creative Director (required)
- `/launch-video` -> Brand Architect + Creative Director + Production Engineer (required)

And the complete .claude/settings.json:

{
  "$schema": "https://json.schemastore.org/claude-code-settings.json",
  "permissions": {
    "allow": [
      "Read",
      "Write(./output/**)",
      "Write(./.claude/**)",
      "Write(./launch-video/src/**)",
      "Write(./README.md)",
      "Write(./BRAND.md)",
      "Write(./CLAUDE.md)",
      "Bash(node *)",
      "Bash(npm *)",
      "Bash(npx *)",
      "Bash(git *)",
      "Glob",
      "Grep"
    ],
    "deny": [
      "Read(./.env)",
      "Read(./.env.*)",
      "Read(./secrets/**)",
      "Bash(rm -rf *)",
      "Bash(curl *)"
    ]
  },
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write",
        "hooks": [
          {
            "type": "command",
            "command": "echo PostToolUse: brand output written",
            "timeout": 5
          }
        ]
      }
    ]
  }
}

Your governance layer is locked in. Claude now has behavioral rules (CLAUDE.md) and technical guardrails (settings.json) that protect your brand system. Next up, you'll write the 3 quality-gate agents that review every artifact before it ships.

Write the 3 Quality-Gate Agents

Your governance layer is in place. CLAUDE.md declares that no artifact ships without passing agent review. Now you need to create the agents that actually perform those reviews.

Claude Code agents are Markdown files stored in .claude/agents/. Each agent has a defined role, evaluation criteria, and a structured output format. You will create three agents that act as senior reviewers: one for brand compliance, one for creative quality, and one for production readiness.

In this step, get ready to:
  • Create the Brand Architect agent to enforce BRAND.md compliance on every visual output.
  • Create the Creative Director agent to gate portfolio-grade quality with a scoring system.
  • Create the Production Engineer agent to validate code quality and render readiness.
Create the Brand Architect agent

The Brand Architect is the strictest gatekeeper in your pipeline. Its job is to compare every visual output against your BRAND.md palette, typography, and logo spec. If a single hex code falls outside the system, it rejects the artifact.

  • Create a new file at .claude/agents/brand-architect.md and paste in this content:
---
name: brand-architect
description: "Enforce BRAND.md compliance on every visual output. Reject AI slop patterns."
allowed-tools:
  - Read
  - Glob
---

# Brand Architect Agent

You are a senior brand systems designer. Your job is to enforce visual consistency.

## Process

1. Read BRAND.md from the project root.
2. Inspect the artifact being reviewed.
3. Evaluate against these criteria:

## Evaluation Criteria

- **Color Accuracy**: Every color value must exist in BRAND.md palette. Flag any hex not in the system.
- **Typography Hierarchy**: Display font for headings, body font for text. Max 2 weights per surface.
- **Whitespace Rhythm**: Consistent spacing. No cramped sections next to empty ones.
- **Logo Mark Usage**: Must match the construction spec (compass needle crown, speed lines body).
- **AI Slop Detection**: Reject generic gradients, rounded-everything, stock-style patterns, overused CSS effects (box-shadow spam, blur overlays without purpose).

## Output Format

```
BRAND REVIEW: [PASS/FAIL]

Color: [pass/fail] - [notes]
Typography: [pass/fail] - [notes]
Whitespace: [pass/fail] - [notes]
Logo: [pass/fail] - [notes]
Slop Check: [pass/fail] - [notes]

Verdict: [Ship it / Revise: specific fixes needed]
```

## Rules

- Never approve output that uses colors outside BRAND.md palette.
- Never approve output with more than 2 font weights on one surface.
- Be specific in critique. "Fix the spacing" is not acceptable. "Increase padding between headline and body from 8px to 24px" is.

What does this agent do?

The YAML frontmatter (between the --- markers) tells Claude Code this agent's name, description, and which tools it can use. Read and Glob let it inspect files without modifying anything.

The body defines 5 evaluation criteria the agent checks against, plus a structured output format so every review is consistent and actionable. The "AI Slop Detection" criterion is especially important. It catches generic design patterns that scream "an AI made this."

  • Save .claude/agents/brand-architect.md.
  • Confirm it exists by running:
ls .claude/agents/

You should see brand-architect.md in the output.

Don't see the file?

Make sure you created the file inside .claude/agents/ (with the leading dot), not claude/agents/. The .claude directory was created in Step 1.

Also confirm the YAML frontmatter starts and ends with exactly three dashes (---) on their own lines. Missing delimiters will break agent loading.

Help me debug my agent file setup.

Create the Creative Director agent

The Creative Director uses a numerical scoring system instead of pass/fail. It evaluates whether an artifact is genuinely portfolio-grade, scoring each dimension from 1 to 10. Anything below 8 overall does not ship.

  • Create a new file at .claude/agents/creative-director.md and paste in this content:
---
name: creative-director
description: "Portfolio-grade quality gate. Evaluates composition, storytelling, and visual impact."
allowed-tools:
  - Read
  - Glob
---

# Creative Director Agent

You are a senior creative director at a top-tier brand studio. You evaluate work against portfolio standards.

## Process

1. Review the artifact in context of BRAND.md identity.
2. Score on each criterion below.
3. Provide actionable directives for anything scoring below 8.

## Evaluation Criteria (score 1-10 each)

- **Composition**: Visual balance, focal point clarity, negative space usage.
- **Storytelling**: Does the artifact communicate one clear idea in under 3 seconds?
- **Information Density**: Right amount of content. Not sparse, not cluttered.
- **Scroll-Stop Factor**: Would a hiring manager stop scrolling for this in a portfolio?
- **Brand Coherence**: Does this feel like it belongs to the same company as the other artifacts?

## Output Format

```
CREATIVE REVIEW: [SCORE]/10

Composition: [X]/10 - [notes]
Storytelling: [X]/10 - [notes]
Density: [X]/10 - [notes]
Scroll-Stop: [X]/10 - [notes]
Coherence: [X]/10 - [notes]

Overall: [X]/10
Verdict: [Ship it / Revise: specific directives]
```

## Rules

- Minimum ship score: 8/10 overall.
- If any single criterion scores below 6, the artifact fails regardless of overall score.
- Directives must be specific and actionable. Not "make it better" but "increase the logo mark to 120px, move tagline to baseline grid, reduce slide 3 copy by 40%."

What does this agent do?

This agent applies the "scroll-stop" test: would a hiring manager actually pause when they see this artifact in a portfolio? The 8/10 minimum ship score and the single-criterion floor of 6 mean mediocre work gets caught even if it averages out.

Like the Brand Architect, it only has Read and Glob permissions. Review agents should inspect, not modify.

  • Save .claude/agents/creative-director.md.
  • Run ls .claude/agents/ again. You should now see both brand-architect.md and creative-director.md.

Only see one file?

Double-check that you saved the new file as creative-director.md (with the hyphen) inside .claude/agents/. Some editors create new files in the project root by default.

Help me find my missing agent file.

Create the Production Engineer agent

The Production Engineer is the only agent with Bash access. It validates that artifacts actually work on first open or render. For Remotion compositions specifically, it checks frame math, import correctness, and composition registration.

  • Create a new file at .claude/agents/production-engineer.md and paste in this content:
---
name: production-engineer
description: "Code quality and render validation. Ensures every artifact actually works on first try."
allowed-tools:
  - Read
  - Glob
  - Bash
---

# Production Engineer Agent

You are a senior frontend engineer who ships zero-defect visual artifacts. You validate that code runs clean.

## Process

1. Read the artifact source code.
2. Validate against each criterion.
3. If Remotion: verify composition registration, frame math, and render command.

## Evaluation Criteria

- **Valid Markup**: HTML passes basic structure check. No unclosed tags, no orphan attributes.
- **Self-Contained**: No external CDN dependencies except Google Fonts. All styles inline or in style tags.
- **Accessibility**: Alt text on images, aria-labels on interactive elements, sufficient color contrast.
- **Performance**: HTML outputs under 500KB. No base64 images over 100KB.
- **Remotion Specific**: Composition registered in Root.tsx, fps and durationInFrames consistent, all animations driven by useCurrentFrame(), no CSS transitions.
- **File Output**: Correct path (`output/` directory), correct extension, no naming collisions.

## Output Format

```
PRODUCTION REVIEW: [PASS/FAIL]

Markup: [pass/fail] - [notes]
Self-Contained: [pass/fail] - [notes]
Accessibility: [pass/fail] - [notes]
Performance: [pass/fail] - [notes]
Remotion: [pass/fail or N/A] - [notes]
File Output: [pass/fail] - [notes]

Verdict: [Ship it / Fix: specific commands or code changes]
```

## Rules

- Never pass an artifact that would error on first open/render.
- Provide exact fix commands. Not "fix the import" but "add import { spring } from 'remotion' on line 2."
- For Remotion: verify frame math. If fps=30 and duration=10s, durationInFrames must equal 300.

Why does this agent get Bash access?

The Production Engineer needs to run validation commands. It might check file sizes, verify that an HTML file parses cleanly, or confirm that a Remotion composition renders without errors. The other two agents only read and inspect.

Notice the Remotion-specific criteria: it verifies that fps=30 and a 10-second duration means exactly durationInFrames: 300. Frame math errors are the most common cause of broken renders.

  • Save .claude/agents/production-engineer.md.
  • Confirm all three agent files exist by running:
ls .claude/agents/

You should see brand-architect.md, creative-director.md, and production-engineer.md listed.

Missing one or more files?

Run find .claude/agents/ -name "*.md" to search for any misplaced files. If a file ended up in the wrong directory, move it with mv.

Also confirm each file starts with --- on the very first line. Any blank line or space before the frontmatter will prevent Claude Code from parsing the agent definition.

Help me troubleshoot my agent files.

How do these agents work together?

Each skill you build in the next steps will invoke specific agents as part of its workflow. The shirt design skill calls the Brand Architect. The pitch deck calls Brand Architect plus Creative Director. The launch video calls all three.

This escalating review pipeline means the most complex artifacts get the most scrutiny. Nothing ships until every required agent says yes.

✔️ Awesome, I've got everything!

Double check you have saved all three files in .claude/agents/.

ⓧ I'd like to double check the full code

Here are all three agent files for comparison.

---
name: brand-architect
description: "Enforce BRAND.md compliance on every visual output. Reject AI slop patterns."
allowed-tools:
  - Read
  - Glob
---

# Brand Architect Agent

You are a senior brand systems designer. Your job is to enforce visual consistency.

## Process

1. Read BRAND.md from the project root.
2. Inspect the artifact being reviewed.
3. Evaluate against these criteria:

## Evaluation Criteria

- **Color Accuracy**: Every color value must exist in BRAND.md palette. Flag any hex not in the system.
- **Typography Hierarchy**: Display font for headings, body font for text. Max 2 weights per surface.
- **Whitespace Rhythm**: Consistent spacing. No cramped sections next to empty ones.
- **Logo Mark Usage**: Must match the construction spec (compass needle crown, speed lines body).
- **AI Slop Detection**: Reject generic gradients, rounded-everything, stock-style patterns, overused CSS effects (box-shadow spam, blur overlays without purpose).

## Output Format

```
BRAND REVIEW: [PASS/FAIL]

Color: [pass/fail] - [notes]
Typography: [pass/fail] - [notes]
Whitespace: [pass/fail] - [notes]
Logo: [pass/fail] - [notes]
Slop Check: [pass/fail] - [notes]

Verdict: [Ship it / Revise: specific fixes needed]
```

## Rules

- Never approve output that uses colors outside BRAND.md palette.
- Never approve output with more than 2 font weights on one surface.
- Be specific in critique. "Fix the spacing" is not acceptable. "Increase padding between headline and body from 8px to 24px" is.
---
name: creative-director
description: "Portfolio-grade quality gate. Evaluates composition, storytelling, and visual impact."
allowed-tools:
  - Read
  - Glob
---

# Creative Director Agent

You are a senior creative director at a top-tier brand studio. You evaluate work against portfolio standards.

## Process

1. Review the artifact in context of BRAND.md identity.
2. Score on each criterion below.
3. Provide actionable directives for anything scoring below 8.

## Evaluation Criteria (score 1-10 each)

- **Composition**: Visual balance, focal point clarity, negative space usage.
- **Storytelling**: Does the artifact communicate one clear idea in under 3 seconds?
- **Information Density**: Right amount of content. Not sparse, not cluttered.
- **Scroll-Stop Factor**: Would a hiring manager stop scrolling for this in a portfolio?
- **Brand Coherence**: Does this feel like it belongs to the same company as the other artifacts?

## Output Format

```
CREATIVE REVIEW: [SCORE]/10

Composition: [X]/10 - [notes]
Storytelling: [X]/10 - [notes]
Density: [X]/10 - [notes]
Scroll-Stop: [X]/10 - [notes]
Coherence: [X]/10 - [notes]

Overall: [X]/10
Verdict: [Ship it / Revise: specific directives]
```

## Rules

- Minimum ship score: 8/10 overall.
- If any single criterion scores below 6, the artifact fails regardless of overall score.
- Directives must be specific and actionable. Not "make it better" but "increase the logo mark to 120px, move tagline to baseline grid, reduce slide 3 copy by 40%."
---
name: production-engineer
description: "Code quality and render validation. Ensures every artifact actually works on first try."
allowed-tools:
  - Read
  - Glob
  - Bash
---

# Production Engineer Agent

You are a senior frontend engineer who ships zero-defect visual artifacts. You validate that code runs clean.

## Process

1. Read the artifact source code.
2. Validate against each criterion.
3. If Remotion: verify composition registration, frame math, and render command.

## Evaluation Criteria

- **Valid Markup**: HTML passes basic structure check. No unclosed tags, no orphan attributes.
- **Self-Contained**: No external CDN dependencies except Google Fonts. All styles inline or in style tags.
- **Accessibility**: Alt text on images, aria-labels on interactive elements, sufficient color contrast.
- **Performance**: HTML outputs under 500KB. No base64 images over 100KB.
- **Remotion Specific**: Composition registered in Root.tsx, fps and durationInFrames consistent, all animations driven by useCurrentFrame(), no CSS transitions.
- **File Output**: Correct path (`output/` directory), correct extension, no naming collisions.

## Output Format

```
PRODUCTION REVIEW: [PASS/FAIL]

Markup: [pass/fail] - [notes]
Self-Contained: [pass/fail] - [notes]
Accessibility: [pass/fail] - [notes]
Performance: [pass/fail] - [notes]
Remotion: [pass/fail or N/A] - [notes]
File Output: [pass/fail] - [notes]

Verdict: [Ship it / Fix: specific commands or code changes]
```

## Rules

- Never pass an artifact that would error on first open/render.
- Provide exact fix commands. Not "fix the import" but "add import { spring } from 'remotion' on line 2."
- For Remotion: verify frame math. If fps=30 and duration=10s, durationInFrames must equal 300.

Your quality-gate agents are ready. Next up, you will build the first skill that puts these agents to work: a brand shirt design generator.

Build Skill 1 - Brand Shirt Design

Your governance layer is locked in. CLAUDE.md tells Claude the rules, settings.json enforces permissions, and three agents stand ready to review anything Claude produces.

Now it is time to give Claude something to actually produce. Skills are reusable instructions that Claude executes on command. Your first skill will generate a print-ready shirt graphic for Pineapple AGI as a single self-contained HTML file.

In this step, get ready to:
  • Write a SKILL.md file that instructs Claude to generate brand shirt graphics.
  • Invoke the skill and confirm the output passes Brand Architect review.
Create the shirt design skill file

A SKILL.md file uses YAML frontmatter to declare metadata (name, triggers, permissions) and a Markdown body to give Claude its step-by-step workflow.

  • Create the file .claude/skills/shirt-design/SKILL.md and paste in the following content:
---
name: shirt-design
description: "Generate a print-ready brand shirt graphic as a single self-contained HTML file with inline SVG and CSS."
triggers:
  - "shirt design"
  - "merch design"
  - "t-shirt"
  - "apparel graphic"
allowed-tools:
  - Read
  - Write
  - Bash
---

# Brand Shirt Design Skill

Generate a portfolio-grade shirt graphic for the brand defined in BRAND.md.

## Workflow

1. Read `BRAND.md` from the project root. Load all color, typography, logo mark, and voice values.
2. Design a single-panel shirt graphic that:
   - Uses the logo mark as the primary visual element
   - Incorporates the tagline in display typography
   - Targets a 4500x5400px artboard (standard DTG print template)
   - Uses brand palette only (dark background with gold/teal accents)
   - Renders as pure HTML + inline SVG + CSS (no external dependencies)
3. Write the output to `output/shirt-design.html`.
4. Invoke the Brand Architect agent to review the output. If it fails, revise and re-submit.
5. Final output must pass Brand Architect review before confirming completion.

## Design Constraints

- The graphic must work on a black or deep navy shirt
- Logo mark must be at least 40% of the artboard width
- Tagline positioned below logo mark, centered, in Space Grotesk 700
- Use speed lines motif from the logo mark spec as a background texture
- No photography, no generic illustrations, no clip art
- SVG paths preferred over CSS shapes for print fidelity

## Output

Single file: `output/shirt-design.html`
Open in a browser to preview. Print at 300dpi for production.

What does this skill file do?

The YAML frontmatter at the top declares the skill's identity. triggers tells Claude which phrases activate this skill (like typing /shirt-design or saying "make a t-shirt"). allowed-tools limits what Claude can do while executing.

The Markdown body is the actual instruction set. It forces Claude to read BRAND.md first, produce a 4500x5400px HTML file with inline SVG, and then submit its work to the Brand Architect agent for review before declaring the job done.

  • Save the file.
  • Confirm the file exists by running:
ls .claude/skills/shirt-design/SKILL.md

You should see the file path printed in the output.

File not found?

Make sure you created the file inside the .claude/skills/shirt-design/ directory, not in the project root. The directory was created in Step 1.

help me find where my SKILL.md file ended up

Why SKILL.md instead of a script?

Claude Code reads SKILL.md files as natural-language instructions, not executable scripts. This means you describe what you want in plain English and Claude figures out the implementation. The skill is portable too. Anyone who forks your repo gets the same skill without installing dependencies.

Invoke the skill and verify the output

The skill file is written. Now you will trigger it and confirm Claude produces a brand-consistent shirt design that passes agent review.

  • In your Claude Code session (the terminal where you ran claude earlier), type the following prompt:
/shirt-design

What happens when you run this?

Claude recognizes /shirt-design as a trigger defined in your SKILL.md frontmatter. It reads the skill body, follows the workflow (read BRAND.md, design the graphic, write the file, invoke Brand Architect), and outputs the result to output/shirt-design.html.

The Brand Architect agent automatically reviews the output for color accuracy, typography hierarchy, and AI slop patterns. If something fails, Claude revises and resubmits until it passes.

  • Wait for Claude to finish generating and reviewing the design. This may take 30-60 seconds as it produces the SVG artwork and runs it through the Brand Architect agent.
  • Confirm the output file exists by running:
ls output/shirt-design.html
  • Open output/shirt-design.html in your browser to preview the shirt graphic.

You should see a deep navy background with the Pineapple AGI logo mark rendered in gold, the tagline "Guidance compass with speed" in Space Grotesk below it, and radiating speed lines as a background texture.

Claude did not recognize the skill trigger?

Make sure your Claude Code session is running from inside the pineapple-brand-machine directory. Project-scoped skills are only available when Claude Code is launched from the project folder.

If the slash command does not work, try typing a natural language prompt like "create a shirt design for Pineapple AGI" instead. Claude will still find and execute the skill.

help me troubleshoot why my shirt-design skill is not being recognized

✔️ Awesome, I've got everything!

Great. Double check you have saved your SKILL.md file and that output/shirt-design.html exists in your project.

ⓧ I'd like to double check the full code

Here is the complete SKILL.md file for the shirt design skill:

---
name: shirt-design
description: "Generate a print-ready brand shirt graphic as a single self-contained HTML file with inline SVG and CSS."
triggers:
  - "shirt design"
  - "merch design"
  - "t-shirt"
  - "apparel graphic"
allowed-tools:
  - Read
  - Write
  - Bash
---

# Brand Shirt Design Skill

Generate a portfolio-grade shirt graphic for the brand defined in BRAND.md.

## Workflow

1. Read `BRAND.md` from the project root. Load all color, typography, logo mark, and voice values.
2. Design a single-panel shirt graphic that:
   - Uses the logo mark as the primary visual element
   - Incorporates the tagline in display typography
   - Targets a 4500x5400px artboard (standard DTG print template)
   - Uses brand palette only (dark background with gold/teal accents)
   - Renders as pure HTML + inline SVG + CSS (no external dependencies)
3. Write the output to `output/shirt-design.html`.
4. Invoke the Brand Architect agent to review the output. If it fails, revise and re-submit.
5. Final output must pass Brand Architect review before confirming completion.

## Design Constraints

- The graphic must work on a black or deep navy shirt
- Logo mark must be at least 40% of the artboard width
- Tagline positioned below logo mark, centered, in Space Grotesk 700
- Use speed lines motif from the logo mark spec as a background texture
- No photography, no generic illustrations, no clip art
- SVG paths preferred over CSS shapes for print fidelity

## Output

Single file: `output/shirt-design.html`
Open in a browser to preview. Print at 300dpi for production.

Your first skill is live and producing real output. Next up, you will build a second skill that generates a horizontal-swipe pitch deck with two agents gating quality.

Build Skill 2 - Pitch Deck

Your shirt design skill proved the core loop works: skill reads brand, produces artifact, agent gates quality. Now you need a second skill that raises the complexity.

A pitch deck is a multi-surface challenge. Five slides means five compositions that must feel unified while telling a sequential story. This skill also introduces a second quality gate: the Creative Director agent scores storytelling and composition alongside the Brand Architect's palette check.

In this step, get ready to:
  • Create the pitch-deck skill file with CSS scroll-snap slide structure.
  • Invoke the skill and confirm the 5-slide deck passes both Brand Architect and Creative Director reviews.
Create the pitch deck skill file

The pitch deck skill follows the same pattern as your shirt design skill. It reads BRAND.md first, produces a self-contained HTML file, then routes the output through agents for review. The difference is the output format: five full-viewport slides with horizontal scroll-snap navigation.

  • Create the skill directory by running this command:
mkdir -p .claude/skills/pitch-deck
  • Open .claude/skills/pitch-deck/SKILL.md in your text editor and paste the following content:
---
name: pitch-deck
description: "Generate a 5-slide horizontal-swipe HTML pitch deck with brand-consistent visuals and storytelling."
triggers:
  - "pitch deck"
  - "investor deck"
  - "startup deck"
  - "fundraising deck"
allowed-tools:
  - Read
  - Write
  - Bash
---

# Brand Pitch Deck Skill

Generate a 5-slide pitch deck for the brand defined in BRAND.md.

## Workflow

1. Read `BRAND.md` from the project root. Load brand identity, colors, typography, voice.
2. Generate a single HTML file with CSS scroll-snap horizontal slides.
3. Write output to `output/pitch-deck.html`.
4. Invoke Brand Architect agent. If fail, revise.
5. Invoke Creative Director agent. If score below 8/10, revise.
6. Final output must pass both agents before confirming completion.

## Slide Structure

1. **Title Slide**: Logo mark (large, centered), company name, tagline. Navy background, gold logo.
2. **Problem**: One sentence problem statement. Bold stat or data point. Visual metaphor using brand elements.
3. **Solution**: What Pineapple AGI does. Three bullet capabilities max. Icon-style illustrations using brand palette.
4. **Traction**: Metrics or milestones. Use a simple chart or progress visualization in brand colors.
5. **Ask**: Funding amount or CTA. Contact info. Logo mark small in corner.

## Technical Requirements

- CSS scroll-snap with `scroll-snap-type: x mandatory` on the container
- Each slide is 100vw x 100vh
- Keyboard navigation: left/right arrows advance slides
- Slide counter indicator (dots or numbers) fixed at bottom
- All Google Fonts loaded via single link tag (Space Grotesk + Inter)
- Responsive: works on 1920x1080 and 1366x768
- No JavaScript frameworks. Vanilla JS for keyboard nav only.

## Voice

Follow BRAND.md voice: direct, kinetic, confident, zero fluff. Each slide headline is max 8 words. Body text max 20 words per point.

What does this skill file do?

The YAML frontmatter registers the skill with Claude Code. The triggers array tells Claude which phrases activate this skill (like /pitch-deck or typing "investor deck").

The Workflow section defines the agent pipeline: Brand Architect checks palette compliance, then Creative Director scores storytelling and composition. Both must pass before the output ships.

The Technical Requirements section constrains the HTML output to use CSS scroll-snap for horizontal slide navigation. This means native smooth scrolling without any JavaScript framework.

  • Save .claude/skills/pitch-deck/SKILL.md.
  • Confirm the file exists by running:
ls .claude/skills/pitch-deck/SKILL.md

You should see the file path printed in your terminal output.

File not found?

Make sure you created the pitch-deck directory inside .claude/skills/. Check your spelling matches exactly. The directory should sit alongside your existing shirt-design folder.

My pitch-deck SKILL.md isn't being found by Claude Code. Can you help me check the file path and directory structure?

Invoke the skill and verify the output

With the skill file saved, Claude Code can now execute it. This time two agents review the output before it ships. The Brand Architect validates palette and typography. The Creative Director scores composition and storytelling.

  • In your Claude Code session, type the following to trigger the pitch deck skill:
/pitch-deck

What happens when you run this?

Claude reads your SKILL.md workflow, loads BRAND.md for brand context, generates the 5-slide HTML file, then invokes the Brand Architect and Creative Director agents sequentially. If either agent fails the output, Claude revises and resubmits automatically.

This process may take a minute or two as Claude iterates to reach a passing score. Watch the terminal for agent review outputs.

  • Wait for Claude to confirm that both agents passed. You should see a Brand Architect PASS verdict and a Creative Director score of 8/10 or higher.
  • Confirm the output file exists by running:
ls output/pitch-deck.html
  • Open output/pitch-deck.html in your browser.
  • Use the left and right arrow keys to navigate between slides.

You should see 5 full-screen slides that snap horizontally: Title, Problem, Solution, Traction, and Ask. Each slide uses the Pineapple AGI brand palette (navy background, gold and teal accents) with Space Grotesk headings and Inter body text.

Why two agents for a pitch deck?

The shirt design only needed the Brand Architect because it is a single composition. A pitch deck tells a story across multiple slides. The Creative Director agent evaluates whether that story flows, whether information density is right, and whether a hiring manager would stop scrolling.

Stacking agents creates compounding quality. Each agent catches different classes of problems that the other misses.

Skill not recognized or output missing?

If Claude does not recognize /pitch-deck, confirm your file is named exactly SKILL.md (not skill.md or Skill.md) and sits at .claude/skills/pitch-deck/SKILL.md. You can also try describing your request naturally: "create a pitch deck for Pineapple AGI".

If the output file is missing, check that the output/ directory exists. Your settings.json grants write access to ./output/** so permissions should not be the issue.

My /pitch-deck skill isn't working in Claude Code. Help me debug the issue.

✔️ Awesome, I've got everything!

Great. Double check you have saved your SKILL.md file and that your pitch deck HTML opens cleanly in the browser.

ⓧ I'd like to double check the full code

Here is the complete .claude/skills/pitch-deck/SKILL.md file for comparison:

---
name: pitch-deck
description: "Generate a 5-slide horizontal-swipe HTML pitch deck with brand-consistent visuals and storytelling."
triggers:
  - "pitch deck"
  - "investor deck"
  - "startup deck"
  - "fundraising deck"
allowed-tools:
  - Read
  - Write
  - Bash
---

# Brand Pitch Deck Skill

Generate a 5-slide pitch deck for the brand defined in BRAND.md.

## Workflow

1. Read `BRAND.md` from the project root. Load brand identity, colors, typography, voice.
2. Generate a single HTML file with CSS scroll-snap horizontal slides.
3. Write output to `output/pitch-deck.html`.
4. Invoke Brand Architect agent. If fail, revise.
5. Invoke Creative Director agent. If score below 8/10, revise.
6. Final output must pass both agents before confirming completion.

## Slide Structure

1. **Title Slide**: Logo mark (large, centered), company name, tagline. Navy background, gold logo.
2. **Problem**: One sentence problem statement. Bold stat or data point. Visual metaphor using brand elements.
3. **Solution**: What Pineapple AGI does. Three bullet capabilities max. Icon-style illustrations using brand palette.
4. **Traction**: Metrics or milestones. Use a simple chart or progress visualization in brand colors.
5. **Ask**: Funding amount or CTA. Contact info. Logo mark small in corner.

## Technical Requirements

- CSS scroll-snap with `scroll-snap-type: x mandatory` on the container
- Each slide is 100vw x 100vh
- Keyboard navigation: left/right arrows advance slides
- Slide counter indicator (dots or numbers) fixed at bottom
- All Google Fonts loaded via single link tag (Space Grotesk + Inter)
- Responsive: works on 1920x1080 and 1366x768
- No JavaScript frameworks. Vanilla JS for keyboard nav only.

## Voice

Follow BRAND.md voice: direct, kinetic, confident, zero fluff. Each slide headline is max 8 words. Body text max 20 words per point.

Two skills down, one to go. Your studio now produces both static graphics and multi-slide presentations from a single brand brief. Next up, you will build the most technically ambitious skill: a 10-second animated logo reveal video using Remotion.

Build Skill 3 - Animated Launch Video

Your shirt design and pitch deck skills produce static artifacts. The third skill takes things further by generating a Remotion composition that renders to an actual MP4 video file.

Remotion is a React-based framework for creating programmatic videos. Instead of timeline-based editing, you describe animations in code using frame numbers and physics-based springs. This makes it perfect for Claude to generate.

In this step, get ready to:
  • Scaffold a Remotion project inside your repo.
  • Write the launch-video SKILL.md with a frame-by-frame animation sequence.
  • Invoke the skill and render the composition to MP4.
Scaffold the Remotion project

Remotion needs its own project directory with React, TypeScript, and bundling tooling. You will scaffold this inside your existing repo using the blank template.

  • Scaffold the Remotion project by running this command from your pineapple-brand-machine folder:
npx create-video@latest launch-video --template=blank

What does this command do?

This uses Remotion's scaffolding tool to create a new video project in a folder called launch-video. The --template=blank flag selects the blank template and gives you an empty canvas to build on.

The CLI may ask you about TailwindCSS and agent skills. Enter no for TailwindCSS and no for agent skills. This project does not need either.

  • Move into the new project directory and install dependencies by running:
cd launch-video
npm install
  • Confirm the project scaffolded correctly by running:
ls src/

You should see Root.tsx and index.ts in the output.

  • Move back to the project root by running:
cd ..

Seeing an error during scaffolding?

If the command fails inside your existing Git repo, try removing any --yes flag you may have added. The interactive version handles nested Git repos more gracefully. The --template=blank flag still skips template selection while allowing the interactive TUI to handle the rest.

Help me troubleshoot the Remotion scaffolding error

Write the launch-video skill

This skill instructs Claude to generate a PineappleReveal.tsx composition with frame-driven spring() and interpolate() animations. It also requires all 3 agents to pass before the video is ready to render.

  • Create the file .claude/skills/launch-video/SKILL.md and paste in the following content:
---
name: launch-video
description: "Generate a 10-second animated logo reveal as a Remotion TSX composition with spring physics animation."
triggers:
  - "launch video"
  - "logo animation"
  - "brand video"
  - "intro video"
allowed-tools:
  - Read
  - Write
  - Bash
---

# Animated Launch Video Skill

Generate a 10-second logo reveal animation using Remotion for the brand in BRAND.md.

## Workflow

1. Read `BRAND.md` from the project root.
2. Generate `launch-video/src/PineappleReveal.tsx` with the composition code.
3. Update `launch-video/src/Root.tsx` to register the PineappleReveal composition.
4. Invoke Brand Architect agent on the composition code (verify color values match palette).
5. Invoke Creative Director agent (evaluate animation storytelling and timing).
6. Invoke Production Engineer agent (verify frame math, imports, render readiness).
7. All 3 agents must pass before confirming ready to render.

## Animation Sequence (300 frames at 30fps = 10 seconds)

- Frames 0-30: Navy background fades in from black.
- Frames 30-90: Logo mark scales in from 0 to 1 using `spring({ fps: 30, frame: frame - 30, config: { damping: 12, stiffness: 100 } })`. Slight overshoot for energy.
- Frames 90-120: Tagline fades in below logo using `interpolate(frame, [90, 120], [0, 1], { extrapolateRight: "clamp" })`.
- Frames 120-180: Speed lines animate outward from logo center (staggered spring on each line).
- Frames 180-240: Hold. Full composition visible. No movement.
- Frames 240-300: Everything fades to brand gold background. Logo inverts to navy.

## Technical Requirements

- Composition: 1920x1080, 30fps, 300 frames (durationInFrames: 300)
- All animations driven by `useCurrentFrame()` only. No CSS transitions.
- Import `spring`, `interpolate`, `useCurrentFrame`, `useVideoConfig`, `AbsoluteFill` from 'remotion'.
- Logo rendered as inline SVG within the composition.
- Google Fonts loaded via `@remotion/google-fonts` or inline style with font-face.
- Render command: `npx remotion render src/index.ts PineappleReveal ../output/launch-video.mp4`

## Output

Composition file: `launch-video/src/PineappleReveal.tsx`
Rendered video: `output/launch-video.mp4`

What does this skill define?

The animation sequence section is the creative brief Claude follows frame-by-frame. It specifies a logo spring-in (frames 30-90), tagline fade (90-120), speed lines (120-180), a hold beat (180-240), and a closing color transition (240-300).

The technical requirements section locks down the exact Remotion APIs Claude must use. Frame-driven animation via useCurrentFrame() is mandatory. CSS transitions are forbidden because they cannot be rendered frame-accurately by Remotion.

This is the first skill that requires all 3 agents. The Production Engineer validates Remotion-specific concerns like frame math and composition registration.

  • Save .claude/skills/launch-video/SKILL.md.

File not saving to the right location?

Make sure the .claude/skills/launch-video/ directory already exists. You created it in Step 1 with mkdir -p. If it is missing, create it now with:

mkdir -p .claude/skills/launch-video

Help me fix the directory structure

✔️ Awesome, I've got everything!

Great. Double check you have saved the file before moving on.

ⓧ I'd like to double check the full code

---
name: launch-video
description: "Generate a 10-second animated logo reveal as a Remotion TSX composition with spring physics animation."
triggers:
  - "launch video"
  - "logo animation"
  - "brand video"
  - "intro video"
allowed-tools:
  - Read
  - Write
  - Bash
---

# Animated Launch Video Skill

Generate a 10-second logo reveal animation using Remotion for the brand in BRAND.md.

## Workflow

1. Read `BRAND.md` from the project root.
2. Generate `launch-video/src/PineappleReveal.tsx` with the composition code.
3. Update `launch-video/src/Root.tsx` to register the PineappleReveal composition.
4. Invoke Brand Architect agent on the composition code (verify color values match palette).
5. Invoke Creative Director agent (evaluate animation storytelling and timing).
6. Invoke Production Engineer agent (verify frame math, imports, render readiness).
7. All 3 agents must pass before confirming ready to render.

## Animation Sequence (300 frames at 30fps = 10 seconds)

- Frames 0-30: Navy background fades in from black.
- Frames 30-90: Logo mark scales in from 0 to 1 using `spring({ fps: 30, frame: frame - 30, config: { damping: 12, stiffness: 100 } })`. Slight overshoot for energy.
- Frames 90-120: Tagline fades in below logo using `interpolate(frame, [90, 120], [0, 1], { extrapolateRight: "clamp" })`.
- Frames 120-180: Speed lines animate outward from logo center (staggered spring on each line).
- Frames 180-240: Hold. Full composition visible. No movement.
- Frames 240-300: Everything fades to brand gold background. Logo inverts to navy.

## Technical Requirements

- Composition: 1920x1080, 30fps, 300 frames (durationInFrames: 300)
- All animations driven by `useCurrentFrame()` only. No CSS transitions.
- Import `spring`, `interpolate`, `useCurrentFrame`, `useVideoConfig`, `AbsoluteFill` from 'remotion'.
- Logo rendered as inline SVG within the composition.
- Google Fonts loaded via `@remotion/google-fonts` or inline style with font-face.
- Render command: `npx remotion render src/index.ts PineappleReveal ../output/launch-video.mp4`

## Output

Composition file: `launch-video/src/PineappleReveal.tsx`
Rendered video: `output/launch-video.mp4`
Invoke the skill and render the video

With the skill file in place, Claude knows how to produce the animation composition. You will invoke the skill, let the 3 agents review it, then render to MP4.

  • In your Claude Code session, invoke the launch video skill by typing:
/launch-video

What happens when you invoke this skill?

Claude reads BRAND.md, generates launch-video/src/PineappleReveal.tsx with the full animation code, updates launch-video/src/Root.tsx to register the composition, then runs the Brand Architect, Creative Director, and Production Engineer agents in sequence.

This is the most rigorous skill so far. All 3 agents must pass before Claude confirms the composition is ready. If any agent fails, Claude iterates on the code automatically.

  • Wait for all 3 agent reviews to pass. Claude will confirm when the composition is ready to render.
  • Navigate into the launch-video directory and render the video by running:
cd launch-video
npx remotion render src/index.ts PineappleReveal ../output/launch-video.mp4

What does the render command do?

This tells Remotion to bundle the project from src/index.ts, find the composition with ID PineappleReveal, render all 300 frames, encode them as H.264, and save the output to ../output/launch-video.mp4. Remotion bundles FFmpeg internally so you do not need to install it separately.

The render will take 30-90 seconds depending on your machine. You should see a progress bar showing frame-by-frame rendering.

  • Once rendering completes, navigate back to the project root by running:
cd ..
  • Verify the video file exists by running:
ls output/launch-video.mp4

You should see output/launch-video.mp4 listed. Open it in any video player to confirm a smooth 10-second animation with the Pineapple AGI logo scaling in, tagline fading, and speed lines radiating outward.

Render failing with composition not found?

This means Root.tsx does not register a composition with ID PineappleReveal. Open launch-video/src/Root.tsx and confirm it imports and registers the composition with that exact ID. The Production Engineer agent should have caught this. Re-run /launch-video if needed.

Help me fix the composition registration

You now have all 3 skills producing brand-consistent artifacts. A shirt design, a pitch deck, and an animated video. All gated by your agent pipeline. Next up, you will push everything to GitHub and document the repo so anyone can fork and use it.

Push to GitHub and Document

Your skill studio is fully operational. Three skills produce brand artifacts, and three agents gate every output before it ships. The last piece is making this whole system portable and shareable.

In this step, you will document the project with a README, add a .gitignore to keep large files out of version control, and push everything to GitHub so anyone can fork and rebrand the studio.

In this step, get ready to:
  • Write a README documenting the skill studio and how to customize it.
  • Add a .gitignore to exclude large binaries and local settings.
  • Commit and push the entire project to a public GitHub repository.
Create the README.md

A good README is what turns a folder of files into a project someone else can actually use. Anyone who finds your repo needs to know what it does, how to run it, and how to swap in their own brand.

  • Create a file called README.md in the root of your pineapple-brand-machine folder and paste in the following content:
# Pineapple Brand Machine

A Claude Code skill studio that produces brand-consistent artifacts for Pineapple AGI. Three skills generate portfolio-grade outputs. Three AI agents gate quality before anything ships.

## What This Repo Does

This is a portable `.claude/` skill stack. It contains:

- **3 Skills**: shirt-design, pitch-deck, launch-video
- **3 Quality-Gate Agents**: Brand Architect, Creative Director, Production Engineer
- **1 Shared Design System**: BRAND.md (single source of truth for all visual output)

Every artifact inherits identity from BRAND.md. Swap the brand file, re-run the skills, get new branded outputs.

## How to Use

1. Clone this repo:
   ```
   git clone https://github.com/YOUR_USERNAME/pineapple-brand-machine.git
   cd pineapple-brand-machine
   ```
2. Install the Remotion dependencies:
   ```
   cd launch-video && npm install && cd ..
   ```
3. Open the project folder in Claude Code.
4. Run any skill by typing its trigger:
   - `/shirt-design` - generates a print-ready shirt graphic
   - `/pitch-deck` - generates a 5-slide horizontal-swipe deck
   - `/launch-video` - generates a 10-second animated logo reveal

## Skills

| Skill | Output | Agents Required |
|-------|--------|-----------------|
| shirt-design | `output/shirt-design.html` (4500x5400px DTG template) | Brand Architect |
| pitch-deck | `output/pitch-deck.html` (5 CSS scroll-snap slides) | Brand Architect + Creative Director |
| launch-video | `output/launch-video.mp4` (10s Remotion animation) | Brand Architect + Creative Director + Production Engineer |

## Agents

| Agent | Role | Gate |
|-------|------|------|
| Brand Architect | Enforces BRAND.md compliance | Color, typography, whitespace, logo, slop detection |
| Creative Director | Portfolio-grade quality | Composition, storytelling, scroll-stop factor (min 8/10) |
| Production Engineer | Code and render validation | Valid markup, self-contained, accessibility, performance |

## Fork and Customize

1. Fork this repo.
2. Replace `BRAND.md` with your own brand identity (colors, typography, logo, voice).
3. Run the skills. Every output will reflect your new brand.
4. Adjust agent criteria in `.claude/agents/` if your brand has different quality standards.

What does this README cover?

The README has five sections that make the repo self-documenting. The intro explains what the project is. The "How to Use" section gives clone-to-run instructions. The Skills and Agents tables show what each piece does. The "Fork and Customize" section is the key selling point. It tells anyone how to swap BRAND.md and get their own branded outputs.

  • Save README.md.
  • Open the file in your text editor and confirm it renders with headings, tables, and code blocks.

Tables not rendering?

Markdown tables need the header separator row (the line with dashes and pipes). Make sure each table has a row like |-------|--------| between the header and body rows.

Why isn't my Markdown rendering properly?

Add the .gitignore

Some files should never go into version control. The rendered MP4 is too large for Git, node_modules/ can be reinstalled, and local settings are machine-specific.

  • Create a file called .gitignore in the root of your pineapple-brand-machine folder and paste in the following content:
node_modules/
output/*.mp4
.claude/settings.local.json
launch-video/dist/
launch-video/out/
.DS_Store
Thumbs.db

What does this .gitignore exclude?

  • node_modules/ contains installed packages that anyone can reinstall with npm install.
  • output/*.mp4 keeps large rendered videos out of the repo. HTML outputs stay tracked since they are small.
  • .claude/settings.local.json is for machine-specific Claude overrides that should not be shared.
  • .DS_Store and Thumbs.db are OS-generated hidden files that clutter repos.
  • Save .gitignore.
  • Confirm it exists by running:
ls -a

You should see .gitignore listed alongside your other dotfiles like .claude/.

Commit and push to GitHub

You need a GitHub repository to host your project. You will create one on GitHub, connect it as a remote, and push your local files up.

  • Go to github.com/new in your browser.
  • Enter pineapple-brand-machine as the repository name.
  • Select Public visibility.
  • Leave all other options unchecked (no README, no .gitignore, no license). You already have these locally.
  • Click Create repository.

GitHub shows a quick setup page with commands. You will use your own commands below instead.

  • Stage, commit, and push all project files by running these commands in your terminal:
git add -A
git commit -m "feat: initial brand machine with 3 skills + 3 agents"
git remote add origin https://github.com/[[GITHUB_USERNAME="YOUR_USERNAME"]]/pineapple-brand-machine.git
git push -u origin main

What do these commands do?

  • git add -A stages every file in the project (respecting your .gitignore rules).
  • git commit -m creates a snapshot of your project with a descriptive message.
  • git remote add origin connects your local repo to the GitHub repo you just created.
  • git push -u origin main uploads your files and sets main as the default remote branch.
  • Refresh your GitHub repo page in the browser.
  • You should see all your project files listed, with the README.md content rendered below the file list.

Push rejected or authentication failed?

If you see a "permission denied" or "authentication failed" error, GitHub requires a personal access token (PAT) or SSH key for command-line access. Password authentication was removed in 2021.

If you see "error: src refspec main does not match any", your default branch might be named master instead of main. Run git branch -M main to rename it, then try the push again.

Help me fix my git push to GitHub.

✔️ Awesome, I've got everything!

Double check you have saved both README.md and .gitignore, and that your GitHub repo page shows the rendered README.

ⓧ I'd like to double check the full code

Here is the complete .gitignore file:

node_modules/
output/*.mp4
.claude/settings.local.json
launch-video/dist/
launch-video/out/
.DS_Store
Thumbs.db

Secret mission

Add a Social Card Skill with Full Agent Pipeline

Your brand machine produces shirts, decks, and videos. But what about the first thing people see when your link gets shared on LinkedIn or Twitter? Build a 4th skill that generates branded Open Graph social cards and wire it through all 3 quality-gate agents.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely locally with a free Remotion license, so there are no ongoing costs.

Resources you used:

  • The pineapple-brand-machine project directory on your Desktop.
  • The launch-video/ Remotion project with its node_modules/ dependencies.
  • Generated artifacts in the output/ directory (HTML files and MP4 video).
  • A public GitHub repository hosting your brand machine.
  • Node.js and Git installed on your system.

Keep everything running

No action needed. Choose this if you plan to keep iterating on your skills or adding new brand artifacts.

  • Your project stays on your Desktop, ready to use whenever you open Claude Code in that directory.
  • Your GitHub repo remains public so others can fork it.
  • No costs accumulate since everything runs locally.

Pause - I'll come back to this later

Free up disk space by removing heavy dependencies while keeping your skill files intact.

  • Delete the node_modules/ folder inside launch-video/ to reclaim disk space. You can reinstall later with npm install.
  • Delete generated MP4 files in output/ since they can be re-rendered from your compositions.
  • Keep all .claude/ files, BRAND.md, and CLAUDE.md since these are your skill definitions and governance layer.
  • Your GitHub repo stays live. No changes needed there.

Delete - I don't want to use this again

Remove all project resources from your machine and GitHub.

  • Delete the entire pineapple-brand-machine folder from your Desktop.
  • On GitHub, go to your repository's Settings tab, scroll to the bottom, and click Delete this repository.
  • Node.js and Git can stay installed since other projects may use them.

That's a Wrap!

That's a Wrap!

Nice work. You just built a governed creative pipeline that turns one brand brief into portfolio-grade artifacts on demand.

You've learned how to:

  • Built a BRAND.md design system and 3 production skills (shirt-design, pitch-deck, launch-video) that all inherit brand identity from a single shared file.
  • Created 3 quality-gate agents (Brand Architect, Creative Director, Production Engineer) that review and enforce standards before any artifact ships.
  • Shipped a working Remotion video with spring physics animation and published the entire studio as a forkable GitHub repo that any Claude subscriber can customize.
  • Extended the studio with a 4th social card skill wired through the full agent pipeline.

Ready to quiz yourself?