Brand Yml

Create a _brand.yml file for Quarto projects that captures brand colors, typography, and identity in a structured YAML format. Use this skill whenever the user mentions _brand.yml, brand.yml, Quarto branding, brand identity for Quarto, or wants consistent colors and fonts across Quarto documents, websites, presentations, or Shiny apps. Also trigger when the user asks to extract brand colors or fonts from a website, PDF brand guidelines, or style guide for use with Quarto. Even if the user just says "set up my brand" or "make my Quarto docs match our brand," this is the right skill.

7 stars 2 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add stephenturner/skill-brand-yml --skill brand-yml

Manual install

git clone --depth 1 https://github.com/stephenturner/skill-brand-yml.git /tmp/skill-brand-yml
mkdir -p ~/.claude/skills
cp -r /tmp/skill-brand-yml/. ~/.claude/skills/brand-yml

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# brand-yml: Create Brand Identity Files for Quarto

Generate a valid `_brand.yml` file from brand guidelines, a website, a description, or an existing file that needs refinement.

## Before You Start

Read the full specification:

```
Read references/brand-yml-spec.md
```

This reference contains every allowed field, syntax variants, and the complete annotated example. Consult it whenever you are unsure about field names, nesting, or allowed values.

## Workflow

### 1. Gather Brand Information

Determine the input source. The user may provide one or more of these:

**Website URL** -- Use `web_fetch` to retrieve the page. Extract CSS custom properties, meta theme colors, prominent hex values, font-family declarations, and Open Graph metadata. If the page links to a CSS file, fetch that too. Look for Google Fonts or Bunny Fonts `<link>` tags.

**Uploaded brand guidelines (PDF, image, or document)** -- Read the uploaded file. Extract named colors (with hex values), font families, usage rules (which font is for headings vs. body), and logo file references.

**Manual description** -- The user describes their colors, fonts, and identity in plain text. Ask clarifying questions only if critical information is missing (primary color and at least one font are the minimum viable brand).

**Existing `_brand.yml`** -- The user uploads or pastes a file to fix, extend, or modernize. Validate it against the spec, identify issues, and propose corrections.

Read the full skill on GitHub

Details

Skill name: brand-yml
Repository: stephenturner/skill-brand-yml
License: MIT
Repo updated: 26 February 2026

FAQ

What does the Brand Yml skill do?

How do I install the Brand Yml skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add stephenturner/skill-brand-yml --skill brand-yml. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Brand Yml popular?

It lives in stephenturner/skill-brand-yml, which has 7 GitHub stars and 2 forks.

Related skills

Motion Ref

joepUI/motion-ref-skill

UI 动效参考库，帮你给产品加上合适的动画。不需要懂动效 — 描述你的产品场景（页面加载慢、用户点了没反应、想让页面高级一点），直接推荐方案 + 代码。触发词：页面没动画、交互没反馈、怎么加动效、让页面动起来、加载太慢怎么办、想让产品高级一点、motion ref。

Frontend & Design

Web Design Taste

Alice59357/web-design-taste

帮助没有设计背景、不懂技术术语的用户做出设计师级高质量网页。用户只需用大白话描述需求，通过选择预设风格卡片（而非描述设计），即可产出完整可运行的网页。每当用户提到"做个网页"、"做个网站"、"落地页"、"作品集"、"介绍页"、"官网"、"销售页"，或表达"想要好看的页面但不知道怎么形容"时，必须使用此技能。即使用户没有提供任何设计要求，也要使用此技能来引导。

Frontend & Design

Compliance Auditor

FuzulsFriend/compliance-auditor

Use this skill whenever the user asks for a privacy policy, terms of service, cookie policy, accessibility statement, GDPR / CCPA / COPPA / Israel PPL / UK GDPR review, sub-processor list, or any "make my site compliant" task. Also trigger when the user mentions Privacy Policy, Terms, ToS, ToU, "legal pages", compliance audit, data processing agreement, DPA, DPIA, consent flow, cookie banner, CAN-SPAM footer, data retention, breach-notification, or regulator names (EDPB, ICO, CPPA, FTC, Israeli PPA). The skill runs a deterministic multi-agent pipeline - researches primary-source regulator requ

Frontend & Design

UI Craft

Achref23illi/ui-craft

Make a mobile UI look and feel like a shipped app. Rules with numbers, 29 screen recipes (plus 200 measured ones), a fast screenshot review and lessons from a real redesign, grounded in 4,500 iOS screens from 78 apps (Spotify, Airbnb, Instagram, Apple Music, Wise, Coinbase, Google Maps, Uber Eats, Halide, Notion…). Use before designing or restyling any mobile screen (React Native, Expo, SwiftUI, Flutter, mobile web), when reviewing screenshots for "does this look like a real app", or when you need a reference for a pattern (feed, player, editor, sheet, paywall, settings, onboarding, empty stat

Frontend & Design

Human Experience

andrew-shwetzer/human-experience

Vision-powered UX simulation engine. Opens UIs in a real browser, takes screenshots, clicks through flows, records video, and analyzes everything through Claude's vision + empirical UX research. Replaces a 1000-person user testing panel with automated multi-viewport, multi-persona, interactive analysis. Karpathy-style ratchet loop for iterative perfection.

Frontend & Design

Terminal UI Design System

chyinan/terminal-ui-design-system

Create terminal-inspired UI interfaces with macOS-style window decorations, monospace typography, and a warm color palette. Use this skill when building developer tools, code marketplaces, technical documentation sites, or any interface that benefits from a terminal/command-line aesthetic. Provides complete design system specifications including color palette, typography, spacing, components, and CSS implementation details.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.