Brand Agency

Name: Brand Agency
Author: glebis

glebis/claude-skills

241 installs
339 repo stars
Updated August 4, 2026
glebis/claude-skills

Define brand positioning, voice, visual direction, and messaging pillars for a product or campaign when you need agency-style brand strategy before design or launch work.

About

The brand-agency skill from glebis/claude-skills acts like a lightweight brand consultancy for early product work. It helps teams articulate positioning, audience fit, tone of voice, and visual identity direction so SaaS, ecommerce, and content products present a coherent brand before UI, marketing, or go-to-market execution begins.

Frames positioning and differentiation
Defines voice, tone, and messaging pillars
Guides visual identity and brand system direction
Connects brand choices to audience segments
Supports pre-launch naming and narrative consistency

Brand Agency by the numbers

241 all-time installs (skills.sh)
Ranked #887 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/glebis/claude-skills --skill brand-agency

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/glebis/claude-skills/brand-agency.svg)](https://skillselion.com/skills/glebis/claude-skills/brand-agency)

Installs	241
repo stars	★ 339
Last updated	August 4, 2026
Repository	glebis/claude-skills ↗

What it does

Define brand positioning, voice, visual direction, and messaging pillars for a product or campaign when you need agency-style brand strategy before design or launch work.

Files

SKILL.mdMarkdownGitHub ↗

Agency Brand Styling

Overview

To access Agency's official brand identity and style resources, use this skill. The style is based on neobrutalism aesthetic with bold colors, hard shadows, and strong typography.

Brand Guidelines

Colors

Main Colors:

Background Light: #ffffff - Light backgrounds
Foreground Dark: #000000 - Primary text and dark elements
Muted: #e5e5e5 - Subtle backgrounds, secondary elements

Primary Palette:

Primary (Orange): #e85d04 - Main accent, CTAs, highlights
Secondary (Yellow): #ffd60a - Secondary accent, warnings, attention
Accent (Blue): #3a86ff - Links, interactive elements, info

Chart/Extended Colors:

Chart Green: #38b000 - Success states, positive indicators
Chart Red: #d62828 - Error states, destructive actions

Typography

Font Stack:

Headings: Geist ExtraBold (weight 800), fallback: Arial
Body Text: EB Garamond, fallback: Georgia
Monospace/Code: Geist Mono, fallback: Courier New

Google Fonts Import:

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Geist:wght@800&family=Geist+Mono:wght@400;500&display=swap');

CSS Variables:

:root {
  --font-body: 'EB Garamond', Georgia, serif;
  --font-heading: 'Geist', Arial, sans-serif;
  --font-mono: 'Geist Mono', 'Courier New', monospace;
}

Neobrutalism Style

Shadows:

Hard shadow offset: 4px 4px 0px 0px #000000
No blur (stdDeviation: 0)
CSS: box-shadow: 4px 4px 0px 0px #000000;
SVG filter: <feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000"/>

Borders:

Width: 3px
Color: #000000
Style: solid
Border radius: 0 (no rounded corners)

Key Principles:

High contrast between elements
Bold, saturated colors
No gradients (flat colors only)
Strong black outlines
Offset hard shadows
Zero border radius

Application Guidelines

SVG Graphics

To create SVG in Agency brand style:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
      <feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000" flood-opacity="1"/>
    </filter>
  </defs>

  <circle cx="200" cy="200" r="80"
    fill="#e85d04"
    stroke="#000000"
    stroke-width="3"
    filter="url(#shadow)"/>
</svg>

Presentations (Marp/PowerPoint)

Slide backgrounds by type:

Title slides: Primary Orange #e85d04
Content slides: Light #ffffff or Muted #e5e5e5
Accent slides: Secondary Yellow #ffd60a, Accent Blue #3a86ff
Dark slides: Foreground #000000

Text colors:

On light backgrounds: #000000
On dark/colored backgrounds: #ffffff

Web/HTML

:root {
  /* Colors */
  --color-background: #ffffff;
  --color-foreground: #000000;
  --color-primary: #e85d04;
  --color-secondary: #ffd60a;
  --color-accent: #3a86ff;
  --color-success: #38b000;
  --color-error: #d62828;
  --color-muted: #e5e5e5;

  /* Typography */
  --font-body: 'EB Garamond', Georgia, serif;
  --font-heading: 'Geist', Arial, sans-serif;
  --font-mono: 'Geist Mono', 'Courier New', monospace;

  /* Shadows */
  --shadow: 4px 4px 0px 0px #000000;
  --shadow-sm: 2px 2px 0px 0px #000000;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
}

/* Body */
body {
  font-family: var(--font-body);
  color: var(--color-foreground);
  background: var(--color-background);
}

/* Buttons */
.btn {
  background: var(--color-primary);
  color: white;
  border: 3px solid var(--color-foreground);
  box-shadow: var(--shadow);
  border-radius: 0;
  font-family: var(--font-heading);
  font-weight: 800;
}

/* Cards */
.card {
  background: var(--color-background);
  border: 3px solid var(--color-foreground);
  box-shadow: var(--shadow);
  border-radius: 0;
}

/* Code */
code, pre {
  font-family: var(--font-mono);
  background: var(--color-foreground);
  color: white;
  border: 3px solid var(--color-foreground);
}

Color Usage Quick Reference

Context	Color	Hex
Primary action	Orange	`#e85d04`
Secondary action	Yellow	`#ffd60a`
Links/Info	Blue	`#3a86ff`
Success	Green	`#38b000`
Error/Danger	Red	`#d62828`
Text (light bg)	Black	`#000000`
Text (dark bg)	White	`#ffffff`
Muted/Disabled	Gray	`#e5e5e5`

Assets

Logo: assets/logo.svg - Agency logo in neobrutalism style (terminal window with code symbols and geometric shapes)

Social Media Templates

ASCII-art style HTML templates for social media using Geist Mono font. Render to PNG using Playwright.

Available Templates

Template	Size	Platform
`instagram/story-announcement`	1080x1920	IG Story
`instagram/story-quote`	1080x1920	IG Story
`instagram/post-title`	1080x1350	IG Post
`instagram/post-tips`	1080x1350	IG Post
`instagram/post-event`	1080x1350	IG Post
`youtube/thumbnail`	1280x720	YT Thumbnail
`youtube/shorts-cover`	1080x1920	YT Shorts
`social/cover-banner`	1584x396	LinkedIn/FB
`social/tiktok`	1080x1920	TikTok
`social/twitter-post`	1200x675	X/Twitter
`social/pinterest-pin`	1000x1500	Pinterest

Usage

# Render all templates
node scripts/render-templates.js

# Render specific template
node scripts/render-templates.js --template instagram/story-announcement

# Custom output path
node scripts/render-templates.js -t youtube/thumbnail -o my-thumbnail.png

# List available templates
node scripts/render-templates.js --list

ASCII Style Elements

Templates use ASCII box-drawing characters for decoration:

Frames:   ┌─────┐  ╔═════╗  ┏━━━━━┓
          │     │  ║     ║  ┃     ┃
          └─────┘  ╚═════╝  ┗━━━━━┛

Lines:    ─ │ ═ ║ ━ ┃

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

Shapes:   ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇

Blocks:   █ ▓ ▒ ░

Template Files

Located in: assets/templates/

{
  "name": "brand-agency",
  "description": "Applies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interf",
  "author": {
    "name": "Gleb Kalinin"
  },
  "repository": "https://github.com/glebis/claude-skills",
  "license": "MIT"
}

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
      <feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000" flood-opacity="1"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="400" height="400" fill="#ffffff"/>

  <!-- Terminal window frame -->
  <rect
    x="40"
    y="60"
    width="320"
    height="280"
    fill="#000000"
    stroke="#000000"
    stroke-width="3"
    filter="url(#shadow)"
  />

  <!-- Terminal title bar -->
  <rect x="40" y="60" width="320" height="35" fill="#e5e5e5" stroke="#000000" stroke-width="3"/>

  <!-- Window buttons -->
  <circle cx="65" cy="77" r="8" fill="#d62828" stroke="#000000" stroke-width="2"/>
  <circle cx="90" cy="77" r="8" fill="#ffd60a" stroke="#000000" stroke-width="2"/>
  <circle cx="115" cy="77" r="8" fill="#38b000" stroke="#000000" stroke-width="2"/>

  <!-- Terminal content -->
  <text x="60" y="130" font-family="Space Mono, monospace" font-size="16" fill="#38b000">$ claude-code</text>
  <text x="60" y="160" font-family="Space Mono, monospace" font-size="16" fill="#ffffff">Loading shapes...</text>

  <!-- Animated shapes in terminal -->
  <circle cx="100" cy="220" r="30" fill="#e85d04" stroke="#ffffff" stroke-width="2"/>
  <rect x="160" y="190" width="60" height="60" fill="#ffd60a" stroke="#ffffff" stroke-width="2"/>
  <polygon points="280,190 310,250 250,250" fill="#3a86ff" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>

  <!-- Cursor line -->
  <text x="60" y="300" font-family="Space Mono, monospace" font-size="16" fill="#38b000">$ _</text>

  <!-- Decorative corner shapes -->
  <rect x="10" y="10" width="30" height="30" fill="#e85d04" stroke="#000000" stroke-width="2" filter="url(#shadow)"/>
  <circle cx="385" cy="25" r="15" fill="#3a86ff" stroke="#000000" stroke-width="2" filter="url(#shadow)"/>
  <polygon points="25,385 40,355 10,355" fill="#ffd60a" stroke="#000000" stroke-width="2" stroke-linejoin="round" filter="url(#shadow)"/>
  <rect x="355" y="355" width="30" height="30" fill="#38b000" stroke="#000000" stroke-width="2" filter="url(#shadow)"/>

</svg>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1080px;
  height: 1350px;
  background: #38b000;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px;
  gap: 40px;
}

