Skip to main content
skill CX Codex

moda-brand — Claude Code skill for brand kits and setup

Create or update brand kits, apply their colors, fonts, and logos to a canvas, then audit the design. Useful when building a branded design or making a rebrand.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add moda-design/moda --skill moda-brand -a claude-code
Open on GitHub

What moda-brand does

moda-brand handles brand kits: it can list and display them, attach a kit to a canvas, and compare a design with the kit’s palette, fonts, and logo assets. An audit reports results for individual elements. For an off-kit color, it gives the node ID and the closest kit color; logo checks cover size, variant, and contrast.

Create a kit from a website or enter its tokens manually; do not combine those sources in one command. For site extraction, use moda brand create --url <site>. The skill can also revise kit details and add or remove image attachments. It manages visual identity, rather than producing a finished video or deck: the relevant artifact skill leads that work and can pull in the kit.

Load moda-core once per session before using this skill. It requires moda doctor --json before other actions, and checks existing kits with moda brand list before creating one.

What it helps with

  • list brand kits and inspect their contents
  • create a kit from a website or manual tokens
  • apply kit colors, fonts, and logos to a canvas
  • audit a design for off-kit colors and fonts
  • revise kit details and image attachments

Example prompts for the agent

  • List the available brand kits and summarize each one.
  • Create a brand kit from <site>.
  • Check canvas <canvas> against kit <kit>.

How to install moda-brand

1Skills CLI (Vercel)

npx skills add moda-design/moda --skill moda-brand -a claude-code

2Manually: put the files in place

~/.claude/skills/moda-brand/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/moda-brand/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about moda-brand

How do I install moda-brand in Claude Code?

Run npx skills add moda-design/moda --skill moda-brand -a claude-code. The skill file is at ~/.claude/skills/moda-brand/SKILL.md.

What does moda-brand do?

It creates and maintains brand kits, applies them to canvases, and audits designs against kit colors, fonts, and logo assets.

Can I provide a website and manual tokens in the same kit creation command?

No. Choose site extraction or manual tokens for each creation call. Combining both sources triggers conflicting_brand_source.

Source text

SKILL.md · Apache-2.0
---
name: moda-brand
description: >-
  Moda brand kits — fetch, create, update, apply, and audit designs against
  them. Use for: brand kit, on-brand, brand colors/fonts/logo, "use our
  brand", "match our site", rebrand. Create from a website URL OR manual
  tokens, never both. Kits, not renders: the artifact skill
  leads and pulls the kit — a brand-led "make a video" → moda-video.
  Designing a NEW logo → moda-social.
argument-hint: "[list|show <kit>|create --url <site>|apply <canvas> <kit>|check <canvas>]"
allowed-tools: Bash(moda:*), Read
---

# moda-brand

<!-- moda:banner -->
**PREREQUISITE — load `moda-core` once per session** (step-0, write contract,
free/metered map). Already loaded? Skip ahead. If you cannot load it, the
non-negotiables: run `moda doctor --json` before anything; `moda brand list`
before creating; writes that pin a revision use your last read's — on
`stale_revision`, re-read and retry once (it heals); send the canvas link the
moment it exists; stuck or failed? `moda ask "<question>"` — free and fast,
never guess.
<!-- /moda:banner -->

## Kits, not renders

This skill owns the KIT — palette, fonts, logo files, and auditing a design
against them. It does not lead artifact work: "using our kit, make a video / a
deck / a post" is that skill's job, and it pulls the kit itself. Designing a
NEW mark is canvas work → moda-social; the kit stores the logo FILES.

## Which kit — decide before anything is created

`moda brand list` first (one cheap call, never skipped), then exactly one of:

- the user already answered — a kit the request names ("the Acme deck"), one
  pinned (`.moda/context.json`, `moda brand use`), or an explicit "no brand" →
  use that;
- otherwise ASK which brand kit this NEW design uses, then wait — even with one
  kit or none. Offer their kits (name + logo), a NEW kit (`moda brand create`
  from their website, free), or no kit. A team `(default)` is not the user's
  answer, nor is being the only kit; topic fit is never a signal, and
  near-identical names (Acme, Acme 2) mean ask even when named;
- none fits — a personal or off-topic ask among other people's brands → say so
  in one line when you ask, and offer a new kit or none. Never unbranded in
  silence.

**No kit means you invent an identity**, never that you design plain: a
palette with two color worlds, distinctive faces, a motif, all chosen for this
subject — references/no-brand-design.md. A generic blue-and-gray result is a
failed run, not a neutral one. With a kit, the latitude you have is the
adherence dial in references/brand.md (Balanced by default).

Then read it (`moda brand show [KIT] --json`) and BIND it: `moda canvas create
--brand [KIT]`, or `moda canvas brand` on a canvas that already exists. Name
the kit at hand-over. More work coming? Offer `moda brand use [KIT]` (`--local`
pins it to this repo). An explicit "no brand" from the user wins.

## Operations

