A skill your agent uses when asked to create a brand identity, define visual design direction, generate a color palette or type system, build a style guide, or establish the look and feel for a…

MITAuto-check: notesFrontend & Design

Install Form Brand

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill form-brand -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace form-brand --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/ai-agency/tonone/skills/form-brand .claude/skills/form-brand && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
form-brand
GitHub stars
2.8k
Token cost
~2.1k tokens
SKILL.md length
806 words
Files
2
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when asked to create a brand identity, define visual design direction, generate a color palette or type system, build a style guide, or establish the look and feel for a…

  • Works in 4 steps: Positioning Anchor → Competitive Audit → Brand Adjectives + Visual Language → …
  • Asked to create a brand identity
  • SKILL.md covers Phase 1: Positioning Anchor, Phase 2: Competitive Audit, Phase 3: Brand Adjectives +… and Design Intelligence (via uiux), plus 2 more sections
  • Calls python3

What it does

Form Brand is an agent skill from jeremylongshore/tons-of-skills-marketplace. Use when asked to create a brand identity, define visual design direction, generate a color palette or type system, build a style guide, or establish the look and feel for a product. Examples: "create a brand for X", "define the visual identity", "what colors should we use", "build a style guide", "design system foundations".

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `.claude-plugin/plugin.json`).

It sits in Frontend & Design, covering Brand strategy and identity, UI design and Theming and dark mode. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Asked to create a brand identity
  • Define visual design direction
  • Generate a color palette
  • Build a style guide

Example prompts

  • “create a brand for X”
  • “define the visual identity”
  • “what colors should we use”
  • “/form-brand”

Requirements

  • Python 3
  • Pre-approved tools (allowed-tools): Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, TodoWrite, AskUserQuestion

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Positioning Anchor
  2. Competitive Audit
  3. Brand Adjectives + Visual Language
  4. Design Tokens + Brand Brief

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Bash
    • Glob
    • Grep
    • WebFetch
    • WebSearch
    • Task
    • TodoWrite

    …and 1 more on the same allowed-tools line.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • python3

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Form Brand loads about 2.1k tokens when it runs. Until then it costs about 85 tokens; SKILL.md has 806 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~85
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, TodoWrite, AskUserQuestion

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 806 words, ~2,120 tokens.

Download SKILL.mdSave it as .claude/skills/form-brand/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
form-brand
description
Use when asked to create a brand identity, define visual design direction, generate a color palette or type system, build a style guide, or establish the look and feel for a product. Examples: "create a brand for X", "define the visual identity", "what colors should we use", "build a style guide", "design system foundations".
allowed-tools
Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, TodoWrite, AskUserQuestion
version
0.6.4
author
tonone-ai <hello@tonone.ai>
license
MIT

Form Brand

You are Form — the visual designer on the Product Team.

Brand identity flows in one direction: strategy → visual. You do not touch color or type until you understand what makes this product different and who it's for. A beautiful identity on an unclear position is decoration. A simple identity on a clear position is a brand.

This skill has 4 phases. Move through them in order.

Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.


Phase 1: Positioning Anchor

Before any visual work, establish the strategic foundation. This is a 3-question gate — not a workshop.

Ask:

  1. What does this product do and who is it specifically for? (One sentence. If it takes more than one sentence, the positioning is unclear.)
  2. What makes it different from the obvious alternatives? (Not "we're better" — what is the specific, concrete difference?)
  3. What should someone feel the first time they encounter this brand? (Two or three words. These become the filter for every visual decision.)

If working from a Helm brief, extract these answers from it directly. If working from a product description, extract them and confirm before moving on.

Done when: You can write one sentence answering each question. If you can't, surface the gap. Do not proceed until resolved — visual guesses built on strategic ambiguity compound into expensive rework.


Phase 2: Competitive Audit

Before defining the visual language, understand what already exists in this category. Not about copying — it's about finding the white space.

For the product's category, describe:

  • What color conventions dominate? (e.g., B2B SaaS is 80% blue/teal; fintech skews dark + green or dark + gold)
  • What typographic conventions are standard? (e.g., dev tools skew monospaced or geometric sans; consumer skews humanist)
  • What visual territory is overcrowded? (what does everyone look like?)
  • What hasn't been claimed? (the visual gap is often the right move for a differentiated position)

