skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

brand-system

Validates brand assets and syncs brand guidelines to design tokens and CSS variables.

Updated Mar 28, 2026
Search Tags:#typography#color palette#brand guidelines#design tokens#css variables#brand consistency#asset validation
One-click install
npx skills add https://github.com/po4yka/blog --skill brand-system-po4yka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-system
Source: https://github.com/po4yka/blog/tree/main/.agents/skills/brand-system
Command: npx skills add https://github.com/po4yka/blog --skill brand-system-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Maintaining consistent brand voice, colors, typography, and asset naming across a project is error-prone when guidelines live in scattered documents. This Skill centralizes brand context extraction, asset validation, and design token synchronization so guidelines stay enforceable. ## Core Features & Use Cases - Brand Context Injection: Parses docs/Guidelines.md to extract colors, typography, voice traits, and prohibited terms into a prompt-ready block or JSON. - Asset Validation: Checks marketing assets against naming conventions, file size limits, format rules, and manifest registration via validate-asset.cjs. - Token Synchronization: Converts brand guideline colors into design-tokens.json and regenerates CSS custom properties with sync-brand-to-tokens.cjs. - Use Case: After updating brand colors in docs/Guidelines.md, run the sync script to propagate the new palette into design tokens and theme.css, then verify with the context extraction script. ## Quick Start Ask the AI to validate a new banner asset against the brand guidelines and show whether its filename, size, and colors comply.

Frequently Asked Questions about brand-system

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

FAQPage Schema
How do I validate a marketing asset against brand guidelines?▼

Run node .agents/skills/brand-system/scripts/validate-asset.cjs with the asset path. It checks filename convention, file format, size limits, and manifest registration, then reports issues, warnings, and a suggested corrected filename.

How do I sync brand colors to design tokens and CSS?▼

Edit docs/Guidelines.md with the new colors, then run sync-brand-to-tokens.cjs. It extracts primary, secondary, and accent colors, updates design-tokens.json with generated color scales, and regenerates design-tokens.css.

What naming convention does the asset validator enforce?▼

Filenames must follow the pattern {type}_{campaign}_{description}_{YYYYMMDD}_{variant}.{ext}, all lowercase with kebab-case segments. Example: banner_claude-launch_hero-image_20251209.png.

Does the color extraction script analyze images directly?▼

No. extract-colors.cjs parses brand palettes from markdown and generates an ImageMagick histogram command for image analysis. You run the ImageMagick command separately, then compare extracted hex values against the brand palette.

Can I use this skill if my project already has brand guidelines?▼

Yes. The skill treats existing files like DESIGN.md and docs/Guidelines.md as the source of truth and provides supplementary validation and sync tooling rather than replacing the established brand.

Related Skills

Explore More Design & Creative Skills→
OpenLaborOpenLabor
4

Brand Guidelines

Enforce color, typography, logo usage, and voice guidelines across brand assets.

Official
Intermediate
rajitsaharajitsaha
10

visual-system-architect

Generate design systems with color, typography, components, and accessibility standards.

Community
Advanced
Nikolaj-StormNikolaj-Storm

ads-dna

Extract brand identity from a website and generate brand-profile.json.

Community
Intermediate
badhopebadhope

design-system

Standardize design tokens and component libraries across web and mobile platforms.

Community
Intermediate