playbooks

home / skills / wesleysmits / agent-skills / brand-identity-template

brand-identity-template skill

/.agent/skills/brand-identity-template

This skill provides a single source of truth for brand guidelines, design tokens, voice, and tech choices to ensure consistent UI and copy.

npx playbooks add skill wesleysmits/agent-skills --skill brand-identity-template

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
2.0 KB
---
name: providing-brand-identity
description: Template skill providing the single source of truth for brand guidelines, design tokens, technology choices, and voice/tone. Customize this template for your brand. Use when generating UI components, styling applications, writing copy, or creating user-facing assets to ensure brand consistency.
---

# Brand Identity & Guidelines

> **📋 TEMPLATE SKILL**
> This is a starter template. Copy this folder to your project and customize the resources files with your brand's specific guidelines, design tokens, and voice/tone documentation.

## Setup Instructions

1. Copy this entire `brand-identity-template` folder to your project's `.agent/skills/` directory
2. Rename the folder to `brand-identity`
3. Update the resources files with your brand specifics:
   - `resources/design-tokens.json` - Your colors, fonts, spacing
   - `resources/tech-stack.md` - Your technology choices
   - `resources/voice-tone.md` - Your brand voice and tone
4. Replace `[YOUR BRAND NAME]` below with your actual brand name

---

**Brand Name:** [YOUR BRAND NAME]

This skill defines the core constraints for visual design and technical implementation for the brand. You must adhere to these guidelines strictly to maintain consistency.

## Reference Documentation

Depending on the task you are performing, consult the specific resource files below. Do not guess brand elements; always read the corresponding file.

### For Visual Design & UI Styling

If you need exact colors, fonts, border radii, or spacing values, read:
👉 **[`resources/design-tokens.json`](resources/design-tokens.json)**

### For Coding & Component Implementation

If you are generating code, choosing libraries, or structuring UI components, read the technical constraints here:
👉 **[`resources/tech-stack.md`](resources/tech-stack.md)**

### For Copywriting & Content Generation

If you are writing marketing copy, error messages, documentation, or user-facing text, read the persona guidelines here:
👉 **[`resources/voice-tone.md`](resources/voice-tone.md)**

Overview

This skill provides a single source of truth for brand guidelines, design tokens, technology choices, and voice/tone. Use it as the canonical reference when generating UI components, styling applications, writing copy, or creating user-facing assets. It is a template you customize with your brand specifics to enforce consistency across teams and automation. Follow the included resource files instead of guessing brand details.

How this skill works

The skill bundles three resource files: design tokens for visual styling, a tech-stack document for implementation constraints, and a voice/tone guide for copy. When asked to produce UI, code, or content, the agent reads the relevant resource file and applies the specified values and rules. You must copy the template into your project and replace placeholders with your brand’s actual tokens and guidelines.

When to use it

  • Generating UI components or design assets that must match brand visuals
  • Writing user-facing copy, messages, or marketing content
  • Choosing libraries, patterns, or build tools to align with approved tech choices
  • Creating automated flows that output branded documents or emails
  • Reviewing or auditing design and implementation for brand compliance

Best practices

  • Always read the specific resource file for the task instead of guessing values
  • Keep design tokens authoritative and update them centrally when brand changes
  • Document any deviations and get approval before implementing exceptions
  • Version the resources alongside your application to track changes
  • Embed the skill in CI/linting checks to surface inconsistencies early

Example use cases

  • Generate a React component styled with exact color, font, and spacing from design-tokens.json
  • Produce marketing headings and microcopy that match the voice-tone.md guidelines
  • Select frontend libraries and folder structure that adhere to tech-stack.md constraints
  • Automate email templates using approved brand colors and tone for customer communications
  • Audit a new feature’s UI and content against the brand resources and report mismatches

FAQ

How do I customize this skill for my brand?

Copy the template folder into your project, rename it, and update resources/design-tokens.json, resources/tech-stack.md, and resources/voice-tone.md with your brand specifics.

Which file do I consult for exact colors or spacing?

Consult resources/design-tokens.json for authoritative color values, fonts, spacing, and other tokens.

What if a requested design element isn’t covered in the files?

Treat missing items as out-of-scope: add the new token to design-tokens.json and version the change, or request approval before making assumptions.