Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

openai/geist

Name: geist
Author: openai

plugins/vercel/skills/geist/SKILL.md

npx skillsauth add openai/plugins geist

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Geist — Vercel's Font Family

You are an expert in Geist (v1.7.0), Vercel's open-source font family designed for developers and interfaces. It includes Geist Sans (a modern sans-serif), Geist Mono (a monospace font optimized for code), and Geist Pixel (a display typeface with five pixel-based variants for decorative use in headlines and logos).

Installation

npm install geist

Usage with Next.js (next/font)

App Router

// app/layout.tsx
import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
      <body className={GeistSans.className}>
        {children}
      </body>
    </html>
  )
}

With Tailwind CSS

// app/layout.tsx
import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-geist-sans)'],
        mono: ['var(--font-geist-mono)'],
      },
    },
  },
}
export default config

Then use in components:

<p className="font-sans">Geist Sans text</p>
<code className="font-mono">Geist Mono code</code>

CSS Variables

Geist fonts expose CSS custom properties:

| Variable | Font | |---|---| | --font-geist-sans | Geist Sans | | --font-geist-mono | Geist Mono |

Use them in CSS:

body {
  font-family: var(--font-geist-sans);
}

code, pre {
  font-family: var(--font-geist-mono);
}

Font Weights

Both Geist Sans and Geist Mono support these weights:

| Weight | Value | |---|---| | Thin | 100 | | Extra Light | 200 | | Light | 300 | | Regular | 400 | | Medium | 500 | | Semi Bold | 600 | | Bold | 700 | | Extra Bold | 800 | | Black | 900 |

Typography Direction for Geist

Geist is not just a font import. In the Vercel stack it is the default typography system for interfaces that feel precise, calm, and high-signal.

What good looks like

Headlines are crisp, tightly tracked, and decisive
Body copy is readable and restrained; secondary text is muted, not washed out
Numbers, commands, IDs, timestamps use Geist Mono for precision
Typography carries hierarchy first; color and decoration come second

Default type recipes

<h1 className="text-4xl font-medium tracking-[-0.04em]">Large page title</h1>
<p className="text-sm leading-6 text-muted-foreground">Supporting copy</p>
<div className="font-mono text-[12px] text-muted-foreground tabular-nums">Dense metadata</div>
<h2 className="text-lg tracking-tight">Section heading</h2>
<h2 className="text-xl tracking-tight">Large section heading</h2>
<label className="text-sm">UI label</label>

Avoid defaulting entire interfaces to text-base.

Where to use each family

Geist Sans: navigation, body copy, buttons, headings, forms, tables, dialogs
Geist Mono: code, shortcuts, terminal output, commit hashes, invoice amounts, metrics, timestamps, ENV keys, feature flags
Geist Pixel: one accent moment only - hero wordmark, campaign heading, empty-state label. Never body text or settings UI.

Anti-patterns

Mixing Geist with multiple unrelated font families
Using Geist Mono for long paragraphs
Using Geist Pixel for more than one or two focal moments
Making every heading bold (Geist looks strongest with restrained weight and tight tracking)
Letting secondary text get so faint that hierarchy disappears

Subset Configuration

Optimize font loading by specifying subsets:

import { GeistSans } from 'geist/font/sans'

// GeistSans automatically uses the 'latin' subset
// For additional subsets, configure in next.config.js

Geist Pixel (Feb 6, 2026)

Geist Pixel is a bitmap-inspired display typeface family designed for headlines, logos, and decorative use. It ships five variants, each built on a different geometric primitive:

| Variant | Description | |---|---| | Geist Pixel Square | Square-based pixel grid | | Geist Pixel Grid | Dense grid pattern | | Geist Pixel Circle | Circular dot matrix | | Geist Pixel Triangle | Triangular pixel forms | | Geist Pixel Line | Line-based pixel strokes |

Geist Pixel is intended for display sizes only — use Geist Sans for body text and Geist Mono for code.

Coding Ligatures (v1.7.0)

Coding ligatures are no longer enabled by default. They have been moved from contextual alternates to Stylistic Set 11 (SS11). If you rely on coding ligatures in your editor or terminal, enable SS11 explicitly:

VS Code: "editor.fontLigatures": "'ss11'"
CSS: font-feature-settings: 'ss11' 1;

Cyrillic Support (v1.7.0)

Geist 1.7.0 includes a redesigned Cyrillic script for all Geist Sans and Geist Mono styles.

Key Points

Optimized for Next.js — works seamlessly with next/font for zero-layout-shift font loading
Three families — Geist Sans for UI text, Geist Mono for code, Geist Pixel for decorative display
CSS variables — --font-geist-sans and --font-geist-mono for flexible styling
Variable font — single file supports all weights (100–900)
Self-hosted — fonts are bundled with your app, no external requests
Import paths — use geist/font/sans and geist/font/mono (not geist/font)
Coding ligatures — opt-in via Stylistic Set 11 (no longer default)

Official Resources

Geist Font GitHub
Geist Design System

openai/geist

plugins/vercel/skills/geist/SKILL.md

Expert guidance for Geist, Vercel's default typography system and font family for precise Next.js interfaces. Use when configuring Geist Sans, Geist Mono, or Geist Pixel, setting up font imports, or applying Vercel typography and aesthetic guidance.

1,087 stars

testing

Updated May 12, 2026

$ install --global

skillsauth

npx skillsauth add openai/plugins geist

Install 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.

Scanners Passed

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: May 12, 2026, 5:27 AM159.4s2 files scanned

