09-brand-and-content-system

Name: 09-brand-and-content-system
Author: heymegabyte

18stars4forks

How to install 09-brand-and-content-system?

heymegabyte/claude-skills/09-brand-and-content-system

$npx -y skills add heymegabyte/claude-skills --skill 09-brand-and-content-system

Installs into the current project.

Summary

Extract real brands (Wayback for rebuilds). Copy system, headline/CTA rules, trust surfaces, legal pages, SEO+structured data, anti-AI-slop, microcopy, DESIGN.md, W3C DTCG tokens, pSEO 5 types, GEO/AI search.

Files · 1

View on GitHub

SKILL.md

1	# 09 — Brand and Content System
2
3	Extract real brand assets and apply the full copy system (anti-slop, SEO, trust surfaces, GEO) to every website build surface.
4
5	> Model migration note (pass-77, 2026-06-09): `DALL-E` → GPT Image 1.5 + `GPT-4o` → GPT Image 2 vision. Per `platform.openai.com/docs/deprecations`. Brand extraction protocol unchanged.
6
7	## Brian's Brand Voice
8
9	- Slogans: "Open-Source Wizardry. 100% Wizardry. 0% Robes." / "Often imitated, never duplicated."
10	- Newsletter: "Lab Insights Journal" \| Handle: @HeyMegabyte \| Email: hey@megabyte.space / brian@megabyte.space
11	- Tone: professional but irreverent, "Hey" not "Hi", first-person Megabyte Labs
12	- Always "cross-platform" + "open-source" \| Install Doctor: "single command" / "one-liner"
13	- Hero: "[Topic] Innovation" \| Footer CTA: "Let's Talk" \| Rates: $140/hr ($70 nonprofit), $100/mo WordPress
14	- Social: all platforms, "Megabyte Minis" YouTube, Dev.to, Patreon
15	- Psychology: reciprocity (teach), social proof near CTAs, authority (depth/numbers), unity ("we/us"), Peak-End Rule
16
17	## Brand Extraction (Rebuilds)
18
19	1. Screenshot existing (Wayback if down). Extract logo/colors/fonts/tone. Never discard equity.
20
21	2. Color extraction (NON-NEGOTIABLE) — Screenshot with Playwright, GPT Image 2 vision extracts hex (logo priority), cross-ref logo, build palette, validate WCAG AA. NEVER invent, NEVER use Emdash defaults for clients, NEVER infer from category.
22
23	3. Second-pass verification (BUILD-BREAKING — pre-deploy) — After GPT Image 2 vision returns `{primary, secondary, accent}`:
24	- Load logo PNG via sharp, sample dominant chroma via k-means k=5 ignoring transparent + near-white/near-black (top-3 cluster centroids in HSL)
25	- For EACH color, compute min HSL hue-distance to top-3 logo chromas — if `min_hue_distance > 30°` AND saturation>0.2, FAIL w/ diagnostic
26	- Re-run GPT Image 2 vision w/ corrective prompt naming top-3 logo chromas + demanding `primary` derived from one
27	- Validator: `validate-color-from-logo.mjs` in `build_validators.ts` between brand-research and template-pick
28	- NEVER ship primary color failing hue-distance check
29
30	4. Logo-luminance + source-theme drives theme (NON-NEGOTIABLE) — Two-signal:
31	- Signal A: logo dominant-color luminance (WCAG formula)
32	- Signal B: source-site dominant background luminance (Playwright screenshot of `body` background)
33	- BOTH agree → match; disagree → source-site wins UNLESS source design score <7/10 (then logo wins)
34	- High-quality source (≥7/10 via GPT Image 2 vision `detail:low`) → match source theme verbatim
35	- Set theme BEFORE template selection. Reject palette where logo-on-bg contrast <4.5:1 (WCAG AA).
36	- "Dark-first" applies to accent-rich Emdash/SaaS brands, NOT to logo-driven non-profit/serif clients or high-quality light-themed source brands
37
38	5. Logo-vs-container contrast (BUILD-BREAKING — every render) — Every logo render (header, footer, hero, modal, splash, mobile menu, sidebar) MUST contrast container bg by ≥4.5:1 on logo's dominant chroma (not transparent pixels)
39	- Forbidden: white-text-logo on white/cream \| dark-text-logo on dark/navy \| low-saturation-logo on same-hue bg
40	- Resolution: header AND footer themes chosen AFTER logo luminance scan. Dual-theme site needing SAME logo → ship TWO files (`brand-mark-light.svg` for dark bg, `brand-mark-dark.svg` for light bg) + CSS `<picture><source media>` swaps
41	- Automate via skill 12 logo-variant-generator (Real-ESRGAN inversion or `magick -channel RGB -negate`; color logos w/ text → GPT Image 1.5 w/ "same logo on transparent bg w/ text inverted to <opposite-luminance>")
42	- Validator: `validate-logo-contrast.mjs` — Claude Sonnet 4.6 vision samples logo bbox + container computed bg at 6bp + pixel sampling, fails if <4.5:1
43
44	6. Brand-element extraction (logo is gold mine — extract DNA) — GPT Image 2 vision returns `{font_family_guess, suggested_heading_font, suggested_body_font, font_weight, letterspacing, has_icon_mark, icon_mark_description, icon_mark_dominant_color, decorative_motif_description, motif_extractable (bool)}`
45	- Matched Google Font → `--font-heading` site-wide
46	- `motif_extractable=true` →

