skills.rest
MoizIbnYousaf
MoizIbnYousafCOMMUNITY
Explore all skills by this author →
Website𝕏@MoizIbnYousafGitHub

brand-kit-playground

Generates an interactive HTML playground rendering brand tokens with live social card and OG image previews.

31|5|Updated Mar 12, 2026
Search Tags:#brand identity#design tokens#og image#social card#html preview#wcag contrast#visual approval
One-click install
npx skills add https://github.com/MoizIbnYousaf/marketing-cli --skill brand-kit-playground-moizibnyousaf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-kit-playground
Source: https://github.com/MoizIbnYousaf/marketing-cli/tree/main/skills/brand-kit-playground
Command: npx skills add https://github.com/MoizIbnYousaf/marketing-cli --skill brand-kit-playground-moizibnyousaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Brand identities defined in markdown files are hard to evaluate visually, forcing users to approve colors, typography, and style without ever seeing them rendered together. ## Core Features & Use Cases - Interactive Brand Rendering: Reads brand/creative-kit.md, voice-profile.md, positioning.md, and audience.md, then generates a single self-contained HTML file with live palette swatches, typography specimens, and voice snapshots. - Social Card & OG Previews: Renders social cards at Twitter, LinkedIn, Instagram, and Story aspect ratios plus 1200x630 OG images, all updating instantly as tokens change. - Token Round-Trip: A Copy Tokens button exports structured JSON that the agent parses to write approved changes back into brand/creative-kit.md. - Use Case: After running /visual-style, a founder opens the playground, tweaks the primary color and border radius, checks WCAG contrast warnings, copies the token JSON, and the agent updates the brand files automatically. ## Quick Start Ask the agent to show me my brand playground so it reads my brand files and opens an interactive HTML preview in my browser.

Frequently Asked Questions about brand-kit-playground

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I preview my brand identity visually before generating content?▼

Run the brand playground skill after defining your visual style. It reads brand/creative-kit.md and generates an interactive HTML page with live color swatches, typography specimens, and social card previews that update as you tweak tokens.

How do I preview social cards at Twitter, LinkedIn, and Instagram sizes?▼

The social card tab renders your card at 1200x675 for Twitter, 1200x627 for LinkedIn, 1080x1080 for Instagram, and 1080x1920 for Stories simultaneously. A multi-preview strip scales all sizes into thumbnails using CSS transforms.

Does the brand playground require npm install or a build step?▼

No. The playground is a single self-contained HTML file with inline CSS and vanilla JavaScript. The only external dependency is Google Fonts loaded via a link tag, and it opens directly in your default browser.

What happens if my creative-kit.md file is empty or missing?▼

The playground still works with placeholder default values and warns you that the preview uses defaults. You can run /visual-style first for a real preview, or tweak the defaults and save them back.

How do playground changes get saved back to my brand files?▼

Click Copy Tokens in the playground to copy structured JSON, then paste it into the conversation. The agent diffs it against creative-kit.md, shows the changes, and writes approved updates to the brand files.

Does the playground check color contrast accessibility?▼

Yes. A governance strip runs inline WCAG contrast ratio checks on text-background combinations after every change, flagging failures with the specific ratio and AA or AAA compliance level.

Related Skills

Explore More Design & Creative Skills→
mike-coulbournmike-coulbourn
37

visual-identity-direction

Translate brand strategy into visual identity direction with mood boards and logo briefs.

Community
Advanced
Largo2z9Largo2z9
1

compose-creative

Generate production-ready paid advertising creatives from brand strategy and audience profiles.

Community
Advanced
Largo2z9Largo2z9
1

deepen-brand-context

Combine customer and market voice analysis to deepen brand context.

Community
Advanced
zengbaochengzengbaocheng

html-screenshot-image-gen

Generate infographic-style PNG images from HTML templates via browser screenshots.

Community
Intermediate