.date-badge {
  background: #000000;
  padding: 30px 50px;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
  text-align: center;
}

.date-month {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #ffd60a;
}

.date-day {
  font-size: 100px;
  font-weight: 700;
  line-height: 1;
  margin: 10px 0;
}

.date-year {
  font-size: 24px;
  opacity: 0.7;
}

.event-card {
  background: #ffffff;
  color: #000000;
  padding: 60px;
  box-shadow: 10px 10px 0 #000;
  text-align: center;
  max-width: 900px;
  width: 100%;
}

.event-type {
  font-size: 22px;
  letter-spacing: 0.3em;
  opacity: 0.5;
  margin-bottom: 20px;
}

.event-name {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 30px;
}

.event-divider {
  font-size: 20px;
  opacity: 0.3;
  margin: 20px 0;
}

.event-details {
  font-size: 26px;
  line-height: 1.6;
}

.event-details span {
  display: block;
}

.register-btn {
  background: #e85d04;
  color: #ffffff;
  padding: 25px 50px;
  font-size: 26px;
  font-weight: 700;
  border: none;
  box-shadow: 6px 6px 0 #000;
  letter-spacing: 0.1em;
}

.decorations {
  display: flex;
  gap: 40px;
  font-size: 36px;
  opacity: 0.6;
}
</style>
</head>
<body>
<div class="date-badge">
  <div class="date-month">DECEMBER</div>
  <div class="date-day">15</div>
  <div class="date-year">2024</div>
