Brand.dev Skill

Fetch brand data from the brand.dev API and save logos locally for serving.

Step 1: Get the Domain

Extract the target domain from the user's input. Strip protocol and trailing slashes (e.g., "https://example.com/" -> "example.com").

Step 2: Fetch Brand Info

# BRANDDEV_API_KEY must be set in your environment
curl -s "https://api.brand.dev/v1/brand/retrieve?domain=${DOMAIN}" \
  -H "Authorization: Bearer ${BRANDDEV_API_KEY}" \
  -H "Content-Type: application/json"

Extract from the response:

• Brand name (.brand.title or .brand.name)
• Description (.brand.description)
• Logo URLs (from .brand.logos[]), prefer icon/square logos for card layouts, full logos for headers
• Industry/category if available

Step 3: Download Logos Locally

ALWAYS download logos locally for serving. Never reference external media.brand.dev URLs in production code, they can change or go down.

Where to save

The save location depends on the project. Look for existing patterns:

• Next.js / static sites: public/logos/<context>/ (served as /logos/<context>/)
• Other web projects: check for existing static/, assets/, images/, or public/ directories
• If no convention exists: create a logos/ directory under the project's static asset root

Naming Convention

• <brand-slug>.<ext> where:
  • <brand-slug> is the lowercase brand name, spaces replaced by hyphens (e.g., miss-a not miss_a)
  • <ext> matches the original file extension (png, webp, jpg, svg)
• Optionally group by context subdirectory (e.g., partners/, customers/) if the project has multiple logo collections

Download Command

mkdir -p <logo-dir>
curl -sL "<logo-url>" -o "<logo-dir>/<brand-slug>.<ext>"

Verify Download

ls -la <logo-dir>/<brand-slug>.<ext>

Step 4: Return Results