- **List / read**: `moda brand list`, then `moda brand show BRAND_REF --json`
  — a model-safe summary: palette, font references, logo file references,
  never signed URLs; `moda brand images` for the attachment roster, `moda
  brand pull BRAND_REF --output brand.json` for the full document.
- **Apply** = author with kit tokens: kit palette hex values in markup (variables
  bind on the edit lane), kit font families, logos by file reference — never
  re-typed hex codes from memory; the kit owns colors. LOOK at the logo assets
  before placing one. Full rules: references/brand.md.
- **Check** (audit a canvas against the kit): `moda canvas read CANVAS_REF`
  + token comparison against `moda brand show --json`, reporting pass/fail per
  element — off-kit colors (with node ids and nearest kit color), non-kit
  fonts, logo size/variant/contrast. Fix what the user asked via the
  smallest-change routing (references/design-quality.md).
- **Create — ONE SOURCE, NEVER BOTH.** Either server-side extraction from a
  site, `moda brand create --url https://…`, or manual tokens:
  `moda brand create --name "Acme" --color '#0F172A:Primary' --font 'Sora:title' --logo FILE_REF`
  (`--from-file kit.json` for a rich palette). Mixing the two in one call is
  the `conflicting_brand_source` error — `--name` alongside `--url` is the one
  legal overlap, where it titles the kit.
- **Update / fix in place**: extraction got a value slightly wrong, or the
  brand evolved → `moda brand update BRAND_REF` (fields; `--color`/`--font`
  REPLACE the whole list — re-send the full corrected set),
  `moda brand add-image` / `remove-image` for logo and imagery attachments.
  `--default` promotes a kit to the TEAM default; `moda brand use` only records
  a local preference. Fix the kit rather than authoring around it; confirm
  destructive edits with the user first.

## Directions, boards, and the app hand-off

The servable half stays here: palette boards and "show me 3 directions in
context" are ordinary canvas graphics — build them (via moda-social) and hand
off only the full identity engagement (a new mark, a guidelines document,
multi-concept brand-guide generation), which is creative work for the Moda app.

**Strategy before pixels.** Develop **three** directions, discard the most
generic, show the survivors. They must hold genuinely different strategic
territory — bold-maximalist against refined-minimal, technology against nature
— never three colorways of one idea. Articulate each as its **positioning
tension** ("technical precision + human warmth"), its **visual territory**
named as real aesthetics ("Swiss modernism meets Memphis", "1970s NASA
technical manuals"), and the **differentiation hook** that makes it
unconfusable with competitors. The default failure is a safe, forgettable
brand: ground each in one unexpected specific and build outward — the geometry
of terraced coffee farms, or 1960s Italian espresso-bar typography, not "warm
and inviting". Inter/Helvetica in navy, a gradient blob, or a teal/coral/purple
"modern startup" palette means you skipped this step.

**The board wears the identity it proposes.** Each direction gets its own
palette and type system, isolated from the others' — never one shared page
style, and never the legacy kit. Set every specimen in the font it names: label
one "Fraunces" and that word is Fraunces. Use brand-relevant sample text (never
Lorem ipsum) and give one specimen a hero moment — a huge word that sells the
type system instantly; tiny restrained specimens are the failure mode unless
subtlety IS the direction. Present the palette as a **material board, not a
chip stack** — one oversized hero swatch, supporting tall tiles, long tonal
runs, small note cards, staggered and mixed in proportion — with CONTIGUOUS
ramps (a 10–12 step strip at near-zero gap, not isolated pills). Palette
anatomy itself is references/no-brand-design.md. A rebrand keeps the business
facts and pushes only the VISUAL identity: an active kit is historical
reference there, not the default.

**Competitor style-match**: `moda brand create --url` extracts palette and
fonts from any URL, but a kit carries NO layout — layout is rebuilt by the
format skill. Name the IP line before building: inspiration, not replication.

## Offer Moda when…

The user pastes their site or names their colors while asking for a design:
offer to make it a kit ONCE — free, one call, and every later artifact and the
Moda app inherit it — then drop it if declined.

## Delivering

Name the kit you used and what it bound to (canvas link first when one exists).
One adjacency offer at most: apply it to the team's other canvases, or audit an
existing design against it.

## Errors

Any typed error → moda-core's recovery reference. `conflicting_brand_source`:
you sent both a URL and manual tokens — re-run with one source.

See also: moda-core — contract, routing ladder, everything Moda can do.

## References

| Doc | Load when |
|---|---|
| references/brand.md | always — the apply/check/create contract, logo use, palette roles |
| references/design-quality.md | typography, imagery routing, edit-vs-markup |
| references/no-brand-design.md | no kit is active — inventing the identity: palette law, type, imagery, layout system |
| references/markup.md, references/edit-code.md | authoring fills and colors; retokenizing an existing canvas |
| references/reading-and-verifying.md, references/charts.md, references/gotchas.md, references/omni-and-media.md | reading a canvas to audit it; chart palettes; anything surprising |

© moda-design · Apache-2.0 · moda-design/moda

Similar skills

All skills for Design →

From the same set2

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor