SiteAssets SiteAssets
Resources Skills

Brand Asset Skill.

Reusable recipes for AI coding tools. Drop this one into Claude Code, Cursor or Windsurf and the agent will inspect, fix and generate brand assets on every project change.

§01

What a skill does

A skill is a structured markdown file that tells an AI coding agent when to act and how. The Brand Asset Skill drives the agent through a deterministic loop:

  1. 01 Inspect existing metadata.
  2. 02 Inspect the favicon and icon set.
  3. 03 Inspect OG tags.
  4. 04 Inspect the manifest.
  5. 05 Detect brand color.
  6. 06 Detect logo.
  7. 07 Identify missing assets.
  8. 08 Call appropriate MCP tools.
  9. 09 Apply changes.
  10. 10 Validate again.
§02

Brand Asset Skill

Download

Drop the file into .claude/skills/brand-asset.md (or the equivalent path for your editor).

yaml
name: brand-asset
description: Inspect, fix and generate brand assets for any web project.
triggers:
  - new project created
  - metadata file changed
  - favicon or icon files changed
  - user asks "check my Open Graph"
  - user asks "generate a favicon"
tools:
  - check_open_graph
  - suggest_open_graph_fix
  - generate_og_image
  - check_favicon
  - generate_favicon

Full manifest — /skills/brand-asset.md

§03

Pair with the MCP server

For the agent to call check_open_graph or check_favicon, wire the MCP server first:

json
{
  "mcpServers": {
    "siteassets": {
      "command": "npx",
      "args": ["-y", "@siteassets/mcp"],
      "env": { "SITEASSETS_API_KEY": "sk_live_xxxxxxxx" }
    }
  }
}

Full setup — /resources/mcp