spuneiartur/brand-guidelines
next-js/skills/skills/brand-guidelines/SKILL.md
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
$ install --global
skillsauthnpx skillsauth add spuneiartur/claude-agent-specs brand-guidelinesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 18, 2026, 5:04 AM263.8s2 files scanned
SKILL.md
- name:
- brand-guidelines
- description:
- Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
- license:
- Complete terms in LICENSE.txt
Anthropic Brand Styling
Overview
To access Anthropic's official brand identity and style resources, use this skill.
Keywords: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, Anthropic brand, visual formatting, visual design
Brand Guidelines
Colors
Main Colors:
- Dark:
#141413- Primary text and dark backgrounds - Light:
#faf9f5- Light backgrounds and text on dark - Mid Gray:
#b0aea5- Secondary elements - Light Gray:
#e8e6dc- Subtle backgrounds
Accent Colors:
- Orange:
#d97757- Primary accent - Blue:
#6a9bcc- Secondary accent - Green:
#788c5d- Tertiary accent
Typography
- Headings: Poppins (with Arial fallback)
- Body Text: Lora (with Georgia fallback)
- Note: Fonts should be pre-installed in your environment for best results
Features
Smart Font Application
- Applies Poppins font to headings (24pt and larger)
- Applies Lora font to body text
- Automatically falls back to Arial/Georgia if custom fonts unavailable
- Preserves readability across all systems
Text Styling
- Headings (24pt+): Poppins font
- Body text: Lora font
- Smart color selection based on background
- Preserves text hierarchy and formatting
Shape and Accent Colors
- Non-text shapes use accent colors
- Cycles through orange, blue, and green accents
- Maintains visual interest while staying on-brand
Technical Details
Font Management
- Uses system-installed Poppins and Lora fonts when available
- Provides automatic fallback to Arial (headings) and Georgia (body)
- No font installation required - works with existing system fonts
- For best results, pre-install Poppins and Lora fonts in your environment
Color Application
- Uses RGB color values for precise brand matching
- Applied via python-pptx's RGBColor class
- Maintains color fidelity across different systems
Web / Next.js Application Branding
When applying brand guidelines to a web application or Next.js project, use these outputs instead of python-pptx:
CSS Variables
:root {
--brand-dark: #141413;
--brand-light: #faf9f5;
--brand-mid-gray: #b0aea5;
--brand-light-gray: #e8e6dc;
--brand-orange: #d97757;
--brand-blue: #6a9bcc;
--brand-green: #788c5d;
--font-heading: 'Poppins', Arial, sans-serif;
--font-body: 'Lora', Georgia, serif;
}
Tailwind CSS Configuration
Add to tailwind.config.js → theme.extend:
colors: {
primary: '#141413',
light: '#faf9f5',
muted: '#b0aea5',
accent: '#d97757',
'accent-blue': '#6a9bcc',
'accent-green': '#788c5d',
'metal-100': '#e8e6dc',
'metal-200': '#b0aea5',
},
fontFamily: {
heading: ['Poppins', 'Arial', 'sans-serif'],
body: ['Lora', 'Georgia', 'serif'],
},
Google Fonts Loading
Add to _document.js <Head>:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Lora:wght@400;500;600;700&display=swap" rel="stylesheet" />
Component-Level Application
{/* Heading with brand font */}
<h1 className="font-heading text-primary text-4xl font-bold">Brand Heading</h1>
{/* Body text with brand font */}
<p className="font-body text-primary leading-relaxed">Body text content</p>
{/* Accent elements */}
<button className="bg-accent text-white px-6 py-3 rounded-lg font-heading font-semibold">
Call to Action
</button>
{/* Light background section */}
<section className="bg-light py-16">
<div className="container mx-auto px-4">
{/* Content on light background */}
</div>
</section>
Related Skills
spuneiartur/template-skill
tools
VerifiedTrustedCommunity
Replace with description of the skill and when Claude should use it.
1SKILL.mdUpdated Jun 18, 2026
spuneiartur/website-speed-audit
tools
VerifiedTrustedCommunity
Comprehensive website performance audit and optimization skill. Identifies and automatically fixes performance issues including image optimization, video compression, lazy loading, Core Web Vitals, bundle size, and rendering strategy. Uses Lighthouse (via CLI or MCP when available), ffmpeg for media processing, and the project's existing Image component with blur-up lazy loading. Use this skill whenever the user mentions: website speed, page load time, performance audit, Core Web Vitals, Lighthouse, optimize images, compress videos, lazy loading, LCP, CLS, FID, INP, slow website, speed up, performance optimization, image compression, video optimization, blur placeholder, WebP conversion, media audit, bundle size, or wants to improve their website's loading performance. Also trigger when the user says "my site is slow", "optimize for speed", "reduce load time", "improve performance", or asks about image/video optimization in any context.
1SKILL.mdUpdated Jun 18, 2026
spuneiartur/webapp-testing
tools
VerifiedTrustedCommunity
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.
1SKILL.mdUpdated Jun 18, 2026
spuneiartur/web-artifacts-builder
tools
VerifiedTrustedCommunity
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
1SKILL.mdUpdated Jun 18, 2026