</div>

<div class="event-card">
  <div class="event-type">WORKSHOP</div>
  <div class="event-name">Claude Code Lab</div>
  <div class="event-divider">╔════════════════════╗</div>
  <div class="event-details">
    <span>◆ 18:00 - 20:00 CET</span>
    <span>◆ Online via Zoom</span>
    <span>◆ Free Registration</span>
  </div>
</div>

<div class="register-btn">→ REGISTER NOW ←</div>

<div class="decorations">
  <span>░░░</span>
  <span>▓▓▓</span>
  <span>███</span>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1080px;
  height: 1350px;
  background: #ffd60a;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: #000000;
  display: flex;
  flex-direction: column;
  padding: 80px;
}

.header {
  text-align: center;
  margin-bottom: 50px;
}

.number {
  font-size: 140px;
  font-weight: 700;
  line-height: 1;
  color: #e85d04;
  text-shadow: 6px 6px 0 #000;
}

.title {
  font-size: 48px;
  font-weight: 700;
  margin-top: 20px;
}

.tips-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.tip {
  background: #ffffff;
  border: 3px solid #000000;
  box-shadow: 6px 6px 0 #000;
  padding: 35px 40px;
  display: flex;
  align-items: flex-start;
  gap: 25px;
}

.tip-number {
  background: #000000;
  color: #ffd60a;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  flex-shrink: 0;
}

