frontend-app-design

Name: frontend-app-design
Availability: InStock
Author: malachi436

Design React Native Expo interfaces with a bold liquid glass aesthetic.

Updated Dec 17, 2025

Search Tags:#typography #design #React Native #Expo #motion #liquid glass #iOS HIG

Ready to run

npx skills add https://github.com/Malachi436/trustless_grainery_frontend --skill frontend-app-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-app-design
Source: https://github.com/Malachi436/trustless_grainery_frontend/tree/main/.claude/skills/frontend-app-design
Command: npx skills add https://github.com/Malachi436/trustless_grainery_frontend --skill frontend-app-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides designers to create production-grade React Native Expo interfaces with a distinctive bold aesthetic, replacing generic AI-generated visuals with carefully crafted UI.

Core Features & Use Cases

Bold aesthetic direction: Translate a concept into a cohesive UI with refined typography, color, and motion.
iOS Human Interface Guidelines: Align layouts, touch targets, and readability for mobile devices.
Liquid Glass & depth: Implement translucent surfaces, gradients, and layered shadows for depth using blur and gradient components.
Reusable design system: Build modular components and screens that can be shared across the app.

Quick Start

Design and implement an Expo screen or component that demonstrates the chosen aesthetic using translucent surfaces, gradient backgrounds, and motion, ensuring accessibility and platform-consistent visuals.

Frequently Asked Questions about frontend-app-design

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

FAQPage Schema

How do I create a liquid glass UI in React Native Expo?▼

To create a liquid glass UI in React Native Expo, use expo-blur BlurView for translucent surfaces and expo-linear-gradient for layered depth. Combine these with react-native-reanimated for motion to build a bold, production-grade mobile interface.

What's the best way to align React Native components with iOS HIG?▼

The best way to align React Native components with iOS HIG is to apply strict touch target sizing, refined typography using @expo-google-fonts, and platform-consistent readability standards. This ensures layouts meet Apple's Human Interface Guidelines for mobile devices.

Can I use expo-haptics and reanimated for motion in my Expo app design?▼

Yes, you can use expo-haptics and react-native-reanimated for motion in your Expo app design. These libraries enable distinctive tactile feedback and fluid animations, essential for replacing generic visuals with carefully crafted, production-grade UI components.

Does this approach work for building reusable React Native design systems?▼

Yes, this approach works for building reusable React Native design systems by creating modular components and screens. It translates bold aesthetic concepts into cohesive UI elements with refined typography, color, and motion that can be shared across your app.

Why do my AI-generated React Native visuals look generic?▼

AI-generated React Native visuals look generic because they lack a cohesive aesthetic direction and refined typography. You can replace them with carefully crafted UI by applying translucent surfaces, gradients, and layered shadows for depth using expo-blur and gradient components.

What libraries do I need to implement translucent surfaces and gradients in Expo?▼

You need expo-blur BlurView and expo-linear-gradient to implement translucent surfaces and gradients in Expo. These standard React Native tooling libraries provide the layered depth and liquid glass aesthetic required for production-grade mobile interfaces.