Logo Design Skill

logo-design skill

A Claude Code / Cursor [Agent Skill](https://agentskills.io/specification) for designing logos in Kyle Johnson's house style.

When invoked, the skill:

1. Presents an HTML gallery of 5+ SVG logo concepts — each semantically tied to the product name, simple, theme-friendly.
2. Waits for the user to pick one.
3. Ships the chosen mark as a clean standalone SVG (and optionally a matching AppLogo.vue component).

The house style

Every reference logo in `assets/sources/` follows the same rules:

• Semantic, not decorative — the shape means the word (Margin = page with margin line, Daylight = crescent bite, Takeout = paper-bag fold, Sift = narrowing bars, Aria = voice lines).
• Primitive SVG only — rects, lines, simple paths, masks.
• Theme-friendly — currentColor or Tailwind semantic classes.
• Monochrome-first — one color, or a primary + a tint.
• Works at 16px and 400px.
• Square-ish mark, wordmark optional.

Full breakdown in [`references/design-principles.md`](references/design-principles.md). SVG techniques in [`references/svg-patterns.md`](references/svg-patterns.md).

Install

git clone https://github.com/GKjohns/logo-design-skill.git ~/Programming/Workspace/logo-design-skill

# Make the skill visible to both Claude Code and Cursor via symlinks
ln -s ~/Programming/Workspace/logo-design-skill ~/.claude/skills/logo-design
ln -s ~/Programming/Workspace/logo-design-skill ~/.cursor/skills/logo-design

Usage

"Design a logo for a tool called Ledger that tracks accounting for solo lawyers."

Claude generates `logo-options-ledger.html` with 5+ concepts. You pick a number. Claude ships the final SVG.

Structure

logo-design-skill/
├── SKILL.md                          # Main skill instructions
├── references/
│   ├── design-principles.md          # The house style, explained
│   └── svg-patterns.md               # Copy-paste SVG building blocks
└── assets/
    ├── sources/