.tip-text {
  font-size: 28px;
  line-height: 1.3;
}

.footer {
  text-align: center;
  margin-top: 40px;
  font-size: 24px;
  opacity: 0.6;
}
</style>
</head>
<body>
<div class="header">
  <div class="number">5</div>
  <div class="title">TIPS FOR BETTER CODE</div>
</div>

<div class="tips-container">
  <div class="tip">
    <div class="tip-number">01</div>
    <div class="tip-text">Write tests before you write code</div>
  </div>

  <div class="tip">
    <div class="tip-number">02</div>
    <div class="tip-text">Keep functions small and focused</div>
  </div>

  <div class="tip">
    <div class="tip-number">03</div>
    <div class="tip-text">Use meaningful variable names</div>
  </div>

  <div class="tip">
    <div class="tip-number">04</div>
    <div class="tip-text">Document the "why", not the "what"</div>
  </div>

  <div class="tip">
    <div class="tip-number">05</div>
    <div class="tip-text">Refactor early, refactor often</div>
  </div>
</div>

<div class="footer">━━━ Save for later ━━━</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1080px;
  height: 1350px;
  background: #3a86ff;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px;
}

.frame {
  border: 4px solid #000000;
  background: #ffffff;
  color: #000000;
  padding: 80px 60px;
  box-shadow: 12px 12px 0 #000;
  width: 100%;
  max-width: 900px;
  text-align: center;
}

.ascii-top {
  font-size: 20px;
  color: #000;
  opacity: 0.4;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}

.tag {
  display: inline-block;
  background: #e85d04;
  color: #ffffff;
  padding: 12px 24px;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 40px;
  box-shadow: 4px 4px 0 #000;
}

.title {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 30px;
}

.subtitle {
  font-size: 28px;
  font-weight: 400;
  opacity: 0.7;
  line-height: 1.4;
}

.ascii-bottom {
  font-size: 20px;
  color: #000;
  opacity: 0.4;
  margin-top: 40px;
  letter-spacing: 0.1em;
}

.shapes {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 50px;
  font-size: 48px;
}

.shape {
  color: #ffd60a;
  text-shadow: 3px 3px 0 #000;
}
</style>
</head>
<body>
<div class="frame">
  <div class="ascii-top">┌──────────────────────────────┐</div>

  <div class="tag">TUTORIAL</div>

  <div class="title">Building AI Agents</div>

  <div class="subtitle">From concept to production in 30 minutes</div>

  <div class="ascii-bottom">└──────────────────────────────┘</div>
</div>

<div class="shapes">
  <span class="shape">▲</span>
  <span class="shape">●</span>
  <span class="shape">■</span>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1080px;
  height: 1920px;
  background: #e85d04;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

.safe-zone {
  height: 310px;
  width: 100%;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 40px;
}

.badge {
  background: #000000;
  color: #ffd60a;
  padding: 16px 32px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: 6px 6px 0 #000;
}

.headline-box {
  background: #ffffff;
  color: #000000;
  padding: 50px 60px;
  box-shadow: 8px 8px 0 #000;
  text-align: center;
  max-width: 900px;
}

.headline {
  font-size: 72px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
}

.ascii-border {
  font-size: 24px;
  color: #000;
  opacity: 0.3;
  letter-spacing: 0.2em;
}

.subheadline {
  font-size: 32px;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 30px;
  text-align: center;
}

