AGENT SKILLBY GLEBIS
Brand agency
AT A GLANCE
Brand agency is a brand skill for AI agents. To access Agency's official brand identity and style resources, use this skill. The glebis/claude-skills repository on GitHub, maintained by glebis, has 299 stars and the MIT license. To add it, run npx skills add glebis/claude-skills --skill brand-agency
- SOURCE REPOSITORY
- glebis/claude-skills (opens GitHub in a new tab)
- REPO STARS
- SOURCE REPOSITORY
- LICENSE
- MIT
- CATEGORIES
- SKILL.MD SIZE
- 6.4 KB261 LINES
QUICK ANSWER
- WHAT IT IS01
- To access Agency's official brand identity and style resources, use this skill. The value is a focused slice of brand and messaging judgment, useful when several similar skills cover the same ground.
- INPUTS02
- Context for brand and messaging: your goals, audience, constraints, and any source material the skill asks for.
- OUTPUT03
- A ready-to-use result for brand and messaging: the analysis, copy, or recommendations the agent produces.
INSTALL
One command adds this skill from its source repository.
npx skills add glebis/claude-skills --skill brand-agencyREAD THE SKILL.MD BELOW BEFORE YOU RUN IT. SKILLS INSTRUCT YOUR AGENT.
SKILL.MD
The full file, as published in the source repository. Copy it, download it or open it on GitHub.
ON THIS PAGE · 17
Agency Brand Styling#
Overview#
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.
Brand Guidelines#
Colors#
Main Colors:
- Background Light:
#ffffff- Light backgrounds - Foreground Dark:
#000000- Primary text and dark elements - Muted:
#e5e5e5- Subtle backgrounds, secondary elements
Primary Palette:
- Primary (Orange):
#e85d04- Main accent, CTAs, highlights - Secondary (Yellow):
#ffd60a- Secondary accent, warnings, attention - Accent (Blue):
#3a86ff- Links, interactive elements, info
Chart/Extended Colors:
- Chart Green:
#38b000- Success states, positive indicators - Chart Red:
#d62828- Error states, destructive actions
Typography#
Font Stack:
- Headings: Geist ExtraBold (weight 800), fallback: Arial
- Body Text: EB Garamond, fallback: Georgia
- Monospace/Code: Geist Mono, fallback: Courier New
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;
}Neobrutalism Style#
Shadows:
- Hard shadow offset:
4px 4px 0px 0px #000000 - No blur (stdDeviation: 0)
- CSS:
box-shadow: 4px 4px 0px 0px #000000; - SVG filter:
<feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000"/>
Borders:
- Width: 3px
- Color:
#000000 - Style: solid
- Border radius: 0 (no rounded corners)
Key Principles:
- High contrast between elements
- Bold, saturated colors
- No gradients (flat colors only)
- Strong black outlines
- Offset hard shadows
- Zero border radius
Application Guidelines#
SVG Graphics#
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>Presentations (Marp/PowerPoint)#
Slide backgrounds by type:
- Title slides: Primary Orange
#e85d04 - Content slides: Light
#ffffffor Muted#e5e5e5 - Accent slides: Secondary Yellow
#ffd60a, Accent Blue#3a86ff - Dark slides: Foreground
#000000
Text colors:
- On light backgrounds:
#000000 - On dark/colored backgrounds:
#ffffff
Web/HTML#
: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);
}Color Usage Quick Reference#
| 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 |
Assets#
Logo: assets/logo.svg - Agency logo in neobrutalism style (terminal window with code symbols and geometric shapes)
Social Media Templates#
ASCII-art style HTML templates for social media using Geist Mono font. Render to PNG using Playwright.
Available Templates#
| 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 |
Usage#
# 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 --listASCII Style Elements#
Templates use ASCII box-drawing characters for decoration:
Frames: ┌─────┐ ╔═════╗ ┏━━━━━┓
│ │ ║ ║ ┃ ┃
└─────┘ ╚═════╝ ┗━━━━━┛
Lines: ─ │ ═ ║ ━ ┃
Arrows: → ← ↑ ↓ ▶ ◀ ▲ ▼
Shapes: ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇
Blocks: █ ▓ ▒ ░Template Files#
Located in: assets/templates/
Supporting file: .claude-plugin/plugin.json#
{
"name": "brand-agency",
"description": "Applies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interf",
"author": {
"name": "Gleb Kalinin"
},
"repository": "https://github.com/glebis/claude-skills",
"license": "MIT"
}FAQ
07 QUESTIONS
01What is the Brand agency agent skill?
To access Agency's official brand identity and style resources, use this skill. It is listed under brand in the 100xLab agent skills directory.
02How do I install Brand agency in Cursor, Claude Code, or Codex?
Run npx skills add glebis/claude-skills --skill brand-agency in the project where you want it, then ask your agent for the skill by name. The --skill flag installs only Brand agency, not every skill in the repository.
03What does the Brand agency SKILL.md cover?
The SKILL.md includes sections on Overview, Brand Guidelines, Colors, Typography, Neobrutalism Style and Application Guidelines. Read the full text on this page or in plain markdown at /resources/agent-skills/glebis-claude-skills--brand-agency--pcktj4/raw.
04Which agents can use Brand agency?
Brand agency installs with the cross-agent skills installer (npx skills add), which sets it up for agents such as Claude Code, Cursor and Codex. Each agent loads the SKILL.md when you ask for the skill by name.
05What license is Brand agency under?
The glebis/claude-skills repository declares the MIT license. Read the license file in the repository before you copy or redistribute the skill.
06Is Brand agency free to use?
Reading, copying and installing Brand agency costs nothing: it is published in a public GitHub repository under the MIT license. Reuse and redistribution follow that license.
07Where is the source of Brand agency?
Brand agency comes from https://github.com/glebis/claude-skills, which has 299 GitHub stars. The SKILL.md is at https://github.com/glebis/claude-skills/blob/HEAD/brand-agency/SKILL.md. The author is glebis.
Need an agent workflow built around your stack?
Tell us the workflow you want automated. We reply within 4 working hours (IST).
ATTRIBUTION
Brand agency was written by its original authors and is published in glebis/claude-skills (opens GitHub in a new tab) under the MIT license. All rights stay with the original authors.
100xLab did not write, maintain or endorse this skill. This page lists it for discovery. Repo stars belong to the source repository, not to the skill. Review any skill before you install it.