/logo-designer

name: logo-designer
description: "Generate professional SVG logos from project context: 7 brand variants plus a showcase HTML page. Use for product marks, wordmarks, icons, and favicons. Don't use for raster-only logos, illustrations, or full brand guidelines."
license: MIT
effort: medium
metadata:
  version: 1.4.0
  author: "Luong NGUYEN <luongnv89@gmail.com>"

Logo Designer

Design modern, professional logos by analyzing project context and generating SVG-based brand assets.

Environment Check

Before running this skill, verify:

• [ ] You're in a project directory with a README or package.json
• [ ] You have write access to create `/assets/logo/` directory
• [ ] The project directory is a git repository (optional, but recommended)

If any check fails, the skill will stop and ask for clarification.

Subagent Architecture

This skill uses an **Explorer+Executor (A) + Review Loop (C)** architecture:

Phase 1: Brand Research
  ↓ (brand-researcher agent)
  ↓
Phase 2: Interactive Style Selection
  ↓ Main agent: confirm style selection with user
  ↓
Phase 3: Generate All 7 SVGs
  ↓ (svg-generator agent)
  ↓
Phase 4: SVG Validation
  ↓ (svg-reviewer agent)
  ↓
Final Output: 7 SVG files in /assets/logo/ + brand-showcase.html + Design Rationale

**Agents**: 1. `agents/brand-researcher.md` — Reads project files, produces structured brand brief 2. `agents/svg-generator.md` — Generates all 7 SVG files (mark, wordmark, full, icon, favicon, white, black) 3. `agents/svg-reviewer.md` — Validates SVG structure (viewBox, no rasters, all files present, correct names)

**Key Insight**: 7 SVG files generated inline is the single biggest context cost. Brand research across multiple project files adds to the burden. The reviewer acts as a quality gate to catch SVG structure issues before files are committed.

Repo Sync Before Edits (mandatory)

Before creating/updating/deleting files in an existing repository, sync the current branch with remote. If the working tree is not clean, stash first, sync, then restore:

branch="$(git rev-parse --abbrev-ref HEAD)"
dirty=0
if [ -n "$(git status --porcelain)" ]; then
  git stash push -u -m "pre-sync"
  dirty=1
fi
git fetch origin
git pull --rebase origin "$branch"
if [ "$dirty" -eq 1 ]; then
  git stash pop
fi

If `origin` is missing, pull is unavailable, or rebase/stash conflicts occur, stop and ask the user before continuing.

Workflow

Phase 1: Project Analysis

Automatically analyze the current project to understand brand context:

1. **Detect product identity** - Check these files in order:

• `README.md` - Product name, description, tagline
• `package.json` - Name, description, keywords
• `pyproject.toml` - Project name and description
• `Cargo.toml` - Package name and description
• `go.mod` - Module name

2. **Find existing brand assets** - Search for:

• `/docs/brand_kit.md`, `/.docs/brand_kit.md`, `brand_kit.md`
• `/docs/prd.md`, `prd.md` - Product requirements with brand info
• `/assets/logo/`, `/public/logo`, `/static/logo` - Existing logos
• Tailwind config for existing color palette

3. **Identify project type** from codebase structure:

• Developer/CLI/Open Source - `.github/`, CLI entry points, MIT license
• SaaS/Productivity - Web app structure, auth, dashboard patterns
• Startup - Lean structure, MVP patterns
• Enterprise/B2B - Complex architecture, integrations
• Consumer/Mobile - React Native, Flutter, mobile-first patterns

4. **Summarize findings** before proceeding:

   Product: [name]
   Type: [Developer Tool / SaaS / Startup / Enterprise / Consumer]
   Purpose: [1-sentence description]
   Audience: [target users]
   Existing colors: [hex codes if found, or "None detected"]
   Assets found: [list or "None"]

Phase 2: Logo Design

Pick a style based on the detected project type (Developer/SaaS/Startup/Enterprise/Consumer), then design a minimalist, geometric mark that reads at every size from 16px favicon to hero banner. Use detected brand colors when present, else apply the Default Style Guide (dark base + neon-green highlights only — never as a fill). Confirm with the user how the product name should be cased in the wordmark before generating any text-bearing SVG.

See `references/design-principles.md` for the style table, full visual/color/typography rules, and the Default Style Guide palette with system status colors.

Default Quality Bar

All 7 SVGs and `brand-showcase.html` must be professional, production-ready, elegant, and premium, even unasked. The chosen style sets direction; this bar sets the finish (craft and restraint, not ornament): optical balance, consistent strokes, clean minimal paths legible at 16px, refined wordmark kerning, and a polished showcase with no placeholders. Pass this bar to `svg-generator`.

Phase 3: Deliverables

Generate the canonical mark first, then derive 6 sibling variants from its exact path data so every file shares the same geometry. The `svg-generator` agent must receive the literal `d=""` strings — do not paraphrase shapes.

Output structure:

/assets/logo/
├── logo-mark.svg          # Canonical 64×64 mark (source of truth)
├── logo-full.svg          # 320×72 mark + wordmark
├── logo-wordmark.svg      # 180×40 text only
├── logo-icon.svg          # 512×512 app icon (centered, padded)
├── favicon.svg            # 16×16 simplified 2-layer mark
├── logo-white.svg         # 320×72 white (for dark backgrounds)
├── logo-black.svg         # 320×72 black (for light backgrounds)
└── brand-showcase.html    # Self-contained brand identity page

After writing all 7 files, read back mark, full, icon, white, and black variants and verify `d=""` strings are identical (or correctly scaled via `transform`). Fix divergences before continuing.

See `references/svg-deliverables.md` for full variant specifications, scale calculations, favicon simplification rules, and SVG requirements.

Phase 4–5: Documen