brand-kit-playground

Name: brand-kit-playground
Author: MoizIbnYousaf

27stars5forks

How to install brand-kit-playground?

moizibnyousaf/marketing-cli/brand-kit-playground

$npx -y skills add MoizIbnYousaf/marketing-cli --skill brand-kit-playground

Installs into the current project.

Summary

Generate an interactive HTML brand playground that shows your brand rendered live — palette, typography, logo, voice — with a social card and OG image preview that updates as you tweak tokens. Opens in browser. The visual approval step for the /cmo flow: /visual-style writes the

Files · 1

View on GitHub

SKILL.md

1	# /brand-kit-playground — Visual Brand Workbench
2
3	Your brand lives in markdown files. This skill renders it as a living, interactive HTML page the user opens in their browser — palette swatches, type specimens, logo lockups, and a real social card preview that updates as they tweak tokens. When they're happy, they copy the structured JSON and you write it back to `brand/creative-kit.md`.
4
5	This is the visual approval step in the /cmo flow. `/visual-style` writes the brand identity. This skill shows it.
6
7	---
8
9	## On Activation
10
11	1. Read `brand/creative-kit.md` — extract the Colors, Typography, and Visual Brand Style sections.
12	- If the file is template/empty: warn the user. "Your creative kit is empty — the playground will use placeholder values. Run `/visual-style` first for a real preview, or continue and I'll use defaults you can tweak."
13	- If it has real content: proceed. Parse colors (hex values), fonts (family names), border radius, shadows, gradients.
14	2. Read `brand/voice-profile.md` — extract tone adjectives, vocabulary preferences, headline style.
15	3. Read `brand/positioning.md` — extract the primary positioning angle for the social card headline.
16	4. Read `brand/audience.md` if it exists — extract audience description for the voice snapshot panel.
17	5. If no brand files exist at all: proceed with sensible defaults. The playground works at L0. Show placeholder brand with a note: "These are defaults. Fill in your brand files and re-run for a real preview."
18
19	---
20
21	## What You Build
22
23	A single self-contained HTML file with inline CSS and JS. Zero external dependencies except Google Fonts (loaded via `<link>`). No framework. No build step. No server.
24
25	The file is written to the project root as `brand-playground.html` and opened in the user's default browser via `open brand-playground.html`.
26
27	### Layout
28
29	```
30	+-- BRAND BAR ------------------------------------------------+
31	\| [Logo] Project Name Brand Playground [Light/Dark toggle] \|
32	+--------------------------------------------------------------+
33	\| \| \|
34	\| CONTROLS \| TAB: [Brand System] [Social Card] [OG] \|
35	\| -------- \| ----------------------------------------\|
36	\| \| \|
37	\| > Colors \| (Brand System tab) \|
38	\| Primary [pick] \| COLOR PALETTE \|
39	\| Secondary \| ## ## ## ## ## (live swatches) \|
40	\| Accent \| \|
41	\| \| TYPOGRAPHY \|
42	\| > Typography \| Display: Aa Space Grotesk \|
43	\| Display font \| Body: Aa Inter Regular \|
44	\| Body font \| Mono: Aa JetBrains Mono \|
45	\| Scale ratio \| \|
46	\| \| VOICE SNAPSHOT \|
47	\| > Visual Style \| Tone: confident, warm, technical \|
48	\| Border radius \| Audience: indie developers \|
49	\| Shadow depth \| Style: short-punchy headlines \|
50	\| Texture \| \|
51	\| \| (Social Card tab) \|
52	\| > Social Card \| +---------------------------+ \|
53	\| Headline \| \| \| \|
54	\| Subhead \| \| We just shipped \| \|
55	\| Badge text \| \| dark mode \| \|
56	\| Layout [v] \| \| \| \|
57	\| Background [v] \| \| [logo] [NEW] \| \|
58	\| \| \| \| \|
59	\| > Presets \| +---------------

People who liked this also viewed

6 picks

Type

brand-kit-playground

27stars5forks

View on GitHub

How to install brand-kit-playground?

moizibnyousaf/marketing-cli/brand-kit-playground

$npx -y skills add MoizIbnYousaf/marketing-cli --skill brand-kit-playground

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# /brand-kit-playground — Visual Brand Workbench
2
3	Your brand lives in markdown files. This skill renders it as a living, interactive HTML page the user opens in their browser — palette swatches, type specimens, logo lockups, and a real social card preview that updates as they tweak tokens. When they're happy, they copy the structured JSON and you write it back to `brand/creative-kit.md`.
4
5	This is the visual approval step in the /cmo flow. `/visual-style` writes the brand identity. This skill shows it.
6
7	---
8
9	## On Activation
10
11	1. Read `brand/creative-kit.md` — extract the Colors, Typography, and Visual Brand Style sections.
12	- If the file is template/empty: warn the user. "Your creative kit is empty — the playground will use placeholder values. Run `/visual-style` first for a real preview, or continue and I'll use defaults you can tweak."
13	- If it has real content: proceed. Parse colors (hex values), fonts (family names), border radius, shadows, gradients.
14	2. Read `brand/voice-profile.md` — extract tone adjectives, vocabulary preferences, headline style.
15	3. Read `brand/positioning.md` — extract the primary positioning angle for the social card headline.
16	4. Read `brand/audience.md` if it exists — extract audience description for the voice snapshot panel.
17	5. If no brand files exist at all: proceed with sensible defaults. The playground works at L0. Show placeholder brand with a note: "These are defaults. Fill in your brand files and re-run for a real preview."
18
19	---
20
21	## What You Build
22
23	A single self-contained HTML file with inline CSS and JS. Zero external dependencies except Google Fonts (loaded via `<link>`). No framework. No build step. No server.
24
25	The file is written to the project root as `brand-playground.html` and opened in the user's default browser via `open brand-playground.html`.
26
27	### Layout
28
29	```
30	+-- BRAND BAR ------------------------------------------------+
31	\| [Logo] Project Name Brand Playground [Light/Dark toggle] \|
32	+--------------------------------------------------------------+
33	\| \| \|
34	\| CONTROLS \| TAB: [Brand System] [Social Card] [OG] \|
35	\| -------- \| ----------------------------------------\|
36	\| \| \|
37	\| > Colors \| (Brand System tab) \|
38	\| Primary [pick] \| COLOR PALETTE \|
39	\| Secondary \| ## ## ## ## ## (live swatches) \|
40	\| Accent \| \|
41	\| \| TYPOGRAPHY \|
42	\| > Typography \| Display: Aa Space Grotesk \|
43	\| Display font \| Body: Aa Inter Regular \|
44	\| Body font \| Mono: Aa JetBrains Mono \|
45	\| Scale ratio \| \|
46	\| \| VOICE SNAPSHOT \|
47	\| > Visual Style \| Tone: confident, warm, technical \|
48	\| Border radius \| Audience: indie developers \|
49	\| Shadow depth \| Style: short-punchy headlines \|
50	\| Texture \| \|
51	\| \| (Social Card tab) \|
52	\| > Social Card \| +---------------------------+ \|
53	\| Headline \| \| \| \|
54	\| Subhead \| \| We just shipped \| \|
55	\| Badge text \| \| dark mode \| \|
56	\| Layout [v] \| \| \| \|
57	\| Background [v] \| \| [logo] [NEW] \| \|
58	\| \| \| \| \|
59	\| > Presets \| +---------------

People who liked this also viewed

6 picks

Type