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

neon-ui-skills

Enforce Neon design constraints for dark mode, Inter font, and 4px grid interfaces.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Neon's design aesthetic, ensuring a cohesive and branded user experience.

Core Features & Use Cases

  • Dark Mode Implementation: Enforces dark backgrounds and appropriate text contrast for accessibility.
  • Consistent Typography: Utilizes the 'Inter' font family with predefined heading and body text styles.
  • 4px Grid Spacing: Ensures uniform spacing and alignment across all UI elements.
  • Use Case: When developing a new feature for a platform that needs to match Neon's existing look and feel, this Skill guides the AI to use the correct colors, fonts, and spacing.

Quick Start

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

Frequently Asked Questions about neon-ui-skills

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

FAQPage Schema
How do I build dark mode UI interfaces with consistent spacing and typography?▼

To build dark mode UI interfaces with consistent spacing and typography, apply design constraints that enforce dark backgrounds, use the Inter font family, and align all elements to a 4px grid system.

What is the Neon design aesthetic for UI development?▼

The Neon design aesthetic is a visual style for UI development that enforces specific guidelines for dark mode colors, Inter typography, 4px grid spacing, borders, and interactive states to ensure branded consistency.

How do I maintain visual consistency across a dark mode design system?▼

You maintain visual consistency across a dark mode design system by enforcing predefined constraints for colors, typography, spacing, and interactive states, ensuring all UI elements adhere to the same 4px grid and font rules.

Can I use a different font family instead of Inter for my UI design?▼

No, the UI design constraints specifically require using the Inter font family with predefined heading and body text styles to match the Neon aesthetic and ensure typographic consistency.

Does this approach support custom spacing scales outside the 4px grid?▼

No, the approach enforces a strict 4px grid system for spacing to ensure uniform alignment across all UI elements, restricting custom spacing scales that would break visual consistency.

How do I handle interactive states like hover and focus in a dark mode UI?▼

To handle interactive states in a dark mode UI, follow specific design constraints for borders and state changes that ensure appropriate text contrast and visual feedback while maintaining the overall aesthetic.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

rippling-ui-skills

Enforce Rippling UI design constraints for dark mode, Inter font, and 4px grid.

Community
Intermediate
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate
ihlamuryihlamury
73

loom-ui-skills

Enforce Loom's UI design system with color tokens, Inter font, and 4px spacing grid.

Community
Intermediate
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate