Agent skill

brand-agency

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.

View SKILL.md on GitHub Repository
Stars 74
Forks 17

Install this agent skill to your Project

npx add-skill https://github.com/glebis/claude-skills/tree/main/brand-agency

SKILL.md

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:

css
@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:

css
: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:

xml
<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 #ffffff or 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

css
: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 Pinterest

Usage

bash
# 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 --list

ASCII Style Elements

Templates use ASCII box-drawing characters for decoration:

Frames:   ┌─────┐  ╔═════╗  ┏━━━━━┓
          │     │  ║     ║  ┃     ┃
          └─────┘  ╚═════╝  ┗━━━━━┛

Lines:    ─ │ ═ ║ ━ ┃

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

Shapes:   ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇

Blocks:   █ ▓ ▒ ░

Template Files

Located in: assets/templates/

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

glebis/claude-skills

tdd

This skill should be used when the user wants to implement features or fix bugs using test-driven development. Enforces the RED-GREEN-REFACTOR cycle with vertical slicing, context isolation between test writing and implementation, human checkpoints, and auto-test feedback loops. Uses multi-agent orchestration with the Task tool for architecturally enforced context isolation. Supports Jest, Vitest, pytest, Go test, cargo test, PHPUnit, and RSpec.

74 17
Explore
glebis/claude-skills

github-gist

Publish files or Obsidian notes as GitHub Gists. Use when user wants to share code/notes publicly, create quick shareable snippets, or publish markdown to GitHub. Triggers include "publish as gist", "create gist", "share on github", "make a gist from this".

74 17
Explore
glebis/claude-skills

chrome-history

Query Chrome browsing history with natural language. Filter by date range, article type, keywords, and specific sites.

74 17
Explore
glebis/claude-skills

wispr-analytics

This skill should be used when analyzing Wispr Flow voice dictation history for self-reflection, work patterns, mental health insights, or productivity analytics. Triggered by requests like "/wispr-analytics", "analyze my dictations", "what did I dictate today", "wispr reflection", or any request to review voice dictation patterns. Supports modes - technical (coding/work), soft (communication), trends (volume/frequency), mental (sentiment/energy/rumination).

74 17
Explore
glebis/claude-skills

granola

This skill should be used when importing, listing, or exporting Granola meeting recordings and transcripts. Queries Granola's local cache and API to list meetings, extract transcripts, and export to Obsidian notes in Fathom-compatible format.

74 17
Explore
glebis/claude-skills

telegram

This skill should be used when fetching, searching, downloading, sending, editing, or publishing messages on Telegram. Use for queries like "show my Telegram messages", "search Telegram for...", "get unread messages", "send a message to...", "edit that message", "publish this draft to klodkot", or "add Telegram messages to my notes".

74 17
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results