skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

hugging-face-ui-skills

Enforce Hugging Face design constraints for dark mode, Inter font, and 4px grid.

73|9|Updated Jan 25, 2026
Search Tags:#typography#design system#ui design#dark mode#spacing#hugging face
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill hugging-face-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hugging-face-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/hugging-face
Command: npx skills add https://github.com/ihlamury/design-skills --skill hugging-face-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that visually align with Hugging Face's design system, ensuring consistency and adherence to their aesthetic.

Core Features & Use Cases

  • Dark Mode Implementation: Guides the creation of interfaces with dark backgrounds and specific color palettes.
  • Typography and Spacing: Enforces the use of the 'Inter' font family and a 4px grid for consistent spacing and typography.
  • Component Styling: Defines specific styles for buttons and input fields, including interactive states.
  • Use Case: When developing a new feature for a platform that needs to match the look and feel of Hugging Face's existing products, use this Skill to guide the UI development process.

Quick Start

Apply the hugging-face-ui-skills to create a dark mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about hugging-face-ui-skills

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

FAQPage Schema
How do I build a UI that matches the Hugging Face design system?▼

To build a Hugging Face-inspired UI, apply design system constraints enforcing dark mode, the Inter font family, a 4px grid for spacing, and specific color semantic tokens to ensure visual alignment.

What typography and spacing rules are used in Hugging Face style UI design?▼

Hugging Face style UI design enforces the Inter font family for typography and a strict 4px grid spacing system to maintain consistent layout and visual hierarchy across interface components.

How do I style interactive states for buttons and inputs in a dark mode UI?▼

Style interactive states for buttons and inputs in a dark mode UI by applying specific color semantic tokens that define focus, hover, and disabled visual states for consistent component styling.

Do I need specific dependencies to implement Hugging Face UI design constraints?▼

No specific dependencies are required to implement Hugging Face UI design constraints. The guidelines provide opinionated styling rules for dark mode, typography, and spacing that can be applied directly.

When should I use Hugging Face UI design constraints for my interface?▼

Use Hugging Face UI design constraints when developing new platform features that must visually align with Hugging Face's aesthetic, ensuring consistency through dark mode, Inter typography, and 4px grid spacing.

Related Skills

Explore More Design & Creative Skills→
Tyler-R-KendrickTyler-R-Kendrick
1

huggingface-lora-space-builder

Builds Gradio apps for LoRA models and publishes them to Hugging Face Spaces.

Community
Advanced
trycompaitrycompai
1.8k

ui

Enforce design-system tokens, theming, and accessible component patterns in React/TS frontend development.

Official
Intermediate
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
ihlamuryihlamury
73

apple-ui-skills

Enforce Apple's UI design constraints for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate