How do I install the Visual skill?

Run npx skillmds@latest add bromso/visual in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Visual skill do?

Define visual identity — colors, typography, logo usage, and imagery style It is listed under Design & Media on SkillMD.

Is Visual safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Visual?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Visual free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Visual?

bromso (@bromso) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Visual by bromso — Agent Skill

Name: Visual
Author: bromso

File contents

Visual Identity

Define the visual identity system for "$ARGUMENTS". Create specifications for logo usage, color palette, typography, and imagery that express the brand visually.

Prerequisites

Read .metapowers/branding/$ARGUMENTS/02-strategy.md and .metapowers/branding/$ARGUMENTS/03-verbal.md. If 03-verbal.md does not exist, tell the user:

Phase 3 (Verbal) has not been completed for "$ARGUMENTS". Run /branding:verbal $ARGUMENTS first, or use --skip-checks to bypass.

If --skip-checks is present in $ARGUMENTS, skip this check and log to .metapowers/branding/$ARGUMENTS/skip-log.md.

Process

Read context files:
- Read .metapowers/branding/$ARGUMENTS/02-strategy.md for personality and positioning
- Read .metapowers/branding/$ARGUMENTS/03-verbal.md for voice and tone
If the user has existing assets:
- Review logo files in .metapowers/branding/$ARGUMENTS/assets/logo/
- Review fonts in .metapowers/branding/$ARGUMENTS/assets/fonts/
- Review imagery in .metapowers/branding/$ARGUMENTS/assets/imagery/
- Document and formalize what exists
If creating from scratch, define:

Logo usage rules:
- Minimum size, clear space requirements
- Approved variations (primary, icon, monochrome, reversed)
- Prohibited uses
- Ask the user to provide/create logo files and place in .metapowers/branding/$ARGUMENTS/assets/logo/
Color palette:
- Primary colors (2-3) with hex, RGB values
- Secondary colors (2-4) with hex, RGB values
- Neutral colors for backgrounds and text
- Accessibility: contrast ratios for text on each background
Typography:
- Primary typeface: name, weights, usage (headings vs. body)
- Secondary typeface (if needed)
- Type scale: sizes, weights, line heights for each level
- Ask the user to provide font files and place in .metapowers/branding/$ARGUMENTS/assets/fonts/
Imagery style:
- Photography style (mood, composition, subjects)
- Illustration style (if applicable)
- Icon style
- Do's and don'ts
Write the artifact to .metapowers/branding/$ARGUMENTS/04-visual.md

Output

The visual identity written to .metapowers/branding/$ARGUMENTS/04-visual.md. Present a summary to the user highlighting:

Primary color palette
Typography choices
Logo variations defined
Imagery direction

---name: visualdescription: Define visual identity — colors, typography, logo usage, and imagery style---# Visual IdentityDefine the visual identity system for "$ARGUMENTS". Create specifications for logo usage, color palette, typography, and imagery that express the brand visually.## PrerequisitesRead `.metapowers/branding/$ARGUMENTS/02-strategy.md` and `.metapowers/branding/$ARGUMENTS/03-verbal.md`. If `03-verbal.md` does not exist, tell the user:> Phase 3 (Verbal) has not been completed for "$ARGUMENTS". Run `/branding:verbal $ARGUMENTS` first, or use `--skip-checks` to bypass.If `--skip-checks` is present in $ARGUMENTS, skip this check and log to `.metapowers/branding/$ARGUMENTS/skip-log.md`.## Process1. **Read context files:** - Read `.metapowers/branding/$ARGUMENTS/02-strategy.md` for personality and positioning - Read `.metapowers/branding/$ARGUMENTS/03-verbal.md` for voice and tone2. **If the user has existing assets:** - Review logo files in `.metapowers/branding/$ARGUMENTS/assets/logo/` - Review fonts in `.metapowers/branding/$ARGUMENTS/assets/fonts/` - Review imagery in `.metapowers/branding/$ARGUMENTS/assets/imagery/` - Document and formalize what exists3. **If creating from scratch, define:** **Logo usage rules:** - Minimum size, clear space requirements - Approved variations (primary, icon, monochrome, reversed) - Prohibited uses - Ask the user to provide/create logo files and place in `.metapowers/branding/$ARGUMENTS/assets/logo/` **Color palette:** - Primary colors (2-3) with hex, RGB values - Secondary colors (2-4) with hex, RGB values - Neutral colors for backgrounds and text - Accessibility: contrast ratios for text on each background **Typography:** - Primary typeface: name, weights, usage (headings vs. body) - Secondary typeface (if needed) - Type scale: sizes, weights, line heights for each level - Ask the user to provide font files and place in `.metapowers/branding/$ARGUMENTS/assets/fonts/` **Imagery style:** - Photography style (mood, composition, subjects) - Illustration style (if applicable) - Icon style - Do's and don'ts4. **Write the artifact** to `.metapowers/branding/$ARGUMENTS/04-visual.md`## OutputThe visual identity written to `.metapowers/branding/$ARGUMENTS/04-visual.md`. Present a summary to the user highlighting:- Primary color palette- Typography choices- Logo variations defined- Imagery direction

Frequently asked questions

Visual