banner-design

A workflow for designing banners for social media, advertisements, website hero sections, creative assets, and print. It covers selecting a purpose, size, content, branding, style, and number of options.

In plain words
What is it for?
Use it to create social covers, ad banners, website hero visuals, event banners, or print banners. It can produce multiple visual directions with generated imagery.
Why use it?
It turns a broad banner request into concrete design decisions before creating the artwork. This helps the result fit its platform and include the required message and branding.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/ohh-889/skyroc/banner-design
Any agent
npx skills add Ohh-889/skyroc --skill banner-design
Clone the repo
git clone --depth 1 https://github.com/Ohh-889/skyroc

Made for: Claude Code, Codex.

Per session 118 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,196 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin 100% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00118 $0.02196
Opus 5 $0.00059 $0.01098
Sonnet 5 $0.00024 $0.00439
Haiku 4.5 $0.00012 $0.00220

Measured yesterday against content hash 913d9c4b2a3b, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

banner-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

100% identical to banner-design — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

.agents/skills/banner-design/SKILL.md · 197 lines

How it starts

The opening of the file, as written. The whole thing — 197 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Design banners across social, ads, web, and print formats. Generates multiple art direction options per request with AI-powered visual elements. This skill handles banner design only. Does NOT handle video editing, full website design, or print production.

When to Activate

  • User requests banner, cover, or header design
  • Social media cover/header creation
  • Ad banner or display ad design
  • Website hero section visual design
  • Event/print banner design
  • Creative asset generation for campaigns

Prerequisites

Python: This skill uses Python scripts. On Windows, use python instead of python3 (e.g., python scripts/search.py instead of python3 scripts/search.py).

Workflow

Step 1: Gather Requirements (AskUserQuestion)

Collect via AskUserQuestion:

  1. Purpose — social cover, ad banner, website hero, print, or creative asset?
  2. Platform/size — which platform or custom dimensions?
  3. Content — headline, subtext, CTA, logo placement?
  4. Brand — existing brand guidelines? (check docs/brand-guidelines.md)
  5. Style preference — any art direction? (show style options if unsure)
  6. Quantity — how many options to generate? (default: 3)

Step 2: Research & Art Direction

  1. Activate ui-ux-pro-max skill for design intelligence
  2. Use Chrome browser to research Pinterest for design references:
    Navigate to pinterest.com → search "[purpose] banner design [style]"
    Screenshot 3-5 reference pins for art direction inspiration
    
  3. Select 2-3 complementary art direction styles from references: references/banner-sizes-and-styles.md

Step 3: Design & Generate Options

For each art direction option:

  1. Create HTML/CSS banner using frontend-design skill
    • Use exact platform dimensions from size reference
    • Apply safe zone rules (critical content in central 70-80%)
    • Max 2 typefaces, single CTA, 4.5:1 contrast ratio
    • Inject brand context via inject-brand-context.cjs

Read the full file on GitHub · 197 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 197 lines · 118 tokens per session scan A 913d9c4b2a3b

Subscribe to this mod's changes

banner-design is a skill published in the GitHub repository Ohh-889/skyroc (787 stars, last pushed yesterday), licensed MIT. It adds 118 tokens to every session and 2,196 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to banner-design, differing in 0 lines, and is treated as a copy.

Related

Other skills, from other repositories

antd

Use when the user's task involves Ant Design (antd) — writing antd components, debugging antd issues, querying antd APIs/props/tokens/demos, migrating between antd versions, or analyzing antd usage in a project. Triggers on antd-related code, imports from 'antd', or explicit antd questions.

ant-design/ant-design-pro · 69 tokens

pro-upgrade

Use when the user wants to upgrade their Ant Design Pro project to the latest version. Triggers on: upgrade pro, pro upgrade, migrate pro, update pro, 升级, 迁移项目, "how to upgrade", "update to latest", "keep project up to date".

ant-design/ant-design-pro · 63 tokens

demo-create

基于项目中 .vscode/south.code-snippets 定义的 CRUD 模板,快速生成后台管理系统的标准 CRUD 页面代码。该技能根据用户提供的业务模块信息(如模块名称、API路径、字段配置等),自动生成完整的页面文件(Page)、数据模型文件(Model)和 API 接口文件(Api),支持分页列表页面(demoPage)、独立操作页面(demoOptionPage)两种页面模式。.

southliu/south-admin-react · 99 tokens

init-project

初始化整个项目,清除模板自带的示例内容(src/pages/demo、src/pages/content、src/components/Github、src/servers/content、menus/demo 及相关 i18n),并连带删除代码中的 import 与引用。执行时会先以 dry-run 预览将要删除的文件和将要修改的引用,经用户确认后再真正执行。.

southliu/south-admin-react · 83 tokens

admin-console-blueprint

Use when you need to design, scaffold, refactor, or document a medium-sized admin console built as an independent Vite/React SPA backed by modular Go admin APIs, Cookie session auth, and CLI-provisioned administrator accounts. Helpful for tasks like planning a new admin console, extracting reusable architecture from…

LSTM-Kirigaya/jinhui-skills · 91 tokens

react_patterns_hooks

Curated Knowledge API for AI Agents — 68 MCP tools, 200+ skill packs, 46K chunks, semantic search over 670K vectors, 5-layer validation pipeline. Works with Claude Code, Cursor, Cline, Windsurf.

MidOSresearch/midos · 3 tokens