.cta-btn {
  background: #000000;
  color: #ffffff;
  padding: 24px 48px;
  font-size: 28px;
  font-weight: 700;
  border: none;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
  cursor: pointer;
  letter-spacing: 0.05em;
}

.decorations {
  display: flex;
  gap: 40px;
  font-size: 48px;
  margin-top: 40px;
}

.decoration {
  opacity: 0.6;
}
</style>
</head>
<body>
<div class="safe-zone"></div>

<div class="content">
  <div class="badge">★ NEW RELEASE ★</div>

  <div class="headline-box">
    <div class="ascii-border">╔══════════════════════════╗</div>
    <div class="headline">CLAUDE<br>CODE LAB</div>
    <div class="ascii-border">╚══════════════════════════╝</div>
  </div>

  <div class="subheadline">━━━ Learn AI-Powered Development ━━━</div>

  <div class="cta-btn">→ SWIPE UP ←</div>

  <div class="decorations">
    <span class="decoration">▲</span>
    <span class="decoration">●</span>
    <span class="decoration">■</span>
  </div>
</div>

<div class="safe-zone"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1080px;
  height: 1920px;
  background: #000000;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

.safe-zone {
  height: 310px;
  width: 100%;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 50px;
}

.quote-marks {
  font-size: 120px;
  color: #e85d04;
  line-height: 1;
}

.quote-box {
  background: #ffd60a;
  color: #000000;
  padding: 60px;
  box-shadow: 8px 8px 0 #e85d04;
  max-width: 900px;
}

.quote-text {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.author-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.author-line {
  font-size: 24px;
  color: #e85d04;
  letter-spacing: 0.3em;
}

.author-name {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
}

.author-title {
  font-size: 24px;
  opacity: 0.6;
}

.decorations {
  display: flex;
  gap: 60px;
  font-size: 36px;
  color: #3a86ff;
}
</style>
</head>
<body>
<div class="safe-zone"></div>

<div class="content">
  <div class="quote-marks">❝</div>

  <div class="quote-box">
    <div class="quote-text">The best way to predict the future is to build it.</div>
  </div>

  <div class="author-block">
    <div class="author-line">━━━━━━━━━━━━</div>
    <div class="author-name">ALAN KAY</div>
    <div class="author-title">Computer Scientist</div>
  </div>

  <div class="decorations">
    <span>◆</span>
    <span>◇</span>
    <span>◆</span>
  </div>
</div>

<div class="safe-zone"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1584px;
  height: 396px;
  background: #000000;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 80px;
}

.left-section {
  display: flex;
  align-items: center;
  gap: 40px;
}

.logo-box {
  background: #e85d04;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 6px 0 #ffd60a;
}

.logo-icon {
  font-size: 60px;
  color: #ffffff;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brand-name {
  font-size: 48px;
  font-weight: 700;
}

.tagline {
  font-size: 22px;
  opacity: 0.7;
}

.center-section {
  display: flex;
  gap: 30px;
  font-size: 28px;
  opacity: 0.4;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 30px;
}

.cta-box {
  background: #ffd60a;
  color: #000000;
  padding: 20px 40px;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 4px 4px 0 #e85d04;
}

.social-links {
  display: flex;
  gap: 20px;
  font-size: 24px;
  color: #3a86ff;
}
</style>
</head>
<body>
<div class="left-section">
  <div class="logo-box">
    <div class="logo-icon">◆</div>
  </div>
  <div class="brand-text">
    <div class="brand-name">CLAUDE CODE LAB</div>
    <div class="tagline">AI-Powered Development</div>
  </div>
</div>

<div class="center-section">
  <span>━━━</span>
  <span>◆</span>
  <span>━━━</span>
</div>

<div class="right-section">
  <div class="cta-box">FOLLOW US</div>
  <div class="social-links">
    <span>▶</span>
    <span>◉</span>
    <span>■</span>
  </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1000px;
  height: 1500px;
  background: #ffd60a;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: #000000;
  display: flex;
  flex-direction: column;
  padding: 60px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-icon {
  background: #e85d04;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
}

