From b264065cc44f0350df17adb6e01e4fe4ccb4c907 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Tue, 6 Jan 2026 18:49:30 -0800
Subject: [PATCH] Prepare for launch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add meta description and OpenGraph tags for social sharing
- Create OG image (SVG)
- Fix README: "Design Language" → "Impeccable"
- Fix DEVELOP.md: update build script line count

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 DEVELOP.md          |  4 ++--
 README.md           |  2 +-
 public/index.html   | 16 ++++++++++++++++
 public/og-image.svg | 32 ++++++++++++++++++++++++++++++++
 4 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 public/og-image.svg

diff --git a/DEVELOP.md b/DEVELOP.md
index 8c7e64374..2ef211f54 100644
--- a/DEVELOP.md
+++ b/DEVELOP.md
@@ -175,7 +175,7 @@ git commit -m "Add [command/skill name]"
 
 ## Build System Details
 
-The build system (`scripts/build.js`) is a single 410-line Node.js script with:
+The build system (`scripts/build.js`) is a single ~170-line Node.js script with:
 - Custom YAML frontmatter parser (no dependencies)
 - Provider-specific transformation functions
 - Automatic directory management
@@ -234,7 +234,7 @@ impeccable/
 │   ├── gemini/
 │   └── codex/
 ├── scripts/
-│   └── build.js         # Build system (410 lines, zero deps)
+│   └── build.js         # Build system (~170 lines, zero deps)
 ├── package.json         # ESM project config
 ├── README.md            # User documentation
 ├── DEVELOP.md           # This file
diff --git a/README.md b/README.md
index 6cbd1b421..6c8dab623 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ The vocabulary you didn't know you needed. 1 skill, 15 commands, and curated ant
 
 ## The Missing Upgrade
 
-This is the missing upgrade to Anthropic's `frontend-design` skill. Every LLM learned from the same generic templates. Without guidance, you get the same predictable mistakes: Inter font, purple gradients, cards nested in cards, gray text on colored backgrounds. Design Language fights that bias with an expanded skill, 15 steering commands, and curated anti-patterns.
+This is the missing upgrade to Anthropic's `frontend-design` skill. Every LLM learned from the same generic templates. Without guidance, you get the same predictable mistakes: Inter font, purple gradients, cards nested in cards, gray text on colored backgrounds. Impeccable fights that bias with an expanded skill, 15 steering commands, and curated anti-patterns.
 
 ## What's Included
 
diff --git a/public/index.html b/public/index.html
index 538ce2c2f..4c8f52846 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,22 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Impeccable: The missing upgrade to Anthropic's frontend-design skill</title>
+  <meta name="description" content="1 skill, 15 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
+
+  <!-- OpenGraph -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://impeccable.style">
+  <meta property="og:title" content="Impeccable: Design skills for AI coding tools">
+  <meta property="og:description" content="1 skill, 15 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
+  <meta property="og:image" content="https://impeccable.style/og-image.svg">
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="https://impeccable.style">
+  <meta name="twitter:title" content="Impeccable: Design skills for AI coding tools">
+  <meta name="twitter:description" content="1 skill, 15 commands, and curated anti-patterns for impeccable frontend design.">
+  <meta name="twitter:image" content="https://impeccable.style/og-image.svg">
+
   <link rel="icon" type="image/svg+xml" href="./favicon.svg">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
diff --git a/public/og-image.svg b/public/og-image.svg
new file mode 100644
index 000000000..83192dd48
--- /dev/null
+++ b/public/og-image.svg
@@ -0,0 +1,32 @@
+<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#f5f3ef"/>
+      <stop offset="100%" style="stop-color:#e8e4df"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1200" height="630" fill="url(#bg)"/>
+
+  <!-- Decorative slash -->
+  <text x="950" y="480" font-family="system-ui, -apple-system, sans-serif" font-size="400" font-weight="300" fill="#1a1a1a" opacity="0.06">/</text>
+
+  <!-- Main title -->
+  <text x="80" y="280" font-family="Georgia, 'Times New Roman', serif" font-size="96" font-weight="400" fill="#1a1a1a">Impeccable</text>
+
+  <!-- Tagline -->
+  <text x="80" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#6b7280">Design skills for AI coding tools</text>
+
+  <!-- Stats -->
+  <text x="80" y="460" font-family="ui-monospace, monospace" font-size="24" fill="#1a1a1a">
+    <tspan fill="#1a1a1a" font-weight="500">1</tspan><tspan fill="#6b7280"> skill</tspan>
+    <tspan fill="#6b7280" dx="20">+</tspan>
+    <tspan fill="#1a1a1a" font-weight="500" dx="20">15</tspan><tspan fill="#6b7280"> commands</tspan>
+    <tspan fill="#6b7280" dx="20">+</tspan>
+    <tspan fill="#6b7280" dx="20">anti-patterns</tspan>
+  </text>
+
+  <!-- URL -->
+  <text x="80" y="560" font-family="ui-monospace, monospace" font-size="20" fill="#9ca3af">impeccable.style</text>
+</svg>