Hugging Face Skills vs Vercel Agent Skills

Hugging Face Skills

Hugging Face Skills are definitions for AI/ML tasks like dataset creation, model training, and evaluation. The client plugin marketplaces expose the hf-cli skill as the bootstrap path for core Hub operations; additional workflow skills can be installed on demand with hf skills add <skill-name> or discovered by skill-aware clients over CLI/MCP integrations.

The skills in this repository follow the standardized Agent Skills format.

[!NOTE]
Just want to give your agent access to the Hugging Face Hub? Start with hf-cli. It's the recommended first Skill to install: it teaches your agent every hf command (search models, manage datasets and buckets, launch Spaces, run jobs) and is generated from your locally installed CLI so it stays current.

How do Skills work?

In practice, skills are self-contained folders that package instructions, scripts, and resources together for an AI agent to use on a specific use case. Each folder includes a SKILL.md file with YAML frontmatter (name and description) followed by the guidance your coding agent follows while the skill is active.

[!TIP]
If your agent doesn't support skills, you can use agentsmd/AGENTS.md directly as a fallback.

The hf-cli skill in this repository is also available through:

• Cursor Marketplace (https://cursor.com/marketplace/huggingface)
• Codex Plugins Directory (https://developers.openai.com/codex/plugins)

Installation

Hugging Face skills are compatible with Claude Code, Codex, Gemini CLI, and Cursor.

Claude Code

1. Register the repository as a plugin marketplace:

/plugin marketplace add huggingface/skills

2. Install the CLI skill:

/plugin install hf-cli@huggingface/skills

3. To install another Hugging Face skill, use the hf CLI:

hf skills add <skill-name>

Codex

1. Copy or symlink any skills you want to use from this repository's skills/ directory into one of Codex's standard .agents/skills locations (for example, $REPO_ROOT/.agents/skills or $HOME/.agents/skills) as described in the Codex Skills guide.

2. Once a skill is available in one of those locations, Codex will discover it using the Agent Skills standard and load the SKILL.md instructions when it decides to use that skill or when you explicitly invoke it.

3. If your Codex setup still relies on AGENTS.md, you can use the generated agentsmd/AGENTS.md file in this repo as a fallback bundle of instructions.

Gemini CLI

1. This repo includes gemini-extension.json to integrate with the Gemini CLI.

2. Install locally:

gemini extensions install . --consent

or use the GitHub URL:

gemini extensions install https://github.com/huggingface/skills.git --consent

4. See Gemini CLI extensions docs for more help.

Cursor

This repository includes Cursor plugin manifests:

• .cursor-plugin/plugin.json
• .mcp.json (configured with the Hugging Face MCP server URL)

Install from repository URL (or local checkout) via the Cursor plugin flow. The marketplace entry is intentionally limited to hf-cli; use hf skills add <skill-name> to install additional workflow skills.

For contributors, regenerate manifests with:

./scripts/publish.sh

Skills

This repository contains a few skills to get you started. You can also contribute your own skills to the repository.

Available skills

Using skills in your coding agent

Once a skill is installed, mention it directly while giving your coding agent instructions:

• "Use the HF LLM trainer skill to estimate the GPU memory needed for a 70B model run."
• "Use the HF model evaluation skill to launch run_eval_job.py on the latest checkpoint."
• "Use the HF dataset creator skill to draft new few-shot classification templates."
• "Use the HF paper publisher skill to index my arXiv paper and link it to my model."

Your coding agent automatically loads the corresponding SKILL.md instructions and helper scripts while it completes the task.

Contribute or customize a skill

1. Copy one of the existing skill folders (for example, hf-datasets/) and rename it.
2. Update the new folder's SKILL.md frontmatter:

   ---
   name: my-skill-name
   description: Describe what the skill does and when to use it
   ---
   
   # Skill Title
   Guidance + examples + guardrails
   

   Copy
3. Add or edit supporting scripts, templates, and documents referenced by your instructions.
4. Do not add the skill to .claude-plugin/marketplace.json by default. Client marketplaces are intentionally limited to hf-cli; the full Hub CLI marketplace is generated at .claude-plugin/marketplace-internal.json.
5. Run:

   ./scripts/publish.sh
   

   Copy
   to regenerate and validate all generated metadata.
6. Reinstall or reload the skill bundle in your coding agent so the updated folder is available.

Marketplace

The .claude-plugin/marketplace.json and .cursor-plugin/marketplace.json files intentionally expose only hf-cli for client marketplace installation. This keeps install-time manifests focused on core Hub operations and points users to hf skills add <skill-name> for the rest of the repository.

The generated .claude-plugin/marketplace-internal.json file contains the full skill list. Publish automation uploads it to the Hub bucket as marketplace.json so hf skills list, hf skills add, and hf skills update continue to see every available skill.

Newer skill-aware integrations can also pull capabilities dynamically. Hugging Face's discovery flow lets clients search skills, MCP servers, and Spaces, while Skills-over-MCP work is standardizing how skills are discovered and consumed through MCP resources.

Additional references

• Browse the latest instructions, scripts, and templates directly at huggingface/skills.
• Review Hugging Face documentation for the specific libraries or workflows you reference inside each skill.

Agent Skills

A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities.

Skills follow the Agent Skills format.

Available Skills

vercel-optimize

Audits a Vercel project for cost, performance, reliability, caching, function usage, and billing opportunities. It collects Vercel metrics first, then investigates only the routes and files those metrics point to.

Use when:

• Optimizing a deployed Vercel project
• Reducing Vercel costs or function usage
• Investigating slow or expensive routes
• Finding caching, ISR, middleware, image, or build-minute issues
• Producing a ranked cost and performance report

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact.

Use when:

• Writing new React components or Next.js pages
• Implementing data fetching (client or server-side)
• Reviewing code for performance issues
• Optimizing bundle size or load times

Categories covered:

• Eliminating waterfalls (Critical)
• Bundle size optimization (Critical)
• Server-side performance (High)
• Client-side data fetching (Medium-High)
• Re-render optimization (Medium)
• Rendering performance (Medium)
• JavaScript micro-optimizations (Low-Medium)

web-design-guidelines

Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX.

Use when:

• "Review my UI"
• "Check accessibility"
• "Audit design"
• "Review UX"
• "Check my site against best practices"

Categories covered:

• Accessibility (aria-labels, semantic HTML, keyboard handlers)
• Focus States (visible focus, focus-visible patterns)
• Forms (autocomplete, validation, error handling)
• Animation (prefers-reduced-motion, compositor-friendly transforms)
• Typography (curly quotes, ellipsis, tabular-nums)
• Images (dimensions, lazy loading, alt text)
• Performance (virtualization, layout thrashing, preconnect)
• Navigation & State (URL reflects state, deep-linking)
• Dark Mode & Theming (color-scheme, theme-color meta)
• Touch & Interaction (touch-action, tap-highlight)
• Locale & i18n (Intl.DateTimeFormat, Intl.NumberFormat)

writing-guidelines

Review docs and prose for compliance with the Vercel writing handbook. Audits your pages for 80+ rules covering voice, structure, content types, code samples, typography, and AI workflow.

Use when:

• "Review my docs"
• "Check writing style"
• "Audit prose"
• "Review docs voice and tone"
• "Check this page against the writing handbook"

Categories covered:

• Planning (content plan, content type, user-shaped titles)
• Voice & tone (active voice, direct address, banned words like easy/simple/quick)
• Tone by content type (tutorial, how-to, reference, conceptual, troubleshooting)
• Headings & structure (sentence case, descriptive subheadings, TL;DR opens)
• Lists (when to use, bold/description format)
• Code (language tags, TypeScript first, <Steps/>, 80-col / 25-line limits)
• Placeholders, units, & numbers (snake_case text, count-up numbers, 64 KB/200 ms)
• Typography (no em dashes as punctuation, curly quotes, ellipsis character, non-breaking spaces)
• Source formatting (no hard-wrap, no --- rules, blank line discipline)
• Pricing & money pages (tables, uncompromising detail)
• AI workflow (accountability, enterprise models, plan first, disclose AI use)
• Review (PR description discipline, author accountability)

react-native-guidelines

React Native best practices optimized for AI agents. Contains 16 rules across 7 sections covering performance, architecture, and platform-specific patterns.

Use when:

• Building React Native or Expo apps
• Optimizing mobile performance
• Implementing animations or gestures
• Working with native modules or platform APIs

Categories covered:

• Performance (Critical) - FlashList, memoization, heavy computation
• Layout (High) - flex patterns, safe areas, keyboard handling
• Animation (High) - Reanimated, gesture handling
• Images (Medium) - expo-image, caching, lazy loading
• State Management (Medium) - Zustand patterns, React Compiler
• Architecture (Medium) - monorepo structure, imports
• Platform (Medium) - iOS/Android specific patterns

react-view-transitions

Implement smooth, native-feeling animations using React's View Transition API. Covers the <ViewTransition> component, addTransitionType, transition types, and Next.js integration including the transitionTypes prop on next/link.

Use when:

• Adding page transitions or route animations
• Animating enter/exit of components
• Creating shared element transitions (list-to-detail morphing)
• Implementing directional (forward/back) navigation animations
• Integrating view transitions in Next.js App Router
• Animating list reorder or Suspense fallback reveals

Topics covered:

• <ViewTransition> component (enter, exit, update, share triggers)
• addTransitionType for directional/context-specific animations
• View Transition Classes and CSS pseudo-elements
• Shared element transitions with the name prop
• JavaScript animations via Web Animations API
• Next.js transitionTypes prop on next/link
• Ready-to-use CSS animation recipes (fade, slide, scale, flip)
• Accessibility (prefers-reduced-motion)

composition-patterns

React composition patterns that scale. Helps avoid boolean prop proliferation through compound components, state lifting, and internal composition.

Use when:

• Refactoring components with many boolean props
• Building reusable component libraries
• Designing flexible APIs
• Reviewing component architecture

Patterns covered:

• Extracting compound components
• Lifting state to reduce props
• Composing internals for flexibility
• Avoiding prop drilling

deploy-to-vercel

Deploy applications and websites to Vercel. Prefers git-push deploys on a linked project, falls back to the Vercel CLI, and uses vercel deploy --temporary when no login is available. Temporary deployments return a claim URL so users can keep them.

Use when:

• "Deploy my app"
• "Push this live"
• "Deploy and give me the link"
• "Create a preview deployment"

Installation

npx skills add vercel-labs/agent-skills

Usage

Skills are automatically available once installed. The agent will use them when relevant tasks are detected.

Examples:

Deploy my app

Review this React component for performance issues

Help me optimize this Next.js page

Discovery index

Every change to a skill on main publishes an immutable GitHub release with
an Agent Skills discovery index and one artifact per skill. Build the same
artifacts locally with:

npm ci --ignore-scripts
node scripts/build-discovery-index.mjs https://example.com/skills

Skill Structure

Each skill contains:

• SKILL.md - Instructions for the agent
• scripts/ - Helper scripts for automation (optional)
• references/ - Supporting documentation (optional)

License

MIT