New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Vercel Geist Design System

by syhily in syhily/kobato

Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix.

MITAuto-check passedFrontend & Design

Install Vercel Geist Design System

skills CLI
$ npx skills add syhily/kobato --skill vercel-geist-design-system -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install syhily/kobato vercel-geist-design-system --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/syhily/kobato.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vercel-geist-design-system .claude/skills/vercel-geist-design-system && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
vercel-geist-design-system
GitHub stars
114
Token cost
~3.3k tokens
SKILL.md length
1,504 words
Files
11 (incl. references)
Skills in repo
2
Repo updated
First seen
Licence
MIT

At a glance

Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix.

  • Works in 9 steps: Identify the UI surface and scope:… → Select the matching Vercel/Geist… → Inspect the project before designing:… → …
  • Responsive layout
  • SKILL.md covers Reference Loading Contract, Trigger Policy, Content, IA, And Brand… and Operating Loop, plus 2 more sections
  • Reaches vercel.com

What it does

Vercel Geist Design System is an agent skill from syhily/kobato. Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix. Use for typography, spacing, color, materials, components, app shells, dashboards, forms, tables, dialogs, states, responsive layout, and UI polish. Community-authored, not official Vercel. Trigger for Geist, Vercel-style UI, or generic clean/modern/premium/polished SaaS/developer-product visuals when no other final visual system is…

Its SKILL.md is about 3.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 11 other files, including reference files (for example `references/companion-routing.md`, `references/component-system.md` and `references/foundation-and-style-rules.md`).

It sits in Frontend & Design, covering Design systems. It works with Vercel, Vite, Astro and Next.js. The repository describes itself as: An open source blog system for the writers. The licence is MIT.

When your agent uses it

  • Responsive layout
  • Vercel-style UI
  • Generic clean/modern/premium/polished SaaS/developer-product visuals when no other final visual system is requested

Example prompts

  • “/vercel-geist-design-system”

Workflow steps

9 steps, taken from the first numbered list in SKILL.md.

  1. Identify the UI surface and scope: greenfield app, full redesign, narrow
  2. Select the matching Vercel/Geist reference archetype before designing. Do
  3. Inspect the project before designing: framework, Tailwind version, component
  4. Load the required references above.
  5. Open current official Vercel pages for every required foundation, token
  6. Complete the Foundation Gate before screen work: fonts, semantic color
  7. Map every UI requirement to an official Geist foundation/component,
  8. Implement through shared tokens and primitives. Use Radix/shadcn only as
  9. Verify with the Taste Gate, revise failures, then report evidence and

What it can do on your machine

Read from SKILL.md and the folder at commit 534dd92. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • vercel.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Vercel Geist Design System loads about 3.3k tokens when it runs, and up to ~36k if it reads all its reference files. Until then it costs about 153 tokens; SKILL.md has 1,504 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~153
When it runs · the whole SKILL.md, loaded when a task matches
~3.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~36k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from syhily/kobato at commit 534dd92, republished under its MIT licence (© syhily). 1,504 words, ~3,286 tokens.

Download SKILL.mdSave it as .claude/skills/vercel-geist-design-system/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
vercel-geist-design-system
description
Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix. Use for typography, spacing, color, materials, components, app shells, dashboards, forms, tables, dialogs, states, responsive layout, and UI polish. Community-authored, not official Vercel. Trigger for Geist, Vercel-style UI, or generic clean/modern/premium/polished SaaS/developer-product visuals when no other final visual system is requested. Skip non-visual work unless it materially changes rendered UI.
metadata.community
true
metadata.official
false
metadata.short-description
Unofficial Vercel Geist visual system for clean, polished SaaS/developer-product UI; skip non-visual work and explicit alternate visual systems
metadata.sources
https://vercel.com/design.md, https://vercel.com/design.dark.md, https://vercel.com/font, https://vercel.com/design/guidelines…

Vercel Geist Design System

Use this community skill to make interfaces feel like they belong in Vercel's Geist design system: precise, calm, high-contrast, developer-focused, and production-ready. Official Vercel pages are the source of truth. This is not official Vercel guidance and is not permission to copy Vercel product screens.

Reference Loading Contract

