| name | extract-brand-from-site |
| description | Visit a user-supplied website URL and infer brand identity from it — colour palette, typography, logo, business name, address, contact details — then write a brand profile the plugin's other skills consume. Use when the user says something like "use the brand from our site", "extract our palette from the website", or supplies a URL and asks to set up branding. |
extract-brand-from-site
Auto-derive a brand profile by inspecting a live website. Faster than define-brand-profile when the user already has a polished web presence.
When to use
Auto-trigger when the user:
- Provides a URL and asks to derive branding from it.
- Says "use our website's brand" / "match the site's palette" / "pull our logo from the site".
Inputs
- Website URL — typically the homepage or an "about" page.
- Confirmation toggle — should the skill ask before saving inferred values, or save them directly? Default: ask.
Approach
1. Fetch the page
Prefer the WebFetch tool for the initial pass (HTML + computed styles inferred from CSS). For richer extraction (rendered colours, real logo URLs after JS), use a Playwright tool if available — render, then read.
2. Extract visual identity
- Palette: parse stylesheets and inline styles. Rank colours by usage frequency, exclude near-greys. Top 1-3 distinctive colours = primary/secondary/accent.
- Fonts: read
font-family declarations on body, h1-h6. Map to commonly-available fallbacks (e.g. site uses "Inter" → record "Inter", suggest installing it).
- Logo: look for
<img> in the header, favicon, OpenGraph image, or link rel="apple-touch-icon". Prefer SVG when available. Download and stage locally.
3. Extract business identity
- Business name:
<title>, OpenGraph site_name, schema.org Organization JSON-LD if present.
- Address & contact: schema.org
PostalAddress / ContactPoint if present. Otherwise scan the footer / contact page for an address block, email, phone.
- Tax / company numbers: scan footer for "VAT", "Company No.", "Reg.", common patterns by jurisdiction.
4. Confirm with the user
Show the user every field before writing. They edit / approve / reject each. Don't silently ship inferred branding — colour inference and logo selection are easy to get wrong.
5. Hand off to define-brand-profile
Once confirmed, write the values into $DATA_ROOT/brand.json using the same schema as define-brand-profile. If a profile already exists, merge.
Resolve the data root:
DATA_ROOT="${CLAUDE_USER_DATA:-${XDG_DATA_HOME:-$HOME/.local/share}/claude-plugins}/programmatic-doc-generation"
Caveats
- Colour extraction heuristics aren't perfect — always confirm.
- Some sites lazy-load CSS or render entirely in JS; if WebFetch returns sparse data, escalate to Playwright.
- Don't follow links recursively. One page at a time. The user can run the skill again on a different page.
