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

78%

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

82%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.

The body is a well-structured, highly actionable multi-phase process with concrete templates and reference tables. Its main weaknesses are minor over-explanation of aesthetic vibes and the inlining of large reference tables that could be split into separate files.

Suggestions

Move the Tailwind CSS Color Reference and Font Fallback Table into separate files under references/ and link to them, keeping the body as an overview — this improves progressive disclosure and token economy.

Add an explicit output validation step in Phase 5 (e.g. verify the JSON parses and all required color/font fields are populated before saving) to close the feedback loop.

Trim the 'Aesthetic Implication' column and vibe prose in Phase 4; Claude can infer aesthetic meaning from the signals without the gloss.

Dimension	Reasoning	Score
Conciseness	Efficient and mostly assumes Claude's competence; the Tailwind hex table, font fallback table, and verbatim WebFetch prompt are reference material Claude does not reliably know. Minor over-explanation in the 'aesthetic implication' column and vibe prose could be trimmed.	4 / 5
Actionability	Fully executable guidance: a verbatim WebFetch prompt, concrete CSS/meta/URL-parsing patterns, a complete output template (markdown + JSON + CSS + HTML), and a full Tailwind hex reference plus font fallback table — copy-paste ready with a concrete worked example.	5 / 5
Workflow Clarity	Five clearly sequenced phases with checklists (color role table, signal table) and fallback paths for sparse CSS and font detection failure. Not a 5 because there is no explicit validate-output → fix → retry checkpoint on the generated file, only implicit fallback handling.	4 / 5
Progressive Disclosure	Well-organized into clear sections (Quick Start, Inputs, Output, Process, Edge Cases, Example, Tips) with no nested/deep references. Large lookup tables (Tailwind hex, font fallback) are inlined and could live in separate references/ files, but the structure remains navigable.	4 / 5
	Total	17 / 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.

The description is specific, actionable, and highly distinctive with concrete capability details, but it lacks any explicit 'when to use' trigger guidance, which caps completeness. Adding a 'Use when...' clause naming user-facing triggers would raise the score.

Suggestions

Add an explicit 'Use when...' clause naming natural triggers, e.g. 'Use when the user wants to capture a client's brand look-and-feel, generate a brand style preset, or reuse a website's visual identity for slides or content assets.'

Include common synonyms users would say — 'brand guidelines', 'logo colors', 'rebrand', 'style guide' — alongside 'visual branding'.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — extract visual branding (colors, typography, layout patterns), generate a style preset and a brand config JSON, fetch pages via WebFetch, analyze CSS/HTML for palette/font pairings — with comprehensive coverage.	5 / 5
Completeness	The 'what' is clearly and comprehensively stated, but there is no 'Use when...' clause or equivalent explicit trigger guidance, which caps completeness at 3 per the rubric.	3 / 5
Trigger Term Quality	Good natural keyword coverage ('visual branding', 'colors', 'typography', 'website', 'CSS/HTML', 'style preset', 'brand config JSON'), but misses common synonyms users might say ('brand guidelines', 'logo', 'rebrand', 'style guide').	4 / 5
Distinctiveness Conflict Risk	Clear niche — extracting visual brand identity from a live website into two named, format-specific outputs (slide preset + brand config JSON) — with distinct triggers and minimal overlap risk with other 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: 2523432

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.