logo-designer

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
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.2.3
  author: Luong NGUYEN <[email protected]>
---

# 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:

```bash
branch="$(git rev-parse --abbrev-ref HEAD)"
git fetch origin
git pull --rebase origin "$branch"
```

If the working tree is not clean, stash first, sync, then restore:

```bash
git stash push -u -m "pre-sync"
branch="$(git rev-parse --abbrev-ref HEAD)"
git fetch origin && git pull --rebase origin "$branch"
git stash pop
```

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