People who liked this also viewed

6 picks

Type

09-brand-and-content-system

18stars4forks

View on GitHub

How to install 09-brand-and-content-system?

heymegabyte/claude-skills/09-brand-and-content-system

$npx -y skills add heymegabyte/claude-skills --skill 09-brand-and-content-system

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# 09 — Brand and Content System
2
3	Extract real brand assets and apply the full copy system (anti-slop, SEO, trust surfaces, GEO) to every website build surface.
4
5	> Model migration note (pass-77, 2026-06-09): `DALL-E` → GPT Image 1.5 + `GPT-4o` → GPT Image 2 vision. Per `platform.openai.com/docs/deprecations`. Brand extraction protocol unchanged.
6
7	## Brian's Brand Voice
8
9	- Slogans: "Open-Source Wizardry. 100% Wizardry. 0% Robes." / "Often imitated, never duplicated."
10	- Newsletter: "Lab Insights Journal" \| Handle: @HeyMegabyte \| Email: hey@megabyte.space / brian@megabyte.space
11	- Tone: professional but irreverent, "Hey" not "Hi", first-person Megabyte Labs
12	- Always "cross-platform" + "open-source" \| Install Doctor: "single command" / "one-liner"
13	- Hero: "[Topic] Innovation" \| Footer CTA: "Let's Talk" \| Rates: $140/hr ($70 nonprofit), $100/mo WordPress
14	- Social: all platforms, "Megabyte Minis" YouTube, Dev.to, Patreon
15	- Psychology: reciprocity (teach), social proof near CTAs, authority (depth/numbers), unity ("we/us"), Peak-End Rule
16
17	## Brand Extraction (Rebuilds)
18
19	1. Screenshot existing (Wayback if down). Extract logo/colors/fonts/tone. Never discard equity.
20
21	2. Color extraction (NON-NEGOTIABLE) — Screenshot with Playwright, GPT Image 2 vision extracts hex (logo priority), cross-ref logo, build palette, validate WCAG AA. NEVER invent, NEVER use Emdash defaults for clients, NEVER infer from category.
22
23	3. Second-pass verification (BUILD-BREAKING — pre-deploy) — After GPT Image 2 vision returns `{primary, secondary, accent}`:
24	- Load logo PNG via sharp, sample dominant chroma via k-means k=5 ignoring transparent + near-white/near-black (top-3 cluster centroids in HSL)
25	- For EACH color, compute min HSL hue-distance to top-3 logo chromas — if `min_hue_distance > 30°` AND saturation>0.2, FAIL w/ diagnostic
26	- Re-run GPT Image 2 vision w/ corrective prompt naming top-3 logo chromas + demanding `primary` derived from one
27	- Validator: `validate-color-from-logo.mjs` in `build_validators.ts` between brand-research and template-pick
28	- NEVER ship primary color failing hue-distance check
29
30	4. Logo-luminance + source-theme drives theme (NON-NEGOTIABLE) — Two-signal:
31	- Signal A: logo dominant-color luminance (WCAG formula)
32	- Signal B: source-site dominant background luminance (Playwright screenshot of `body` background)
33	- BOTH agree → match; disagree → source-site wins UNLESS source design score <7/10 (then logo wins)
34	- High-quality source (≥7/10 via GPT Image 2 vision `detail:low`) → match source theme verbatim
35	- Set theme BEFORE template selection. Reject palette where logo-on-bg contrast <4.5:1 (WCAG AA).
36	- "Dark-first" applies to accent-rich Emdash/SaaS brands, NOT to logo-driven non-profit/serif clients or high-quality light-themed source brands
37
38	5. Logo-vs-container contrast (BUILD-BREAKING — every render) — Every logo render (header, footer, hero, modal, splash, mobile menu, sidebar) MUST contrast container bg by ≥4.5:1 on logo's dominant chroma (not transparent pixels)
39	- Forbidden: white-text-logo on white/cream \| dark-text-logo on dark/navy \| low-saturation-logo on same-hue bg
40	- Resolution: header AND footer themes chosen AFTER logo luminance scan. Dual-theme site needing SAME logo → ship TWO files (`brand-mark-light.svg` for dark bg, `brand-mark-dark.svg` for light bg) + CSS `<picture><source media>` swaps
41	- Automate via skill 12 logo-variant-generator (Real-ESRGAN inversion or `magick -channel RGB -negate`; color logos w/ text → GPT Image 1.5 w/ "same logo on transparent bg w/ text inverted to <opposite-luminance>")
42	- Validator: `validate-logo-contrast.mjs` — Claude Sonnet 4.6 vision samples logo bbox + container computed bg at 6bp + pixel sampling, fails if <4.5:1
43
44	6. Brand-element extraction (logo is gold mine — extract DNA) — GPT Image 2 vision returns `{font_family_guess, suggested_heading_font, suggested_body_font, font_weight, letterspacing, has_icon_mark, icon_mark_description, icon_mark_dominant_color, decorative_motif_description, motif_extractable (bool)}`
45	- Matched Google Font → `--font-heading` site-wide
46	- `motif_extractable=true` →

People who liked this also viewed

6 picks

Type