.save-btn {
  background: #d62828;
  color: #ffffff;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 3px 3px 0 #000;
}

.main-image {
  background: #000000;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  box-shadow: 8px 8px 0 #e85d04;
}

.pin-icon {
  font-size: 200px;
  color: #e85d04;
  margin-bottom: 30px;
}

.pin-title {
  font-size: 56px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  line-height: 1.1;
  padding: 0 40px;
}

.pin-subtitle {
  font-size: 28px;
  color: #ffffff;
  opacity: 0.7;
  margin-top: 20px;
}

.description {
  background: #ffffff;
  padding: 35px;
  box-shadow: 6px 6px 0 #000;
}

.desc-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
}

.desc-text {
  font-size: 22px;
  line-height: 1.5;
  opacity: 0.8;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}

.tag {
  background: #3a86ff;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 3px 3px 0 #000;
}
</style>
</head>
<body>
<div class="header">
  <div class="logo">
    <div class="logo-icon">◆</div>
    <div class="logo-text">claudecodelab</div>
  </div>
  <div class="save-btn">SAVE</div>
</div>

<div class="main-image">
  <div class="pin-icon">⚙</div>
  <div class="pin-title">10 AI CODING<br>TIPS</div>
  <div class="pin-subtitle">For beginners</div>
</div>

<div class="description">
  <div class="desc-title">Quick Guide</div>
  <div class="desc-text">
    Learn how to boost your productivity with AI-powered development tools and techniques.
  </div>
  <div class="tags">
    <span class="tag">#coding</span>
    <span class="tag">#ai</span>
    <span class="tag">#tutorial</span>
    <span class="tag">#tips</span>
  </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1080px;
  height: 1920px;
  background: #000000;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px;
}

