modern-floating-ui-design

Standardize mobile UI tokens and patterns across React Native, Flutter, SwiftUI, and Jetpack Compose.

1|Updated Jan 28, 2026
One-click install
npx skills add https://github.com/Benmore-Studio/Benmore-Meridian --skill modern-floating-ui-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: modern-floating-ui-design
Source: https://github.com/Benmore-Studio/Benmore-Meridian/tree/main/skills/modern-floating-ui-design
Command: npx skills add https://github.com/Benmore-Studio/Benmore-Meridian --skill modern-floating-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Modern Floating UI Design System provides a universal, framework-agnostic set of tokens, patterns, and guidelines to build polished, consistent mobile UIs across platforms, reducing design drift and speeding development.

Core Features & Use Cases

  • Token-based theming (color, typography, spacing, radii, shadows)
  • Reusable component patterns for cards, headers, navigation, modals, and inputs
  • Cross-framework applicability to React Native, Flutter, SwiftUI, and Jetpack Compose for cohesive experiences

Quick Start

Install the design system in your project, then begin applying the tokens and component patterns to your app.

Frequently Asked Questions about modern-floating-ui-design

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

FAQPage Schema
How do I standardize mobile UI across multiple frameworks without causing design drift?

You can standardize mobile UI by adopting a framework-agnostic set of design tokens, reusable component patterns, and documentation guidelines that ensure cohesive visuals across teams and devices.

What design tokens are needed to build a consistent cross-platform mobile UI?

Building consistent mobile UI requires defining standardized design tokens for color, typography, spacing, border radii, and shadows to unify visuals across different platforms.

Does this cross-platform design system work with React Native and Flutter?

Yes, the cross-platform design system applies to React Native, Flutter, SwiftUI, Jetpack Compose, and web, enabling cohesive visual experiences across all these frameworks.

How do I apply design tokens and component patterns to an existing mobile app?

To apply design tokens and patterns, install the design system in your project, then map your existing color, typography, and spacing values to the provided tokens for cards, headers, and modals.

What is the best way to maintain cohesive visuals across product teams on different devices?

The best way to maintain cohesive visuals is using a universal pattern library with predefined component patterns and documentation guidelines that standardize mobile UI across all product teams.

When should I avoid using a universal design system for mobile app development?

You should avoid a universal design system when your project requires highly custom, platform-specific native animations or unique interfaces that fall outside standardized token and pattern guidelines.