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

github-ui-skills

Enforce GitHub's UI design system with dark mode, Inter font, and a 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with GitHub's design system, ensuring a familiar and high-quality user experience.

Core Features & Use Cases

  • Consistent Design Language: Enforces GitHub's specific dark mode, typography (Inter font), and spacing (4px grid).
  • Accessibility Compliance: Ensures text contrast ratios meet WCAG AA standards.
  • Use Case: Develop a new feature for a developer tool that needs to match the look and feel of GitHub's settings pages.

Quick Start

Apply the github-ui-skills to ensure the new interface uses dark backgrounds and the Inter font.

Frequently Asked Questions about github-ui-skills

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

FAQPage Schema
How do I build GitHub interfaces with a consistent dark mode design system?▼

To build GitHub interfaces, apply constraints for dark backgrounds, the Inter font, and a 4px grid spacing system. This ensures visual consistency with GitHub's aesthetic and delivers a familiar, high-quality user experience for developer tools.

What typography and spacing rules does the GitHub UI design system use?▼

The GitHub UI design system uses the Inter font for typography and a strict 4px grid for spacing. Enforcing these specific rules guarantees that new interfaces match GitHub's settings pages and maintain consistent branding.

Does the GitHub UI design system meet WCAG AA accessibility standards for dark mode?▼

Yes, the GitHub UI design system enforces WCAG AA accessibility compliance. It ensures specific color palettes and dark mode backgrounds provide adequate text contrast ratios for developer tools and platforms.

How do I style interactive states for developer tools to match GitHub's settings pages?▼

To style interactive states for developer tools, apply opinionated design system constraints that enforce specific color palettes and dark mode aesthetics. This approach directly matches GitHub's settings pages and user experience.

Can I use this design system for interfaces outside of GitHub developer tools?▼

This design system is optimized for developer tools and platforms requiring a GitHub aesthetic. While the 4px grid, Inter typography, and dark mode palette can apply broadly, the opinionated constraints specifically target GitHub's visual language.

Related Skills

Explore More Design & Creative Skills→
TIAN0517TIAN0517

frontend-design

Transform UI design requirements into TypeScript frontend code with CSS variable tokens.

Community
Advanced
cartridge-ggcartridge-gg

ui-architecture

Standardize frontend UI components with Radix, Tailwind, CVA, and Storybook.

Official
Intermediate
DanielV-94DanielV-94

awwwards-ui-skills

Enforce Awwwards-style UI design guidelines with Inter font and 4px spacing grid.

Community
Intermediate
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced