Visual Style
calesthio/OpenMontage
Create, extract, and apply portable visual design systems via visual-style.md files.
Applies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interfaces.
$ npx skills add glebis/claude-skills --skill brand-agency -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install glebis/claude-skills brand-agency --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/brand-agency .claude/skills/brand-agency && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "brand-agency" agent skill from https://github.com/glebis/claude-skills/tree/main/brand-agency into .claude/skills/brand-agency/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-agency", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/glebis/claude-skills/tree/main/brand-agencyType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add glebis/claude-skills --skill brand-agency -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install glebis/claude-skills brand-agency --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/brand-agency .agents/skills/brand-agency && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "brand-agency" agent skill from https://github.com/glebis/claude-skills/tree/main/brand-agency into .agents/skills/brand-agency/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-agency", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add glebis/claude-skills --skill brand-agency -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install glebis/claude-skills brand-agency --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/brand-agency .cursor/skills/brand-agency && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "brand-agency" agent skill from https://github.com/glebis/claude-skills/tree/main/brand-agency into .cursor/skills/brand-agency/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-agency", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/glebis/claude-skills.git --path brand-agency--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add glebis/claude-skills --skill brand-agency -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install glebis/claude-skills brand-agency --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/brand-agency .gemini/skills/brand-agency && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "brand-agency" agent skill from https://github.com/glebis/claude-skills/tree/main/brand-agency into .gemini/skills/brand-agency/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-agency", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install glebis/claude-skills brand-agencyInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add glebis/claude-skills --skill brand-agency -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/brand-agency .github/skills/brand-agency && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "brand-agency" agent skill from https://github.com/glebis/claude-skills/tree/main/brand-agency into .github/skills/brand-agency/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-agency", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add glebis/claude-skills --skill brand-agency -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install glebis/claude-skills brand-agency --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/brand-agency .opencode/skills/brand-agency && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "brand-agency" agent skill from https://github.com/glebis/claude-skills/tree/main/brand-agency into .opencode/skills/brand-agency/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-agency", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
brand-agencyApplies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interfaces.
Brand Agency is an agent skill from glebis/claude-skills. Applies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interfaces. This skill should be used when brand colors, visual formatting, neobrutalism style, or Agency design standards apply. Keywords - branding, corporate identity, visual identity, styling, brand colors, typography, visual formatting, visual design, neobrutalism.
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 21 other files, including scripts and assets (for example `.claude-plugin/plugin.json`).
It sits in Frontend & Design, covering Logo and visual identity, Typography and Slides and decks. The repository describes itself as: Collection of Claude Code skills for enhanced AI workflows. The licence is MIT.
Read from SKILL.md and the folder at commit 3b88261. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
nodeFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
fonts.googleapis.comw3.orgFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Brand Agency loads about 1.6k tokens when it runs. Until then it costs about 99 tokens; SKILL.md has 371 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from glebis/claude-skills at commit 3b88261, republished under its MIT licence (© glebis). 371 words, ~1,624 tokens.
.claude/skills/brand-agency/SKILL.md (or your agent's skills folder). This skill also uses 15 other files; get the full folder from GitHub.To access Agency's official brand identity and style resources, use this skill. The style is based on neobrutalism aesthetic with bold colors, hard shadows, and strong typography.
Main Colors:
#ffffff - Light backgrounds#000000 - Primary text and dark elements#e5e5e5 - Subtle backgrounds, secondary elementsPrimary Palette:
#e85d04 - Main accent, CTAs, highlights#ffd60a - Secondary accent, warnings, attention#3a86ff - Links, interactive elements, infoChart/Extended Colors:
#38b000 - Success states, positive indicators#d62828 - Error states, destructive actionsFont Stack:
Google Fonts Import:
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Geist:wght@800&family=Geist+Mono:wght@400;500&display=swap');CSS Variables:
:root {
--font-body: 'EB Garamond', Georgia, serif;
--font-heading: 'Geist', Arial, sans-serif;
--font-mono: 'Geist Mono', 'Courier New', monospace;
}Shadows:
4px 4px 0px 0px #000000box-shadow: 4px 4px 0px 0px #000000;<feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000"/>Borders:
#000000Key Principles:
To create SVG in Agency brand style:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
<feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000" flood-opacity="1"/>
</filter>
</defs>
<circle cx="200" cy="200" r="80"
fill="#e85d04"
stroke="#000000"
stroke-width="3"
filter="url(#shadow)"/>
</svg>Slide backgrounds by type:
#e85d04#ffffff or Muted #e5e5e5#ffd60a, Accent Blue #3a86ff#000000Text colors:
#000000#ffffff:root {
/* Colors */
--color-background: #ffffff;
--color-foreground: #000000;
--color-primary: #e85d04;
--color-secondary: #ffd60a;
--color-accent: #3a86ff;
--color-success: #38b000;
--color-error: #d62828;
--color-muted: #e5e5e5;
/* Typography */
--font-body: 'EB Garamond', Georgia, serif;
--font-heading: 'Geist', Arial, sans-serif;
--font-mono: 'Geist Mono', 'Courier New', monospace;
/* Shadows */
--shadow: 4px 4px 0px 0px #000000;
--shadow-sm: 2px 2px 0px 0px #000000;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 800;
}
/* Body */
body {
font-family: var(--font-body);
color: var(--color-foreground);
background: var(--color-background);
}
/* Buttons */
.btn {
background: var(--color-primary);
color: white;
border: 3px solid var(--color-foreground);
box-shadow: var(--shadow);
border-radius: 0;
font-family: var(--font-heading);
font-weight: 800;
}
/* Cards */
.card {
background: var(--color-background);
border: 3px solid var(--color-foreground);
box-shadow: var(--shadow);
border-radius: 0;
}
/* Code */
code, pre {
font-family: var(--font-mono);
background: var(--color-foreground);
color: white;
border: 3px solid var(--color-foreground);
}| Context | Color | Hex |
|---|---|---|
| Primary action | Orange | #e85d04 |
| Secondary action | Yellow | #ffd60a |
| Links/Info | Blue | #3a86ff |
| Success | Green | #38b000 |
| Error/Danger | Red | #d62828 |
| Text (light bg) | Black | #000000 |
| Text (dark bg) | White | #ffffff |
| Muted/Disabled | Gray | #e5e5e5 |
Logo: assets/logo.svg - Agency logo in neobrutalism style (terminal window with code symbols and geometric shapes)
ASCII-art style HTML templates for social media using Geist Mono font. Render to PNG using Playwright.
| Template | Size | Platform |
|---|---|---|
instagram/story-announcement | 1080x1920 | IG Story |
instagram/story-quote | 1080x1920 | IG Story |
instagram/post-title | 1080x1350 | IG Post |
instagram/post-tips | 1080x1350 | IG Post |
instagram/post-event | 1080x1350 | IG Post |
youtube/thumbnail | 1280x720 | YT Thumbnail |
youtube/shorts-cover | 1080x1920 | YT Shorts |
social/cover-banner | 1584x396 | LinkedIn/FB |
social/tiktok | 1080x1920 | TikTok |
social/twitter-post | 1200x675 | X/Twitter |
social/pinterest-pin | 1000x1500 |
# Render all templates
node scripts/render-templates.js
# Render specific template
node scripts/render-templates.js --template instagram/story-announcement
# Custom output path
node scripts/render-templates.js -t youtube/thumbnail -o my-thumbnail.png
# List available templates
node scripts/render-templates.js --listTemplates use ASCII box-drawing characters for decoration:
Frames: ┌─────┐ ╔═════╗ ┏━━━━━┓
│ │ ║ ║ ┃ ┃
└─────┘ ╚═════╝ ┗━━━━━┛
Lines: ─ │ ═ ║ ━ ┃
Arrows: → ← ↑ ↓ ▶ ◀ ▲ ▼
Shapes: ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇
Blocks: █ ▓ ▒ ░Located in: assets/templates/
© glebis, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 15 other files (scripts, assets) in brand-agency of glebis/claude-skills.
Open the folder on GitHubat commit 3b88261
Brand Agency next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Brand Agency this skillglebis/claude-skills | 391 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Visual Stylecalesthio/OpenMontage | 66k | — | ~1.5k | Automated safety check: Pass | AGPL-3.0 | |
| Tesseract Designmirage-hq/Tesseract | 130 | — | ~986 | Automated safety check: Pass | Custom licence | |
| Userinterface Wikiraphaelsalaja/userinterface-wiki | 907 | — | ~3.5k | Automated safety check: Pass | MIT | |
| Design Style Skillhaojing8312/WorkClaw | 141 | 1 repos | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| Nerv UITheGreatGildo/nerv-ui | 228 | — | ~7k | Automated safety check: Pass | MIT |
calesthio/OpenMontage
Create, extract, and apply portable visual design systems via visual-style.md files.
mirage-hq/Tesseract
Create and revise static visual designs as editable Tesseract compositions and rendered PNGs, including posters, social graphics, slide layouts, diagrams, and web/UI mockups.
raphaelsalaja/userinterface-wiki
UI/UX best practices for web interfaces. An agent skill from raphaelsalaja/userinterface-wiki.
haojing8312/WorkClaw
Select a consistent visual design system for PPT slides using radius/spacing style recipes.
TheGreatGildo/nerv-ui
NERV Operations Console aesthetic for web interfaces — Evangelion-inspired instrumentation UI with black void backgrounds, sparse high-contrast color coding (orange headers, green nominal data, cyan…
jiushiwon/wg-skills
A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…
glebis/claude-skills
Runs a human-first workflow for labeling PII spans in a transcript, then scores inter-annotator agreement and drafts an adjudicated gold set.
glebis/claude-skills
Automates a dedicated, logged-in Chrome instance per profile without ever closing the user's own open tabs or browser windows.
glebis/claude-skills
This skill should be used when conducting comprehensive research on any topic using the OpenAI Deep Research API.
glebis/claude-skills
This skill should be used for elimination-style research where the user wants to choose from a shortlist of products, tools, services, vendors, or other options using explicit criteria, numeric…
glebis/claude-skills
Generates a self-contained HTML presentation with article and slides modes, ElevenLabs voiceover narration and optional GPT Image 2 illustrations.
glebis/claude-skills
Writes fictional but realistic coaching or therapy session transcripts for evals, demos and few-shot examples, in several modalities and export formats.
Categories
Applies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interfaces. Brand Agency is an agent skill from glebis/claude-skills. Applies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interfaces.
Brand Agency fits situations like: tasks that involve Logo and visual identity; tasks that involve Typography; tasks that involve Slides and decks.
Run `npx skills add glebis/claude-skills --skill brand-agency -a claude-code`. Or copy the skill folder (brand-agency in glebis/claude-skills) into .claude/skills/brand-agency in your project. Claude Code loads it when a task matches its description.
Run `npx skills add glebis/claude-skills --skill brand-agency -a codex`. Or copy the skill folder (brand-agency in glebis/claude-skills) into .agents/skills/brand-agency in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add glebis/claude-skills --skill brand-agency -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/brand-agency, .gemini/skills/brand-agency, .github/skills/brand-agency and .opencode/skills/brand-agency in your project.
Going by SKILL.md and its folder, Brand Agency needs the command-line tools its instructions call (node).
SKILL.md names 2 domains. In commands or code: fonts.googleapis.com and w3.org; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Brand Agency is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Brand Agency: Visual Style (calesthio/OpenMontage, 66k stars), Tesseract Design (mirage-hq/Tesseract, 130 stars), Userinterface Wiki (raphaelsalaja/userinterface-wiki, 907 stars) and Design Style Skill (haojing8312/WorkClaw, 141 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
glebis (a GitHub user) maintains it in glebis/claude-skills, which has 391 GitHub stars. The repository holds 92 skills in this directory. The repository was last updated on October 8, 2026.
Source: glebis/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.