This compact file is the operating contract. Detailed rules live in references/; load only what the task needs, but never skip a required reference because this summary seems sufficient.

  • Always load references/source-of-truth-gate.md for triggered visual work before claiming Geist, strict Geist, docs-aligned Geist, source-of-truth alignment, or Vercel Taste Gate passage.
  • Load references/foundation-and-style-rules.md before creating, restyling, redesigning, reviewing, or materially changing rendered UI.
  • Load references/official-reference-map.md when mapping foundations, brand/assets, or components to official Vercel URLs.
  • Load references/vercel-design.md when exact bundled light-theme token, component-default, motion, layout, focus, or voice values are needed. Load references/vercel-design-dark.md for the same dark-theme values.
  • Load references/component-system.md before components, primitives, component states, custom compositions, or component-page mapping.
  • Load references/trust-brand-and-asset-rules.md before certification/trust credential displays, official marks, iconography, logos, badges, or brand asset work.
  • Load references/motion-performance-copy-rules.md before UI copy, performance-relevant UI, motion/interaction, or Web Interface Guidelines overlay work.
  • Load references/companion-routing.md only when another Skills.sh entry, framework helper, verification helper, tool, or conditional surface could be relevant.
  • Load references/taste-and-verification.md before final audit, screenshots, interaction checks, or final response for triggered visual work.

Trigger Policy

Trigger this skill when a task creates, changes, critiques, specifies, or materially directs rendered frontend UI and the user asks for Geist, Vercel-style UI, or generic clean, modern, premium, beautiful, polished SaaS/developer-product visual design with no competing visual authority.

Do not trigger for TypeScript fixes, data wiring, API/state changes, analytics, tests, build tooling, dependency work, or behavior-only accessibility fixes unless rendered UI is created or materially changed.

An explicit non-Geist final visual system, brand style, supplied final non-Geist design artifact, game style, or illustrative art direction overrides this skill. Domain, industry, product, API, integration, content subject, Tailwind, shadcn, Radix, or component-library mentions are not visual-system overrides or trigger signals by themselves.

When triggered, Geist owns the visual system. Ignore generic frontend-design pushes toward bold, unforgettable, maximal, ornamental, or surprising visuals unless the user explicitly overrides Geist.

Content, IA, And Brand Preservation Gate

When applying Geist to an existing site, app, dashboard, docs surface, or product, preserve user-approved content, brand-defining visual moments, information architecture, route destinations, and external/internal link intent unless the user explicitly asks to change them or they create a concrete accessibility, performance, security, correctness, or legal/trademark problem.

Restyle before replacing. If an existing hero effect, animation, certification display, blog link, footer, contact path, navigation pattern, or route appears intentional, adapt it to Geist constraints instead of deleting, hiding, redirecting, duplicating, or inventing alternatives. If intent is unclear, report the tradeoff and keep the existing behavior.

Do not invent new CTAs, contact details, destinations, routes, issuer logos, certification labels, or navigation/footer sections solely to satisfy Geist, no-dead-end, app-shell, or primary-action guidance. Use existing product actions, existing routes, and existing content first.

For certification displays, preserve certification-specific official badge/logo artwork when present. Do not replace it with generic certificate imagery, certificate seals, course-completion marks, issuer/company logos, text labels, text monograms, or Geist Badge/Pill UI treatments.

Operating Loop

  1. Identify the UI surface and scope: greenfield app, full redesign, narrow workflow, marketing page, dashboard, settings, table/list, command workflow, docs, or component library.
  2. Select the matching Vercel/Geist reference archetype before designing. Do not treat the Vercel homepage as the default target for every Vercel-style request. For generic Vercel-style or Geist requests, use the official Geist docs plus 1-3 current Vercel surfaces that match the requested surface type when those pages are available. Use the homepage mainly for homepage, hero, launch, or broad marketing composition. For dashboards, docs, settings, forms, tables, pricing, portfolios, app shells, and component libraries, inspect comparable Vercel/Geist surfaces and components instead.
  3. Inspect the project before designing: framework, Tailwind version, component library, icon library, font setup, theme tokens, existing primitives, routing, package manager, and validation commands.
  4. Load the required references above.
  5. Open current official Vercel pages for every required foundation, token source, guideline, brand/assets, and mapped component before implementation or strict claims. https://vercel.com/design.md is the canonical compact token/default source for light theme work; also open https://vercel.com/design.dark.md when dark mode or theme switching is in scope.
  6. Complete the Foundation Gate before screen work: fonts, semantic color tokens, typography utilities, material/radius utilities, focus rings, app shell, primitives, shared states, and screen composition rules.
  7. Map every UI requirement to an official Geist foundation/component, official composition, or constrained custom composition before inventing patterns.
  8. Implement through shared tokens and primitives. Use Radix/shadcn only as behavior/accessibility infrastructure after Geist mapping; their visual defaults are not design authority.
  9. Verify with the Taste Gate, revise failures, then report evidence and blockers honestly.
