mem-ui-skills

Enforce Mem's UI design system with Inter font and a 4px grid.

73|9|Updated Jan 25, 2026

Search Tags:#typography #design system #color palette #ui design #light mode #mem

Ready to run

npx skills add https://github.com/ihlamury/design-skills --skill mem-ui-skills

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mem-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/mem
Command: npx skills add https://github.com/ihlamury/design-skills --skill mem-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

Design System Adherence: Enforces specific color palettes, typography, spacing, and border-radius rules.
Light Mode Focus: Optimized for light-mode interfaces with a defined background color.
Font Consistency: Mandates the use of the Inter font family with specific weights and sizes.
Use Case: When an AI agent needs to design a new feature for a product that should look and feel like Mem, it can use this Skill to ensure all UI elements, from buttons to text, adhere to Mem's established design language.

Quick Start

Apply the mem-ui-skills to ensure the new interface uses Inter font and a 4px grid.

Frequently Asked Questions about mem-ui-skills

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

FAQPage Schema

How do I enforce a UI design system for light mode using the Inter font and a 4px grid?▼

To enforce a UI design system for light mode, apply constraints that mandate the Inter font family and a strict 4px grid for layout. This ensures front-end interfaces maintain consistent typography, spacing scales, and visual branding.

What color tokens and typography styles are needed to build a Mem-style interface?▼

Building a Mem-style interface requires specific color tokens for light mode backgrounds, typography styles with defined Inter font weights and sizes, and standardized border-radius values to ensure visual cohesion.

Can I use this design system constraint for dark mode UI design?▼

This design system constraint is specifically optimized for light-mode interfaces with a defined background color. It focuses on providing a cohesive light mode aesthetic and does not enforce dark mode UI rules.

How do I apply design system constraints to front-end components like buttons and text?▼

Apply design system constraints by enforcing specific color palettes, typography rules, and border-radius values across all front-end elements. This ensures buttons, text, and layout patterns adhere to the established visual language.

What is the best way to maintain spacing scale and layout pattern consistency in UI design?▼

The best way to maintain spacing scale and layout consistency is to enforce a 4px grid system. This provides a strict mathematical baseline for all spacing and layout patterns, ensuring cohesive front-end design.

Does this Mem UI design skill require any external dependencies or component libraries?▼

This Mem UI design skill operates with no external dependencies or component libraries. It functions purely as an opinionated set of design system constraints applied directly to your front-end development and UI/UX tasks.