SKILL.md

name:: geist
description:: Expert guidance for Geist, Vercel's default typography system and font family for precise Next.js interfaces. Use when configuring Geist Sans, Geist Mono, or Geist Pixel, setting up font imports, or applying Vercel typography and aesthetic guidance.
priority:: 4
- "https:: //github.com/vercel/geist-font
sitemap:: https://vercel.com/sitemap/docs.xml

Geist — Vercel's Font Family

Installation

npm install geist

Usage with Next.js (next/font)

App Router

// app/layout.tsx
import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
      <body className={GeistSans.className}>
        {children}
      </body>
    </html>
  )
}

With Tailwind CSS

// app/layout.tsx
import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-geist-sans)'],
        mono: ['var(--font-geist-mono)'],
      },
    },
  },
}
export default config

Then use in components:

<p className="font-sans">Geist Sans text</p>
<code className="font-mono">Geist Mono code</code>

CSS Variables

Geist fonts expose CSS custom properties:

| Variable | Font | |---|---| | --font-geist-sans | Geist Sans | | --font-geist-mono | Geist Mono |

Use them in CSS:

body {
  font-family: var(--font-geist-sans);
}

code, pre {
  font-family: var(--font-geist-mono);
}

Font Weights

Both Geist Sans and Geist Mono support these weights:

| Weight | Value | |---|---| | Thin | 100 | | Extra Light | 200 | | Light | 300 | | Regular | 400 | | Medium | 500 | | Semi Bold | 600 | | Bold | 700 | | Extra Bold | 800 | | Black | 900 |

Typography Direction for Geist

Geist is not just a font import. In the Vercel stack it is the default typography system for interfaces that feel precise, calm, and high-signal.

What good looks like

Headlines are crisp, tightly tracked, and decisive
Body copy is readable and restrained; secondary text is muted, not washed out
Numbers, commands, IDs, timestamps use Geist Mono for precision
Typography carries hierarchy first; color and decoration come second

Default type recipes

<h1 className="text-4xl font-medium tracking-[-0.04em]">Large page title</h1>
<p className="text-sm leading-6 text-muted-foreground">Supporting copy</p>
<div className="font-mono text-[12px] text-muted-foreground tabular-nums">Dense metadata</div>
<h2 className="text-lg tracking-tight">Section heading</h2>
<h2 className="text-xl tracking-tight">Large section heading</h2>
<label className="text-sm">UI label</label>

Avoid defaulting entire interfaces to text-base.

Where to use each family

Geist Sans: navigation, body copy, buttons, headings, forms, tables, dialogs
Geist Mono: code, shortcuts, terminal output, commit hashes, invoice amounts, metrics, timestamps, ENV keys, feature flags
Geist Pixel: one accent moment only - hero wordmark, campaign heading, empty-state label. Never body text or settings UI.

Anti-patterns

Mixing Geist with multiple unrelated font families
Using Geist Mono for long paragraphs
Using Geist Pixel for more than one or two focal moments
Making every heading bold (Geist looks strongest with restrained weight and tight tracking)
Letting secondary text get so faint that hierarchy disappears

Subset Configuration

Optimize font loading by specifying subsets:

import { GeistSans } from 'geist/font/sans'

// GeistSans automatically uses the 'latin' subset
// For additional subsets, configure in next.config.js

Geist Pixel (Feb 6, 2026)

Geist Pixel is a bitmap-inspired display typeface family designed for headlines, logos, and decorative use. It ships five variants, each built on a different geometric primitive:

Geist Pixel is intended for display sizes only — use Geist Sans for body text and Geist Mono for code.

Coding Ligatures (v1.7.0)

VS Code: "editor.fontLigatures": "'ss11'"
CSS: font-feature-settings: 'ss11' 1;

Cyrillic Support (v1.7.0)

Geist 1.7.0 includes a redesigned Cyrillic script for all Geist Sans and Geist Mono styles.

Key Points

Optimized for Next.js — works seamlessly with next/font for zero-layout-shift font loading
Three families — Geist Sans for UI text, Geist Mono for code, Geist Pixel for decorative display
CSS variables — --font-geist-sans and --font-geist-mono for flexible styling
Variable font — single file supports all weights (100–900)
Self-hosted — fonts are bundled with your app, no external requests
Import paths — use geist/font/sans and geist/font/mono (not geist/font)
Coding ligatures — opt-in via Stylistic Set 11 (no longer default)

Official Resources

Geist Font GitHub
Geist Design System

Related Skills

openai/provision-droplet

development

VerifiedTrustedCommunity

Use when the user wants to spin up / create / launch / provision a DigitalOcean droplet (or "a remote dev box on DO") and connect to it from Codex as a remote SSH workspace.

3,575SKILL.mdUpdated Jun 26, 2026

openai/provision-droplet

openai/teams

data-ai

VerifiedTrustedCommunity

Search through Microsoft Teams chats or channels, triage unread or recent activity, draft follow-ups, and manage Planner tasks through connected Teams data.

3,575SKILL.mdUpdated May 9, 2026

openai/figma-use-motion

tools

VerifiedTrustedCommunity

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.

3,511SKILL.mdUpdated Jun 25, 2026

openai/figma-use-motion

openai/figma-swiftui

development

VerifiedTrustedCommunity

SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.

3,511SKILL.mdUpdated Jun 25, 2026

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/openai/plugins.git

# Copy into Claude Code skills folder (global)
cp -r plugins/plugins/vercel/skills/geist ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

openai/plugins

1,087 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT