…

brand a project from its own parts

Say brand it.

A skill for coding agents that takes a project from its name to its launch video, all as code.

npx skills add AVGVSTVS96/brand-it

View on GitHub

01 examples

Each one its own look.

The rules come from making hex and commonplace. The first thing the skill branded was itself.

hex · Claude Code as your personal assistant

Poppy neo-brutalist. Cream and ink, blue, yellow and pink, hard shadows, and the real Telegram, Discord and Buzz on the page.

Archivo · Martian Mono · 3 accents · name to launch video in two days

hex-sand.vercel.app · github.com/AVGVSTVS96/hex

hex-sand.vercel.app at 1035 wide — hex · 1035 ·

hex-sand.vercel.app at 390 wide — hex · 390 ·

hex's link preview image — hex · og.png · 1200×630

commonplace · your personal data kit for agents

A light terminal. Paper, mono, one red pen. The wordmark is the CLI cursor, drawn from the font's outlines.

Ioskeley Mono · IBM Plex Sans · 1 red · name to live site in under two hours

commonplace-eight-sable.vercel.app · github.com/AVGVSTVS96/commonplace

commonplace-eight-sable.vercel.app at 1035 wide — commonplace · 1035 ·

commonplace-eight-sable.vercel.app at 390 wide — commonplace · 390 ·

commonplace's link preview image — commonplace · og.png · 1200×630

brand-it · brand a project from its own parts

brand-it looks like the drafting layer under a brand: white paper, ink, and one pencil blue for the guides, measures and nodes the method draws while it checks its work, so the brands it shows sit inside as finished things.

Mona Sans · Mona Sans Mono · 1 pencil · this page, by the skill

github.com/AVGVSTVS96/brand-it

brand-it · 1035 ·

1035

brand-it · 390 ·

390

brand-it · og.png · 1200×630

brand-it · launch video · 1920×1080

1920

They share a method, not a look.

02 code

All of it is code.

A brand is one BRAND.md, one specimen page and the scripts that made it, so any asset rebuilds in one command.

brand/ BRAND.mdthe system, written down specimen.htmlthe system in use: hero, type scale, tokens, motion references.mdwhat was taken from your saves, and what wasn't logo/gen.mjsthree marks from real font outlines, as SVG paths copy/ MESSAGING.mdthe one line, what it is and isn't, the voice, facts with sources SITE.md LAUNCH.md README.md site/static, on Vercel: og.png, favicon.svg, the README header video/HTML scenes on one clock, sound built from the same clock

03 checks

Checked before it says done.

Two scripts ship with the skill. One shoots a page at 45 widths in light and dark and prints anything that overflows. The other renders the video frame by frame and prints its loudness after encoding.

$ bun shoot.mjs site/ shots/
page scrolls sideways by 14px
  at light 320, dark 320
text wider than its box: strong.num "~2,000"
  at light 1035, dark 1035

2 problems · shots in shots/ at 390@2x, 1035, 1440

$ bun video.mjs video/ video
41s / 41s
video/out/video.mp4: -14 LUFS, true peak -2.1 dBTP after AAC

04 install

Install

One command. Then open a project in Claude Code and say brand it.

npx skills add AVGVSTVS96/brand-it

You'll need
Bun, Chrome and ffmpeg, for the scripts. Bun installs puppeteer-core on first run.

It points at my own projects and saves, so read it as a worked method, or fork it and point it at yours.