> brand-guidelines
Apply brand colors and typography to artifacts. Use when brand colors, style guidelines, visual formatting, or company design standards apply. Ensures consistency across branded content.
curl "https://skillshub.wtf/MoizIbnYousaf/Ai-Agent-Skills/brand-guidelines?format=md"Brand Guidelines Application
Purpose
Apply consistent brand styling to any artifact: documents, presentations, web pages, or marketing materials.
Core Brand Elements
Colors
Define your brand palette with CSS variables:
:root {
--brand-primary: #1a73e8;
--brand-secondary: #34a853;
--brand-accent: #ea4335;
--brand-dark: #202124;
--brand-light: #f8f9fa;
--brand-text: #3c4043;
--brand-text-muted: #5f6368;
}
Typography
/* Primary font for headings */
--font-display: 'Product Sans', 'Google Sans', system-ui;
/* Body font */
--font-body: 'Roboto', 'Inter', -apple-system, sans-serif;
/* Monospace for code */
--font-mono: 'Roboto Mono', 'Fira Code', monospace;
/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
Spacing
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
Application Examples
Buttons
.btn-primary {
background: var(--brand-primary);
color: white;
padding: var(--space-2) var(--space-4);
border-radius: 4px;
font-family: var(--font-body);
font-weight: 500;
}
Cards
.card {
background: white;
border: 1px solid var(--brand-light);
border-radius: 8px;
padding: var(--space-6);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
Headers
h1 {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: var(--brand-dark);
font-weight: 500;
}
Document Templates
Google Docs
- Heading 1: Display font, 24pt, Brand Dark
- Heading 2: Display font, 18pt, Brand Primary
- Body: Body font, 11pt, Brand Text
- Links: Brand Primary, underlined
Presentations
- Title slides: White text on Brand Primary background
- Content slides: Brand Dark text on white
- Accent elements: Brand Secondary or Accent
Best Practices
- Consistency: Use exact brand colors, never approximate
- Contrast: Ensure 4.5:1 minimum for text readability
- Hierarchy: Use size and weight to establish importance
- Whitespace: Generous spacing feels premium
- Logo usage: Maintain clear space around logo
> related_skills --same-repo
> xlsx
Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for creating new spreadsheets, reading/analyzing data, modifying existing spreadsheets, or recalculating formulas.
> webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
> video-downloader
Downloads videos from YouTube and other platforms for offline viewing, editing, or archival. Handles various formats and quality options.
> theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.