Then make a call: does this brand fit the category conventions (appropriate if trust and familiarity matter) or break them intentionally (appropriate if the brand's differentiation is disruption)?

This decision shapes every color and type choice that follows.


Phase 3: Brand Adjectives + Visual Language

3.1 Brand Adjectives

Define 3–5 adjectives that describe how the brand should feel. These are the filter for every visual decision.

Brand adjectives: [e.g., precise, grounded, fast, minimal, trustworthy]
NOT:              [explicit anti-adjectives — e.g., not playful, not corporate, not loud]

Every visual decision must be justifiable against these adjectives. If it can't be justified, it doesn't belong.

3.2 Color System

Build a palette with semantic meaning. Ground every choice in the adjectives and the competitive audit — not color psychology charts.

For each color, specify:

  • Hex + HSL value
  • Semantic name (--color-primary, --color-surface-default)
  • Use rule — where it appears, where it must NOT appear
  • WCAG contrast ratio vs white and black — flag AA failures

Required palette sections:

SectionPurpose
PrimaryBrand identity color — CTAs, key UI elements
SecondarySupporting accent — used sparingly
NeutralSurface, border, text hierarchy (5 steps: 50–900)
SemanticSuccess, warning, error, info
BackgroundPage, card, elevated surfaces

Color decision rule: One primary color that you own. Neutrals that support it. Semantic colors that are functional, not decorative. More than this is usually noise.

Show full SKILL.md (290 more words)Show less
3.3 Type System

Select typefaces and define a scale. The typeface choice expresses personality more reliably than color — lock this in with intention.

Rule: maximum two typefaces. One for identity/headlines (where personality lives), one for body copy (where readability lives). Constraint forces the system to work harder.

Heading typeface: [name] — [rationale tied to brand adjectives + competitive position]
Body typeface:    [name] — [rationale]
Mono typeface:    [name, only if the product has code/data surfaces]

Type scale (base: [N]px, ratio: [e.g., 1.25 Major Third]):
  display:  [Xpx / Xrem] — hero headlines
  h1:       [Xpx / Xrem]
  h2:       [Xpx / Xrem]
  h3:       [Xpx / Xrem]
  body-lg:  [Xpx / Xrem] — primary reading text
  body:     [Xpx / Xrem] — default body
  body-sm:  [Xpx / Xrem] — secondary text, captions
  label:    [Xpx / Xrem] — form labels, table headers
  caption:  [Xpx / Xrem] — metadata, timestamps

Design Intelligence (via uiux)

After defining brand adjectives and visual language (Phase 3), query the design database to validate color and style choices against industry data:

bash
python3 -m form_agent.uiux search --domain color --query "{industry/product_type}" --limit 3
python3 -m form_agent.uiux search --domain style --query "{product_type}" --limit 3

Use results to:

  • Validate color palette aligns with industry conventions
  • Check recommended style matches brand adjectives
  • Cross-reference anti-patterns before finalizing visual direction

Phase 4: Design Tokens + Brand Brief

4.1 Design Tokens

Output the palette and type system as CSS custom properties. This is the contract with Prism for implementation.

css
:root {
  /* Primary */
  --color-primary-500: #hex;
  --color-primary-600: #hex; /* hover state */
  --color-primary-700: #hex; /* active state */

  /* Neutrals */
  --color-neutral-50: #hex;
  --color-neutral-100: #hex;
  --color-neutral-200: #hex;
  --color-neutral-300: #hex;
  --color-neutral-400: #hex;
  --color-neutral-500: #hex;
  --color-neutral-700: #hex;
  --color-neutral-900: #hex;

  /* Semantic */
  --color-success: #hex;
  --color-warning: #hex;
  --color-error: #hex;
  --color-info: #hex;

  /* Typography */
  --font-heading: "FontName", [fallback stack];
  --font-body: "FontName", [fallback stack];
  --font-mono: "FontName", monospace; /* only if needed */

  /* Scale */
  --text-display: Xrem;
  --text-h1: Xrem;
  --text-h2: Xrem;
  --text-h3: Xrem;
  --text-body-lg: Xrem;
  --text-body: Xrem;
  --text-body-sm: Xrem;
  --text-label: Xrem;
  --text-caption: Xrem;
}
4.2 Brand Brief

Consolidate into a single deliverable. One-pager with everything that matters.

  1. Positioning summary (one paragraph — what it is, who it's for, what makes it different)
  2. Brand adjectives with anti-adjectives
  3. Competitive position — how the visual language reflects the differentiation
  4. Color palette — table with hex, semantic name, use rule, contrast ratio
  5. Type system — typefaces, scale, rationale
  6. Design tokens — CSS custom properties block
  7. Do not use — explicit list of colors, fonts, and patterns that are off-brand
4.3 Shipability Gate

Before handing off, ask: Is this enough to build on?

Minimum viable brand checklist:

[ ] One logo lockup exists (or is in progress via form-logo)
[ ] Primary color defined with contrast-verified text pairings
[ ] Neutral scale defined
[ ] Two typefaces selected with scale
[ ] Design tokens output
[ ] "Do not use" list defined

If all six are checked: ship it. The brand will evolve with the product. Perfecting the system before the product has real users is the wrong order of operations.

Delivery

If output exceeds the 40-line CLI budget, invoke /atlas-report with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in plugins/ai-agency/tonone/skills/form-brand of jeremylongshore/tons-of-skills-marketplace.

  • SKILL.md
  • .claude-plugin/plugin.json

Open the folder on GitHubat commit cfae287

Compare with similar skills

Form Brand next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Form Brand compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Form Brand this skilljeremylongshore/tons-of-skills-marketplace2.8k—~2.1kAutomated safety check: NotesMIT
Brand SystemsHermeticOrmus/LibreUIUX-Claude-Code112—~2.3kAutomated safety check: PassMIT
Design Systemkenneth-liao/ai-launchpad-marketplace126—~4.4kAutomated safety check: PassNone
Web Design Expertcuriositech/some_claude_skills244—~1.7kAutomated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
DesignOhh-889/skyroc7959 repos~3.1kAutomated safety check: PassMIT

Similar skills

  • Brand Systems

    HermeticOrmus/LibreUIUX-Claude-Code

    Brand identity building blocks: positioning, personality, archetypes, logo systems, color palettes, type pairing, voice, and guidelines documentation.

    112 GitHub stars~2.3k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed
  • Design System

    kenneth-liao/ai-launchpad-marketplace

    Create, update, or refresh a visual design system or art style guide.

    126 GitHub stars~4.4k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed
  • Web Design Expert

    curiositech/some_claude_skills

    Creates unique web designs with brand identity, color palettes, typography, and modern UI/UX patterns.

    244 GitHub stars~1.7k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed
  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed
  • Design

    Ohh-889/skyroc

    Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations…

    795 GitHub starsUsed in 9 repos~3.1k tokens
    Frontend & DesignAuto-check passed
  • Visual Style

    calesthio/OpenMontage

    Create, extract, and apply portable visual design systems via visual-style.md files.

    66k GitHub stars~1.5k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo
  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes
  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed
  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Questions about Form Brand

What does Form Brand do?

A skill your agent uses when asked to create a brand identity, define visual design direction, generate a color palette or type system, build a style guide, or establish the look and feel for a…. Form Brand is an agent skill from jeremylongshore/tons-of-skills-marketplace. Use when asked to create a brand identity, define visual design direction, generate a color palette or type system, build a style guide, or establish the look and feel for a product.

When should I use Form Brand?

Form Brand fits situations like: asked to create a brand identity; define visual design direction; generate a color palette; build a style guide.

How do I install Form Brand in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill form-brand -a claude-code`. Or copy the skill folder (plugins/ai-agency/tonone/skills/form-brand in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/form-brand in your project. Claude Code loads it when a task matches its description.

How do I install Form Brand in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill form-brand -a codex`. Or copy the skill folder (plugins/ai-agency/tonone/skills/form-brand in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/form-brand in your project. Codex loads it when a task matches its description.

Can I use Form Brand in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill form-brand -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/form-brand, .gemini/skills/form-brand, .github/skills/form-brand and .opencode/skills/form-brand in your project.

What does Form Brand need to run?

Going by SKILL.md and its folder, Form Brand needs the command-line tools its instructions call (python3). Our summary lists: Python 3. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, TodoWrite, AskUserQuestion.

Does Form Brand access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Form Brand safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Form Brand use?

Form Brand is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Form Brand use?

About 2.1k tokens (SKILL.md is roughly 8.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Form Brand?

Skills that share tags, products or a category with Form Brand: Brand Systems (HermeticOrmus/LibreUIUX-Claude-Code, 112 stars), Design System (kenneth-liao/ai-launchpad-marketplace, 126 stars), Web Design Expert (curiositech/some_claude_skills, 244 stars) and UI Styling (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Form Brand?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.