🇺🇸English

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-3: SVG Generation (Interactive Style Selection)
  ↓ Main agent: interactive 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/ + 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.

Logo Designer

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

Repo Sync Before Edits (mandatory)

Before creating/updating/deleting files in an existing repository, sync the current branch with remote:

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:

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

Phase 2: Logo Design

Generate logo based on project type and context.

Style Selection (auto-select based on project type)

Design Principles

Visual:

• Minimalist, clean, strong geometry
• Abstract symbol or monogram related to core purpose
• Works at all sizes (16px favicon to hero banner)
• Flat or semi-flat design — no fill gradients. Use cards, lines, borders, and box shadows for visual depth.

Colors:

• Use detected brand colors if available, OR user-provided palette
• If neither exists, apply the Default Style Guide below
• High contrast, WCAG AA compliant (4.5:1 minimum)
• Always provide light, dark, and transparent versions

Default Style Guide (used when user provides no style preference):

• Palette : Dark base with neon green accent — Background (#0A0A0A), Surface (#111111), Border (#262626), Muted text (#A1A1A1), Text (#FAFAFA), and Neon Green (#00FF41)
• Aesthetic : Elegant, clear, clean, and professional
• Neon Green constraint : Reserved for highlights only (text, borders, lines, CTAs) — never as a background fill
• System status colors : Danger (#EF4444), Warning (#F59E0B), Info (#3B82F6) may only be applied to text elements, never to backgrounds or primary UI components

Typography:

• Modern sans-serif (Inter, system-ui, sans-serif as default; or match detected fonts)
• Medium to Bold weight
• Confident and readable at small sizes

Phase 3: Deliverables

Generate these SVG files:

/assets/logo/
├── logo-full.svg      # Mark + wordmark (horizontal)
├── logo-mark.svg      # Symbol/icon only
├── logo-wordmark.svg  # Text only
├── logo-icon.svg      # App icon (square, padded)
├── favicon.svg        # 16x16 optimized
├── logo-white.svg     # White version for dark backgrounds
└── logo-black.svg     # Black version for light backgrounds

SVG Requirements:

• Vector-style, crisp edges
• No embedded rasters
• Optimized paths
• viewBox properly set

Phase 4: Documentation

After generating logos, provide:

1. Design Rationale

   • Why these colors were chosen
   • Symbol meaning and connection to product
   • Typography choice reasoning

2. Color Specification

   Primary: #HEXCODE Surface: #HEXCODE (cards, elevated elements) Border: #HEXCODE Muted: #HEXCODE (secondary text) Text: #HEXCODE Accent/Highlight: #HEXCODE (for borders, lines, highlight text, CTAs) Background Light: #FAFAFA Background Dark: #0A0A0A

3. Tailwind Config Addition

   colors: { brand: { primary: '#HEXCODE', surface: '#HEXCODE', border: '#HEXCODE', muted: '#HEXCODE', accent: '#HEXCODE', } }

4. Next Steps

   • Create or update brand_kit.md
   • Add logo to README
   • Update favicon in HTML/framework config

Example Output

For a CLI tool called "fastbuild":

## Analysis Summary
Product: fastbuild
Type: Developer/CLI Tool
Purpose: Fast incremental build system for large codebases
Audience: Software developers, DevOps engineers
Existing colors: None detected
Assets found: None

## Design Rationale
- **Symbol**: Abstract "F" formed by stacked horizontal bars suggesting speed and layered builds
- **Colors**: Default style guide — dark base with Neon Green highlight on the speed bars
- **Typography**: Inter for clean, modern readability

## Colors
Primary: #0A0A0A
Surface: #111111
Border: #262626
Muted: #A1A1A1
Text: #FAFAFA
Accent: #00FF41 (highlights only — borders, lines, CTAs)
Background Light: #FAFAFA
Background Dark: #0A0A0A

Notes

• Always show logo previews on both light (#FAFAFA) and dark (#0A0A0A) backgrounds
• For wordmarks, ensure the product name is spelled exactly as found in project files
• If no project context is found, ask the user for: product name, type, and purpose
• Prefer simplicity - a logo should be recognizable at 16x16 pixels

Weekly Installs

72

Repository

luongnv89/skills

GitHub Stars

9

First Seen

Feb 4, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

opencode68

codex67

gemini-cli65

github-copilot61

kimi-cli58

amp58