.safe-zone {
  height: 250px;
  width: 100%;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.glitch-text {
  font-size: 100px;
  font-weight: 700;
  position: relative;
  text-shadow:
    4px 0 #00f5d4,
    -4px 0 #fe6d73;
}

.main-box {
  background: linear-gradient(135deg, #fe6d73 0%, #00f5d4 100%);
  padding: 60px 80px;
  box-shadow: 10px 10px 0 #ffffff;
}

.main-text {
  font-size: 64px;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  color: #000000;
}

.hashtags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 800px;
}

.hashtag {
  background: #ffd60a;
  color: #000000;
  padding: 15px 25px;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 4px 4px 0 #ffffff;
}

.username {
  font-size: 32px;
  color: #3a86ff;
  letter-spacing: 0.1em;
}

.decorations {
  display: flex;
  gap: 40px;
  font-size: 48px;
}

.deco-left {
  color: #00f5d4;
}

.deco-right {
  color: #fe6d73;
}
</style>
</head>
<body>
<div class="safe-zone"></div>

<div class="content">
  <div class="glitch-text">⚡</div>

  <div class="main-box">
    <div class="main-text">CODE<br>FASTER<br>WITH AI</div>
  </div>

  <div class="hashtags">
    <span class="hashtag">#coding</span>
    <span class="hashtag">#ai</span>
    <span class="hashtag">#tech</span>
    <span class="hashtag">#dev</span>
  </div>

  <div class="username">@claudecodelab</div>

  <div class="decorations">
    <span class="deco-left">◀◀◀</span>
    <span class="deco-right">▶▶▶</span>
  </div>
</div>

<div class="safe-zone"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1200px;
  height: 675px;
  background: #e85d04;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

.card {
  background: #ffffff;
  color: #000000;
  padding: 50px 60px;
  box-shadow: 10px 10px 0 #000;
  max-width: 1000px;
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.handle {
  font-size: 22px;
  color: #3a86ff;
  font-weight: 500;
}

.timestamp {
  font-size: 18px;
  opacity: 0.5;
}

.tweet-text {
  font-size: 36px;
  line-height: 1.4;
  margin-bottom: 30px;
}

.highlight {
  background: #ffd60a;
  padding: 2px 8px;
}

.ascii-divider {
  font-size: 18px;
  opacity: 0.3;
  letter-spacing: 0.2em;
  margin-bottom: 25px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metrics {
  display: flex;
  gap: 40px;
  font-size: 20px;
  opacity: 0.6;
}

.metric {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cta {
  background: #000000;
  color: #ffffff;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 4px 4px 0 #e85d04;
}
</style>
</head>
<body>
<div class="card">
  <div class="header">
    <div class="handle">@claudecodelab</div>
    <div class="timestamp">2h ago</div>
  </div>

  <div class="tweet-text">
    Just shipped a new feature using <span class="highlight">Claude Agent SDK</span> in 30 minutes.

    The future of development is here. ◆
  </div>

  <div class="ascii-divider">━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━</div>

  <div class="footer">
    <div class="metrics">
      <span class="metric">◇ 1.2K</span>
      <span class="metric">↻ 342</span>
      <span class="metric">♡ 4.5K</span>
    </div>
    <div class="cta">FOLLOW →</div>
  </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1080px;
  height: 1920px;
  background: linear-gradient(180deg, #3a86ff 0%, #000000 100%);
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px;
  gap: 60px;
}

.safe-zone {
  height: 200px;
  width: 100%;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.shorts-badge {
  background: #d62828;
  color: #ffffff;
  padding: 20px 40px;
  font-size: 32px;
  font-weight: 700;
  box-shadow: 6px 6px 0 #000;
  letter-spacing: 0.1em;
}

.icon-container {
  background: #000000;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 10px 10px 0 rgba(255,255,255,0.2);
}

.icon {
  font-size: 150px;
  color: #ffd60a;
}

.title-box {
  background: #ffffff;
  color: #000000;
  padding: 50px 70px;
  box-shadow: 10px 10px 0 #000;
  text-align: center;
  max-width: 900px;
}

.title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
}

.ascii-border {
  font-size: 22px;
  opacity: 0.3;
  margin: 20px 0;
}

.subtitle {
  font-size: 28px;
  font-weight: 400;
  opacity: 0.7;
}

.cta {
  font-size: 36px;
  font-weight: 700;
  color: #ffd60a;
  text-shadow: 3px 3px 0 #000;
}

.decorations {
  display: flex;
  gap: 50px;
  font-size: 48px;
  opacity: 0.4;
}
</style>
</head>
<body>
<div class="safe-zone"></div>

<div class="content">
  <div class="shorts-badge">#SHORTS</div>

  <div class="icon-container">
    <div class="icon">⚡</div>
  </div>

  <div class="title-box">
    <div class="ascii-border">╔══════════════════╗</div>
    <div class="title">60 SEC<br>AI TIP</div>
    <div class="ascii-border">╚══════════════════╝</div>
    <div class="subtitle">Quick coding tricks</div>
  </div>

  <div class="cta">▶ WATCH NOW</div>

  <div class="decorations">
    <span>░░</span>
    <span>▓▓</span>
    <span>██</span>
  </div>
</div>

<div class="safe-zone"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1280px;
  height: 720px;
  background: #d62828;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 50px;
  gap: 40px;
}

.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.badge {
  display: inline-block;
  background: #ffd60a;
  color: #000000;
  padding: 12px 24px;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 4px 4px 0 #000;
  align-self: flex-start;
}

.title {
  font-size: 72px;
  font-weight: 700;
  line-height: 1.0;
  text-shadow: 4px 4px 0 #000;
}

.subtitle {
  font-size: 28px;
  opacity: 0.9;
  line-height: 1.3;
}

.ascii-deco {
  font-size: 24px;
  opacity: 0.5;
  letter-spacing: 0.2em;
}

.right-panel {
  width: 320px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.icon-box {
  background: #000000;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
}

.icon {
  font-size: 100px;
  color: #e85d04;
}

.channel-name {
  background: #ffffff;
  color: #000000;
  padding: 15px 30px;
  font-size: 20px;
  font-weight: 700;
  box-shadow: 4px 4px 0 #000;
}
</style>
</head>
<body>
<div class="left-panel">
  <div class="badge">NEW VIDEO</div>
  <div class="title">CLAUDE<br>AGENT SDK</div>
  <div class="subtitle">Build AI agents in 10 minutes</div>
  <div class="ascii-deco">════════════════════</div>
</div>

<div class="right-panel">
  <div class="icon-box">
    <div class="icon">▶</div>
  </div>
  <div class="channel-name">@CLAUDECODELAB</div>
</div>
</body>
</html>

#!/usr/bin/env node
const { chromium } = require('playwright');
const path = require('path');
const fs = require('fs');

// Template configurations with dimensions
const TEMPLATES = {
  // Instagram
  'instagram/story-announcement': { width: 1080, height: 1920 },
  'instagram/story-quote': { width: 1080, height: 1920 },
  'instagram/post-title': { width: 1080, height: 1350 },
  'instagram/post-tips': { width: 1080, height: 1350 },
  'instagram/post-event': { width: 1080, height: 1350 },
  // YouTube
  'youtube/thumbnail': { width: 1280, height: 720 },
  'youtube/shorts-cover': { width: 1080, height: 1920 },
  // Social
  'social/cover-banner': { width: 1584, height: 396 },
  'social/tiktok': { width: 1080, height: 1920 },
  'social/twitter-post': { width: 1200, height: 675 },
  'social/pinterest-pin': { width: 1000, height: 1500 },
};

async function renderTemplate(templateName, outputPath) {
  const config = TEMPLATES[templateName];
  if (!config) {
    console.error(`Unknown template: ${templateName}`);
    console.log('Available templates:', Object.keys(TEMPLATES).join(', '));
    process.exit(1);
  }

  const templatePath = path.resolve(__dirname, '..', 'assets', 'templates', `${templateName}.html`);

  if (!fs.existsSync(templatePath)) {
    console.error(`Template file not found: ${templatePath}`);
    process.exit(1);
  }

  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: config.width, height: config.height },
    deviceScaleFactor: 1,
  });

  const page = await context.newPage();
  await page.goto(`file://${templatePath}`, { waitUntil: 'networkidle' });

  // Wait for fonts to load
  await page.waitForTimeout(1000);

  const finalOutput = outputPath || path.resolve(__dirname, '..', 'output', 'templates', `${templateName.replace('/', '-')}.png`);

  // Ensure output directory exists
  const outputDir = path.dirname(finalOutput);
  if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
  }

  await page.screenshot({ path: finalOutput, type: 'png' });

  await browser.close();

  console.log(`Rendered: ${templateName} -> ${finalOutput}`);
  return finalOutput;
}

