miro-ui-skills

Enforce Miro's UI design system constraints for light-mode interfaces with Inter font and 4px grid.

73|9|Updated Jan 25, 2026

Search Tags:#design system #ui design #light mode #miro #inter font #4px grid

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: miro-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/miro
Command: npx skills add https://github.com/ihlamury/design-skills --skill miro-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 Miro's design system, ensuring a familiar and intuitive user experience for Miro users.

Core Features & Use Cases

Aesthetic Replication: Apply Miro's specific color palette, typography (Inter font), and spacing rules (4px grid).
Component Styling: Adhere to guidelines for buttons, borders, and interactive states (focus, hover, disabled).
Accessibility: Maintain a minimum text contrast ratio of 4.5:1.
Use Case: Develop a new feature within a collaborative tool that needs to feel like a natural extension of the Miro platform, using its distinct light-mode aesthetic and UI patterns.

Quick Start

Apply Miro's UI design system to a new interface, ensuring adherence to its color, typography, and spacing rules.

Frequently Asked Questions about miro-ui-skills

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

FAQPage Schema

How do I build user interfaces that match Miro's design system?▼

To build user interfaces matching Miro's design system, apply its specific light-mode constraints including the Inter font, a 4px grid layout, defined color tokens, text styles, and spacing rules for consistent component styling.

What color and typography rules does the Miro UI design system use?▼

The Miro UI design system uses the Inter font family, a strict 4px grid for spacing, and predefined color tokens to ensure visual consistency. It also enforces specific text styles and a minimum text contrast ratio of 4.5:1 for accessibility.

How do I style interactive states like hover and focus for Miro-style components?▼

To style interactive states for Miro-style components, apply the system's specific guidelines for focus, hover, and disabled states. These rules define border radiuses, layout patterns, and animation behaviors to maintain a familiar user experience.

Can I use the Miro UI design system for dark mode interfaces?▼

The Miro UI design system is specifically configured for building light-mode interfaces. It provides opinionated color tokens and styling constraints tailored for light mode, ensuring a familiar aesthetic for Miro platform users.

What's the best way to ensure a new feature feels like a natural extension of Miro?▼

The best way to make a new feature feel like a natural extension of Miro is to enforce its UI design system constraints. This involves applying its distinct light-mode aesthetic, 4px grid spacing, and specific component styling guidelines.

Does the Miro UI design system include accessibility guidelines for text contrast?▼

Yes, the Miro UI design system includes accessibility guidelines that maintain a minimum text contrast ratio of 4.5:1. This ensures that light-mode interfaces built with its color tokens remain accessible to all users.