visual-brand-extractor

Extract visual branding (colors, typography, layout patterns) from a client's website and generate a style preset compatible with the HTML slides skill and a brand config JSON for the content asset creator. Uses WebFetch to read pages and analyzes CSS/HTML to identify the color palette, font pairings, and aesthetic patterns.

Quality

80%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/brand/capabilities/visual-brand-extractor/SKILL.md

Quality

Content

78%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A highly actionable, well-sequenced agent workflow with concrete prompts, classification tables, templates, and thoughtful edge-case handling. The main structural weakness is that it is a ~400-line monolith: large lookup tables are inlined rather than split into one-level-deep reference files, and the Tailwind table duplicates knowledge Claude already has.

Suggestions

Move the Tailwind CSS Color Reference and Font Fallback Table into references/ files (e.g. references/tailwind-colors.md, references/font-fallbacks.md) with clearly signaled links from the relevant phases.

Trim or compress the Tailwind hex table to only the classes most relevant to brand extraction (accent/CTA colors, dark-theme slates), since Claude already knows the standard Tailwind palette.

Add an explicit output-validation step in Phase 5, e.g. 'Before saving, verify every hex value appears in the fetched CSS and every font is available on Google Fonts or Fontshare (or mapped via the fallback table).'

Dimension	Reasoning	Score
Conciseness	The body is dense with novel, domain-specific heuristics (priority-ordered extraction sources, role classification tables, edge cases) that earn their tokens, but the ~60-line Tailwind hex table largely restates standard Tailwind defaults and a few lines explain obvious concepts ('Dark theme: Dark background... with light text'), so minor trimming is possible.	4 / 5
Actionability	Fully executable for an agent-executed skill: a verbatim WebFetch prompt, exact color-role and typography classification tables, a complete output template with placeholders, a worked example, and concrete edge-case remedies — Claude knows exactly what to do at every step.	5 / 5
Workflow Clarity	Five clearly sequenced phases with strong error-recovery loops (JS-rendered sites → fall back to utility classes → ask the user; font detection failure → fallback ladder), but there is no explicit final validation step confirming the generated preset actually matches the referenced STYLE_PRESETS.md / content-asset-creator formats.	4 / 5
Progressive Disclosure	No bundle files exist, and ~130 lines of pure lookup material (the Tailwind CSS Color Reference and Font Fallback Table) are inlined in SKILL.md when they clearly belong in separate references/ files; section headers are clear, but content that should be separate is inline.	3 / 5
	Total	16 / 20 Passed

Description

75%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A specific, third-person description with concrete actions and a well-defined niche. Its main weakness is the missing 'when to use' guidance: no explicit trigger clause or natural-language usage scenarios, which limits discoverability when a user asks for branding work in different words.

Suggestions

Add an explicit trigger clause, e.g. 'Use when the user mentions a client's brand, brand colors, visual identity, or wants slides/content assets styled to match a client's website.'

Include common synonyms users would say — 'brand guidelines', 'style guide', 'design system', 'branding' — to broaden natural trigger coverage.

Optionally name the deliverable location (e.g. 'saved to clients/<client-name>/brand/') so the output contract is discoverable from the description alone.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'Extract visual branding (colors, typography, layout patterns)', 'generate a style preset', 'brand config JSON', 'Uses WebFetch to read pages and analyzes CSS/HTML to identify the color palette, font pairings, and aesthetic patterns' — with comprehensive coverage of what the skill does.	5 / 5
Completeness	The 'what' is explicit and detailed, but there is no 'Use when...' clause or equivalent trigger guidance — usage timing is only weakly implied by 'from a client's website' — which caps completeness at 3 per the judging guidelines.	3 / 5
Trigger Term Quality	Good natural keywords ('visual branding', 'colors', 'typography', 'brand', 'website', 'style preset') that users would plausibly say, but common variations like 'brand guidelines', 'style guide', or 'design system' are missing, so it falls just short of the comprehensive-synonyms anchor.	4 / 5
Distinctiveness Conflict Risk	Clear niche — extracting a client's visual identity from their website to produce slide presets and brand config JSON — with distinct triggers ('visual branding', 'style preset') that are unlikely to fire for unrelated skills.	5 / 5
	Total	17 / 20 Passed

Validation

93%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: gooseworks-ai/goose-skills
Path: skills/brand/capabilities/visual-brand-extractor/SKILL.md
Commit: cc3e518

Reviewed: 7 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.