geist-design

Check UI code compliance with Vercel's Geist Design System.

Updated Jun 14, 2026
One-click install
npx skills add https://github.com/baan-press/baan --skill geist-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: geist-design
Source: https://github.com/baan-press/baan/tree/main/.claude/skills/geist-design
Command: npx skills add https://github.com/baan-press/baan --skill geist-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill simplifies the process of ensuring that UI code complies with the Geist Design System (Vercel), providing an efficient way to maintain consistency and adhere to design standards.

Core Features & Use Cases

  • Geist Design System Compliance: Automates the checking of UI code for compliance with Vercel's Geist Design System.
  • File-based Reviews: Allows you to check any number of files or patterns against Geist rules.
  • Guideline Integration: Fetches and uses the latest Geist guidelines to review the code.
  • Quick Output: Outputs findings in a format that includes the file, line, and suggested fix, enabling rapid identification and correction of non-compliant elements.

Quick Start

Run the geist-design skill on your code with the command 'geist-design <file-or-pattern>'.

Frequently Asked Questions about geist-design

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

FAQPage Schema
How do I automate Geist Design System compliance checks for my UI code?

Check UI code against Vercel's Geist Design System by running the skill with a file path or pattern. It fetches the latest guidelines and reviews your specified files for typography, color, spacing, and component adherence.

How does the Geist Design System reviewer identify non-compliant UI elements?

The Geist Design System reviewer identifies non-compliant elements by fetching the latest Geist guidelines and scanning your code. It outputs findings with the specific file, line number, and suggested fixes for rapid correction.

Can I review multiple UI files at once for Geist Design System compliance?

Yes, you can review multiple UI files at once for Geist Design System compliance. The skill accepts any number of files or patterns as input to check against Vercel's Geist rules.

What design elements does a Vercel Geist code review typically cover?

A Vercel Geist code review covers typography, color, spacing, and components. The compliance check ensures your UI code adheres to these specific design system rules fetched from the latest Geist guidelines.

Do I need to manually provide Geist guidelines to review my web design code?

No, you do not need to manually provide Geist guidelines to review your web design code. The skill automatically fetches and integrates the latest Geist guidelines to evaluate your UI files.