Show full SKILL.md (707 more words)Show less

Non-Negotiables

Official docs are binding design input, not optional inspiration. https://vercel.com/design.md is required for every triggered visual task because it is the official compact Geist token/default source for colors, typography, spacing, rounded values, component defaults, layout rhythm, elevation, motion, focus, and content voice. https://vercel.com/design.dark.md is required when dark mode, theme switching, or dark screenshots are in scope. Bundled snapshots in references/vercel-design.md and references/vercel-design-dark.md exist so agents can inspect exact token tables and defaults locally, but strict/docs-verified claims still require opening the current live official documents because those pages are alpha. Treat design.md as the foundation source. Use https://vercel.com/design/guidelines for rendered UI interaction, accessibility, state, browser, and polish checks. Use https://vercel.com/font when installing/configuring Geist fonts or using Pixel. Use Geist Introduction, Colors, Typography, or Materials only when the user asks for that page's detail, design.md lacks a needed detail, or a component/page decision depends on it. Brand/logo work requires https://vercel.com/geist/brands. Component work requires every matching official component page from references/official-reference-map.md or the live Geist component navigation.

If required official docs cannot be loaded after every available browsing/docs tool is attempted in the current turn, state attempted URLs, tools, and exact failures. Local rules then become advisory only, cannot satisfy Docs Evidence, and cannot support strict/docs-verified claims. Label affected work local Geist fallback, not docs-verified.

Final responses for triggered visual work must include the page-specific Docs Evidence table defined in references/source-of-truth-gate.md. Do not claim strict Geist, docs-aligned Geist, official Geist compliance, source-of-truth alignment, or Vercel Taste Gate passage if any required applied row is missing, blocked, lacks an exact section/anchor, or lacks a short page-specific quote that affected a concrete decision. Strict claims also require screenshot and interaction checks when those checks are possible.

Geist must own the relevant visual system. Do not create isolated Vercel-looking widgets inside unrelated UI. Broad work covers app shell, navigation, pages, forms, data views, dialogs, toasts, command menus, marketing sections, and empty/loading/error states across all routable surfaces and shared states. Narrow work covers the requested workflow plus touched primitives; say whole app not verified unless every route/surface was audited.

Use Geist Sans globally, Geist Mono for code/technical identifiers, and Geist Pixel only for a constrained display/brand accent when justified. Keep ordinary product UI neutral-first, high-contrast, compact, semantic, accessible, and state-driven. Typography and spacing should carry hierarchy; color should be functional; borders should structure the UI; motion should be subtle and tied to state.

Use a grid system by default, not a grid background: CSS grid/flex, columns, rows, gutters, aligned cards, bordered cells, tables, dividers, spacing, and stable responsive spans are normal Geist layout. Solid page and component backgrounds are the default. Do not add decorative visible grid backgrounds, graph-paper lines, blueprint lines, or page-wide repeating gradients from the words grid layout, dashboard grid, feature grid, Vercel-style grid, or from an agent-selected Vercel reference. Add visible guide/cell/grid background art only when the user explicitly asks for visible grid art/backgrounds/cell guides, a user-supplied design clearly shows them, or the requested UI surface is the official Geist Grid component. Scope that art to the requested surface and make it a real content grid with aligned cells; never place it behind unrelated hero copy, product cards, tables, credentials, contact cells, app shells, or page bodies. Full-page visible grid backgrounds require an explicit full-page request.

Skills.sh companions are routing helpers only. They never replace official Geist docs, never define Geist visuals, and never satisfy Docs Evidence.

Verification Contract

Before final response for triggered visual work, run the Vercel Taste Gate in references/taste-and-verification.md: route inventory, current official docs, Foundation Gate, component mapping, Web Interface Guidelines audit, screenshots, interaction checks, responsive checks, anti-pattern scan, and revision loop.

