Agent skill · design visual · kostja94
logo-generator
When the user wants to optimize logo placement, linking, or branding on a website. Also use when the user mentions "logo," "brand logo," "header logo," "logo placement," "AI logo design," "logo link," "logo alt text," "logo sizing," "favicon logo," or "logo usage." For full brand visuals, use brand-visual-generator.
Why this skill is useful
Provides specific guidelines for logo placement, linking, and branding that enhance user navigation and brand recall, which the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-06-09. 860 stars on the source repository.
What this skill does
Components: Logo Guides logo placement and implementation for brand recall and navigation. Logo placement affects user orientation and conversion. When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output. Initial Assessment Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for brand guidelines and visual identity. Brand guidelines source: Logo usage rules (clear space, minimum sizes, variants) come from branding (strategy), brand-visual-generator (visual specs), or media kit. Ensure alignment before implementation. Identify: 1. Context: Header, footer, standalone 2. Platform: Web, mobile, both 3. Brand guidelines: Size, clear space, variants (from brand-visual-generator or media kit) Placement Best Practices Optimal: Top-Left Brand recall: Users are 89% more likely to remember logos in top-left vs. right Left-aligned: ~39% brand recall vs. 21% for right-aligned Navigation anchor: Users expect logo to link to homepage; left placement is intuitive Scan pattern: Aligns with left-to-right reading flow Avoid Centered logos: Users navigating home from centered logos are ~6x more likely to fail Right-aligned: Violates conventions; harms brand recognition When Center May Work Minimal headers with few elements Brand-heavy landing pages where logo is focal point Ensure logo still links to homepage and is clearly clickable Implementation Linking Always link to homepage from logo Use <a href="/"> wrapping logo image Expected behavior; don't break convention Image Use appropriate format (SVG preferred for scalability) Provide alt text: company/product name, not "logo" Example: alt="Acme Inc." not alt="Logo" Size & Clear Space Minimum size: Document in brand guide; prevent illegibility at small sizes (favicon, mobile header). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills kostja94/logo