banner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional…
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
Claude Code
$ npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand --agent claude-code
Codex
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a codex -y
Cursor
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a cursor -y
Gemini CLI
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a gemini-cli -y
GitHub Copilot
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a github-copilot -y
OpenCode
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a opencode -y
Windsurf
$ npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a windsurf -y
name: brand description: Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides. argument-hint: "[update|review|create] [args]" metadata: author: claudekit version: "1.0.0"
Brand identity, voice, messaging, asset management, and consistency frameworks.
Script paths in this skill and its `references/` are relative to the directory that contains this SKILL.md, not to the project: `scripts/<file>` is this skill's own `scripts/` folder, and `../<skill>/scripts/<file>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs/brand-guidelines.md`, `assets/design-tokens.json` or `src/` relative to it.
**Inject brand context into prompts:**
node scripts/inject-brand-context.cjs node scripts/inject-brand-context.cjs --json
**Validate an asset:**
node scripts/validate-asset.cjs <asset-path>
**Extract/compare colors:**
node scripts/extract-colors.cjs --palette node scripts/extract-colors.cjs <image-path>
# 1. Edit docs/brand-guidelines.md (or use /brand update) # 2. Sync to design tokens node scripts/sync-brand-to-tokens.cjs # 3. Verify node scripts/inject-brand-context.cjs --json | head -20
The sync stops when it detects existing token files, `:root` custom properties or Tailwind v4 `@theme` variables in common CSS entry points and their local CSS imports, or Tailwind theme colors and presets. Review the reported source before proceeding. If the detected files are the managed `assets/design-tokens.*` outputs from an earlier sync and replacing them is intentional, re-run with `--force`.
**Files synced:**
| Subcommand | Description | Reference | |------------|-------------|-----------| | `update` | Update brand identity and sync to all design systems | `references/update.md` |
| Topic | File | |-------|------| | Voice Framework | `references/voice-framework.md` | | Visual Identity | `references/visual-identity.md` | | Messaging | `references/messaging-framework.md` | | Consistency | `references/consistency-checklist.md` | | Guidelines Template | `references/brand-guideline-template.md` | | Asset Organization | `references/asset-organization.md` | | Color Management | `references/color-palette-management.md` | | Typography | `references/typography-specifications.md` | | Logo Usage | `references/logo-usage-rules.md` | | Approval Checklist | `references/approval-checklist.md` |
| Script | Purpose | |--------|---------| | `scripts/inject-brand-context.cjs` | Extract brand context for prompt injection | | `scripts/sync-brand-to-tokens.cjs` | Sync brand-guidelines.md → design-tokens.json/css | | `scripts/validate-asset.cjs` | Validate asset naming, size, format | | `scripts/extract-colors.cjs` | Extract and compare colors against palette |
| Template | Purpose | |----------|---------| | `templates/brand-guidelines-starter.md` | Complete starter template for new brands |
1. Parse subcommand from `$ARGUMENTS` (first word) 2. Load corresponding `references/{subcommand}.md` 3. Execute with remaining arguments
🇦🇿 Azərbaycanca | 🇮🇩 Bahasa Indonesia | 🇰🇷 한국어 | 🇻🇳 Tiếng Việt | 🇨🇳 简体中文 | 🇺🇸 English An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional…
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS…
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI…
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide…
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first…
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing…
Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene…
Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline,…
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at…