---
name: brand-asset
description: Inspect, fix and generate brand assets for any web project. Use this skill when a project is created or when metadata, favicon or OG image files change.
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
---
# Brand Asset Skill
A deterministic, code-first workflow for keeping website brand assets in shape.
The skill drives the agent in a strict loop so the user always sees progress.
## When to use this skill
Activate this skill whenever the user:
- Spins up a new website or web app.
- Edits `` content (``, ``).
- Edits favicon / icon files (`favicon.ico`, `favicon.svg`, `apple-touch-icon.png`, `manifest.webmanifest`).
- Says "check my site", "audit OG", "preview on social", "generate a favicon", etc.
Do **not** activate this skill for purely internal code changes or for content
edits unrelated to brand surfaces.
## Workflow
Run the loop in this exact order. Do not skip steps.
### 1. Inspect existing metadata
- Run `check_open_graph({ url: "" })` (or local equivalent).
- Run `check_favicon({ url: "" })` when the brand-asset skill is fully wired.
- Capture the score, the list of failing checks and the recommended fixes.
### 2. Inspect the favicon and icon set
- Look for `favicon.ico`, `favicon.svg`, `apple-touch-icon.png`, `manifest.webmanifest`.
- Verify the HTML references each file via ``.
- Verify the manifest declares the required sizes (192, 512, maskable).
### 3. Detect the brand color and logo
- Read ``.
- Fall back to `` to read colors out of the rendered asset.
- Look in the repo for `logo.svg` / `logo.png` and confirm an `` or inline SVG references it.
- If nothing is found, prompt the user for the brand color and logo URL.
### 4. Identify missing assets
For each Open Graph and Twitter Card field, decide:
- Present and correct → no action.
- Present but wrong → fix value (length, HTTPS, dimensions).
- Missing → generate with the appropriate SiteAssets tool.
### 5. Generate missing assets
Use the SiteAssets MCP tools:
- `generate_og_image({ title, description, siteName, logoUrl, brandColor, template, format })`
- `generate_favicon({ source: "text" | "image", text, imageUrl, brandColor })` (when available).
Always store the output in the repo under `public/og.png`, `public/favicon.svg`, etc.
### 6. Apply the changes
Write the new tags and assets into the project:
- ``, ``
- ``
- ``
- ``
Prefer to inject them into the framework-specific metadata file (e.g. `app/layout.tsx`,
`src/layouts/BaseLayout.astro`, `next.config.js` `metadata`).
### 7. Validate again
Re-run `check_open_graph` on the deployed URL and confirm the score moved up.
Show the user the score before / after.
## Style guidelines
- Do not generate favicons or OG images for the user without asking first; defaults
are fine but the user owns the brand.
- Always pick `1200 × 630` for OG images.
- Always pick `32 × 32` + `180 × 180` + `192 × 192` + `512 × 512` for favicons.
- Use HTTPS only. Reject `http://` image URLs in fixes.
## Anti-patterns
- Do not paste every meta tag — only paste what the user is missing.
- Do not override the user's brand color without confirmation.
- Do not re-run checks more than twice on the same URL within a minute (cost).
## Output
At the end of the run, summarise:
- Initial score.
- Fixes applied.
- Final score.
- Files added or modified.
- Whether anything still needs the user's attention.