async function renderAll() {
  console.log('Rendering all templates...\n');

  for (const templateName of Object.keys(TEMPLATES)) {
    await renderTemplate(templateName);
  }

  console.log('\nAll templates rendered!');
}

// CLI handling
const args = process.argv.slice(2);

if (args.includes('--help') || args.includes('-h')) {
  console.log(`
Social Media Template Renderer
==============================

Usage:
  node render-templates.js                     Render all templates
  node render-templates.js --template NAME     Render specific template
  node render-templates.js --list              List available templates

Options:
  --template, -t NAME   Template to render (e.g., instagram/story-announcement)
  --output, -o PATH     Custom output path for the PNG
  --list, -l            List all available templates
  --help, -h            Show this help

Examples:
  node render-templates.js --template instagram/story-announcement
  node render-templates.js -t youtube/thumbnail -o custom-thumbnail.png
`);
  process.exit(0);
}

if (args.includes('--list') || args.includes('-l')) {
  console.log('Available templates:\n');
  for (const [name, config] of Object.entries(TEMPLATES)) {
    console.log(`  ${name.padEnd(35)} ${config.width}x${config.height}`);
  }
  process.exit(0);
}

const templateIndex = args.findIndex(a => a === '--template' || a === '-t');
const outputIndex = args.findIndex(a => a === '--output' || a === '-o');

if (templateIndex !== -1) {
  const templateName = args[templateIndex + 1];
  const outputPath = outputIndex !== -1 ? args[outputIndex + 1] : null;
  renderTemplate(templateName, outputPath).catch(console.error);
} else {
  renderAll().catch(console.error);
}