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

front-ui-skills

Enforce Front UI design constraints with Inter font and a 4px grid system.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building user interfaces that are consistent with Front's aesthetic, ensuring a cohesive and accessible user experience.

Core Features & Use Cases

  • Design System Enforcement: Ensures adherence to Front's specific color palette, typography, spacing, and border-radius rules.
  • Accessibility Compliance: Mandates a minimum text contrast ratio of 4.5:1.
  • Use Case: When an AI agent needs to design a new feature within an existing application that uses Front's design language, this Skill guides the agent to use the correct colors, fonts (Inter), spacing (4px grid), and component styles.

Quick Start

Apply the front-ui-skills to ensure the new UI uses the Inter font and a 4px grid for spacing.

Frequently Asked Questions about front-ui-skills

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

FAQPage Schema
How do I enforce a 4px grid system and Inter font for UI design?▼

You can enforce a 4px grid system and Inter font for UI design by applying strict design system constraints that mandate specific typography styles, spacing rules, and layout guidelines for a 1920px base viewport.

What are the accessibility requirements for a Front-style design system?▼

Accessibility requirements for a Front-style design system mandate a minimum text contrast ratio of 4.5:1. This ensures that interfaces built with specific color tokens remain visually accessible to all users.

How do I apply consistent color tokens and border-radius scales in UI design?▼

To apply consistent color tokens and border-radius scales in UI design, use an opinionated design system that enforces specific aesthetic constraints, ensuring a cohesive visual language across all newly created interface components.

Does this UI design skill work for a 1920px base viewport?▼

Yes, this UI design skill explicitly works for a 1920px base viewport. It applies layout guidelines and spacing rules based on a 4px grid system specifically tailored to maintain consistency at this resolution.

When do I need a design system skill for building user interfaces?▼

You need a design system skill for building user interfaces when an AI agent must design new features within an existing application, requiring strict adherence to predefined aesthetic constraints, fonts, and spacing rules for cohesive experiences.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

amplitude-ui-skills

Applies Ampitude's UI design system to web interfaces with specified palettes and layouts.

Community
Intermediate
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate
abhay-ranaabhay-rana
2

design-principles

Enforce a 4px grid and typography hierarchy for enterprise UI design.

Community
Basic
ihlamuryihlamury
73

railway-ui-skills

Enforce Railway-inspired dark mode UI constraints with Inter font and a 4px grid system.

Community
Intermediate