Configure Vercel's Geist font family in Next.js and Tailwind CSS environments.
npx skills add https://github.com/NagyVikt/codex-plugins --skill geist-nagyvikt
Please help me install this Agent Skill. Skill: geist Source: https://github.com/NagyVikt/codex-plugins/tree/main/plugins/vercel/skills/geist Command: npx skills add https://github.com/NagyVikt/codex-plugins --skill geist-nagyvikt
This skill resolves inconsistencies in typography and font configuration within Next.js applications by providing expert guidance on implementing Vercel's Geist font family.
Use the geist skill to configure Geist Sans and Geist Mono in my Next.js layout file.
High-intent search queries and answers about installing and using this skill.
To set up the Geist font in Next.js, use the next/font module to load Geist Sans and Geist Mono. This skill provides configuration instructions for font loading, CSS variable mapping, and applying typography hierarchies within your layout file.
Yes, you can use Geist font with Tailwind CSS by mapping the generated font CSS variables to your Tailwind configuration. This ensures consistent visual hierarchy and seamless design system application across modern web interfaces.
The best way to prevent layout shift when loading Geist fonts is utilizing the next/font module for zero-layout-shift rendering. This skill configures font loading to satisfy requirements for stable visual rendering.
CSS variable mapping for Geist Sans and Geist Mono works by exposing the loaded fonts as CSS variables within your Next.js layout. You can then apply these variables directly in your Tailwind CSS classes to maintain a consistent typography hierarchy.
Use Geist Mono instead of Geist Sans for data-heavy metrics and technical displays within your web interface. This skill guides the configuration of both fonts to ensure a professional, high-signal dashboard experience.
Yes, the Geist skill supports font integration for dashboards by configuring Geist Sans for body text and Geist Mono for data-heavy metrics. This ensures a professional, high-signal interface with zero-layout-shift rendering.
petbrainsConfigure Google Fonts typography for Next.js and Tailwind projects.
jeremyspoffordEnforce consistent UI design with an 8px grid and Tailwind CSS configuration.
vercel-labsConfigure Geist Sans, Mono, and Pixel fonts in Next.js projects.
vercelConfigure Geist Sans, Mono, and Pixel fonts in Next.js layouts with next/font and CSS variables.
