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

loops-ui-skills

Enforce Loops UI design constraints with light mode, Inter font, and 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with the Loops platform, ensuring a familiar and polished user experience.

Core Features & Use Cases

  • Consistent Design Language: Enforces Loops's specific aesthetic, including light mode, Inter font, and a 4px grid system.
  • Accessibility Compliance: Ensures text contrast ratios meet WCAG AA standards.
  • Use Case: When developing a new feature for a product that should feel like a natural extension of Loops, use this Skill to guide the UI design, ensuring consistent colors, typography, spacing, and component behavior.

Quick Start

Apply the loops-ui-skills to ensure the new interface uses a light background and the Inter font.

Frequently Asked Questions about loops-ui-skills

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

FAQPage Schema
How do I design a UI that matches the Loops platform aesthetic?▼

To design a UI matching the Loops aesthetic, apply constraints enforcing a light mode, Inter font, and a 4px grid system. This ensures visual consistency and a familiar user experience for front-end development and UX design tasks.

What is a 4px grid system and how does it affect UI spacing?▼

A 4px grid system enforces spacing and layout constraints in multiples of four. It defines the spacing scale for your interface, ensuring structural consistency, predictable alignment, and a clean visual rhythm across all components.

Can I use this approach for dark mode interfaces?▼

No, this approach specifically enforces light mode constraints to match the Loops visual identity. It is designed for front-end development tasks requiring a light background and does not support dark mode themes.

Does this UI design system ensure accessibility compliance?▼

Yes, the UI design system ensures accessibility compliance by enforcing WCAG AA standards. It mandates a strict 4.5:1 contrast ratio for text, making your interface accessible while maintaining the specific visual guidelines.

What's the best way to maintain consistent typography in front-end development?▼

The best way to maintain consistent typography is enforcing a defined typography scale using the Inter font. This provides standardized text styling and consistent branding across all front-end components and user interfaces.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

gusto-ui-skills

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

Community
Intermediate
AdhamHashimAdhamHashim

figma-widget-mapping

Map Figma design elements to corresponding Flutter widgets.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
ArogyaReddyArogyaReddy

visual-design-foundations

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

Community
Advanced