If a local app can run, inspect mobile, laptop, desktop, and ultra-wide viewports plus changed states such as menus, dialogs, empty states, loading states, errors, and dense data views. If screenshots or interaction checks are possible and not captured, do not claim the Taste Gate passed. If the app cannot run or verification is blocked, state the exact blocker and use only the allowed limited claim.

Final responses must report the important evidence concisely: commands, URL, viewport sizes, screenshot paths or blocker, changed states inspected, interaction summary, Docs Evidence, revisions made because of the audit, and any whole app not verified scope limit.

© syhily, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files (references) in .agents/skills/vercel-geist-design-system of syhily/kobato.

  • SKILL.md
  • references/companion-routing.md
  • references/component-system.md
  • references/foundation-and-style-rules.md
  • references/motion-performance-copy-rules.md
  • references/official-reference-map.md
  • references/source-of-truth-gate.md
  • references/taste-and-verification.md
  • references/trust-brand-and-asset-rules.md
  • references/vercel-design-dark.md
  • references/vercel-design.md

Open the folder on GitHubat commit 534dd92

Compare with similar skills

Vercel Geist Design System next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Vercel Geist Design System compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Vercel Geist Design System this skillsyhily/kobato114—~3.3kAutomated safety check: PassMIT
Cometchat React V7 Patternscometchat/cometchat-skills132—~1.2kAutomated safety check: NotesMIT
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar5.7k1 repos~1.1kAutomated safety check: PassMIT
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0

Similar skills

  • Cometchat React V7 Patterns

    cometchat/cometchat-skills

    Framework wiring for the React v7 UI Kit across Vite, Create React App, Next.js, React Router (incl.

    132 GitHub stars~1.2k tokensUpdated 5 days ago
    Frontend & DesignAuto-check: notes

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated today
    Frontend & DesignAuto-check passed

  • UI/UX Design System Advisor

    Galaxy-Dawn/claude-scholar

    Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Motion Dev Animations

    199-biotechnologies/motion-dev-animations-skill

    Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.

    133 GitHub starsUsed in 1 repo~2.8k tokens
    Frontend & DesignAuto-check: notes

More from syhily/kobato

  • Release

    syhily/kobato

    Execute a Kobato release. An agent skill from syhily/kobato.

    114 GitHub stars~1.2k tokensUpdated 10 days ago
    Auto-check passed

Works with

Categories

Questions about Vercel Geist Design System

What does Vercel Geist Design System do?

Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix. Vercel Geist Design System is an agent skill from syhily/kobato.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix.

When should I use Vercel Geist Design System?

Vercel Geist Design System fits situations like: responsive layout; vercel-style UI; generic clean/modern/premium/polished SaaS/developer-product visuals when no other final visual system is requested.

How do I install Vercel Geist Design System in Claude Code?

Run `npx skills add syhily/kobato --skill vercel-geist-design-system -a claude-code`. Or copy the skill folder (.agents/skills/vercel-geist-design-system in syhily/kobato) into .claude/skills/vercel-geist-design-system in your project. Claude Code loads it when a task matches its description.

How do I install Vercel Geist Design System in Codex?

Run `npx skills add syhily/kobato --skill vercel-geist-design-system -a codex`. Or copy the skill folder (.agents/skills/vercel-geist-design-system in syhily/kobato) into .agents/skills/vercel-geist-design-system in your project. Codex loads it when a task matches its description.

Can I use Vercel Geist Design System in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add syhily/kobato --skill vercel-geist-design-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vercel-geist-design-system, .gemini/skills/vercel-geist-design-system, .github/skills/vercel-geist-design-system and .opencode/skills/vercel-geist-design-system in your project.

What does Vercel Geist Design System need to run?

SKILL.md names no scripts, command-line tools or credentials: Vercel Geist Design System is instructions for the agent only.

Does Vercel Geist Design System access the network?

SKILL.md names 1 domain. In commands or code: vercel.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Vercel Geist Design System safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Vercel Geist Design System use?

Vercel Geist Design System is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vercel Geist Design System use?

About 3.3k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 33k tokens, read only when the agent opens those files.

What are the alternatives to Vercel Geist Design System?

Skills that share tags, products or a category with Vercel Geist Design System: Cometchat React V7 Patterns (cometchat/cometchat-skills, 132 stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Coss (crafter-station/petdex, 4.2k stars) and UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vercel Geist Design System?

syhily (a GitHub user) maintains it in syhily/kobato, which has 114 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on September 30, 2026.

Source: syhily/kobato on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.