skills.rest
AarnavBaddam
AarnavBaddamCOMMUNITY
Explore all skills by this author →
GitHub

geist

Configure Geist Sans, Mono, and Pixel fonts in Next.js applications.

Updated Jul 31, 2026
Search Tags:#typography#next.js#tailwind css#vercel#fonts#css variables#geist
One-click install
npx skills add https://github.com/AarnavBaddam/skills --skill geist-aarnavbaddam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: geist
Source: https://github.com/AarnavBaddam/skills/tree/main/geist
Command: npx skills add https://github.com/AarnavBaddam/skills --skill geist-aarnavbaddam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires geist.

What problem does it solve? Setting up Vercel's Geist font family correctly in a Next.js project involves knowing the right import paths, CSS variable wiring, Tailwind integration, and typography conventions, which are easy to get wrong without guidance. ## Core Features & Use Cases - Font Setup for Next.js: Import Geist Sans and Geist Mono via geist/font/sans and geist/font/mono with next/font for zero-layout-shift loading. - Tailwind and CSS Variable Integration: Map --font-geist-sans and --font-geist-mono into Tailwind fontFamily config or plain CSS. - Typography Direction: Apply Vercel-style type recipes, weight scales (100-900), and guidance on when to use Geist Sans, Mono, or Pixel. - Use Case: You are building a Next.js dashboard and want Vercel's typography system. Use this Skill to wire up Geist fonts in app/layout.tsx, configure Tailwind, and apply correct heading and mono-text patterns. ## Quick Start Set up Geist Sans and Geist Mono in my Next.js app layout and configure Tailwind to use them as the default font families.

Frequently Asked Questions about geist

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Geist font to a Next.js app?▼

Install the geist package with npm, then import GeistSans from 'geist/font/sans' and GeistMono from 'geist/font/mono' in app/layout.tsx. Apply their .variable or .className properties to the html or body element.

How to use Geist font with Tailwind CSS?▼

Add the font variables to your html element in the layout, then extend fontFamily in tailwind.config.ts with 'var(--font-geist-sans)' for sans and 'var(--font-geist-mono)' for mono. Use font-sans and font-mono classes in components.

What is the difference between Geist Sans, Geist Mono, and Geist Pixel?▼

Geist Sans is for UI text like navigation, body copy, and headings. Geist Mono is for code, timestamps, and metrics. Geist Pixel is a decorative display typeface with five variants, intended only for headlines or logos.

Why are coding ligatures not working in Geist Mono?▼

Since Geist v1.7.0, coding ligatures are no longer enabled by default and moved to Stylistic Set 11. Enable them with 'editor.fontLigatures': "'ss11'" in VS Code or font-feature-settings: 'ss11' 1 in CSS.

Does Geist font support Cyrillic characters?▼

Yes, Geist v1.7.0 includes a redesigned Cyrillic script covering all Geist Sans and Geist Mono styles. Geist Sans also uses the latin subset by default when loaded through next/font.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

geist

Configures Geist Sans, Mono, and Pixel fonts in Next.js applications with Tailwind CSS.

Official
Basic
jiaiyanjiaiyan
21

element-plus-design-typography

Define typography conventions and CSS variables for Element Plus components.

Community
Intermediate
sanky369sanky369
29

visual-hierarchy-refactoring

Establish consistent visual hierarchy using size, weight, and contrast.

Community
Basic
nicepkgnicepkg
276

font-pairing-suggester

Recommend Google Fonts pairings with visual hierarchy examples for design projects.

Official
Basic