skills.rest
mokhammadbahauddin
mokhammadbahauddinCOMMUNITY
Explore all skills by this author →
GitHub

react-native-kawaii-ui

Convert Tailwind CSS web prototypes into React Native components with NativeWind.

Updated Jan 2, 2026
Search Tags:#styling#animation#tailwind#react-native#native#reanimated#ui-conversion
One-click install
npx skills add https://github.com/mokhammadbahauddin/BeRu --skill react-native-kawaii-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-kawaii-ui
Source: https://github.com/mokhammadbahauddin/BeRu/tree/main
Command: npx skills add https://github.com/mokhammadbahauddin/BeRu --skill react-native-kawaii-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-native-reanimated, nativewind, expo-blur, expo-font, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill enables developers to convert high-fidelity web prototypes, especially those using Tailwind CSS, into fully functional React Native applications with native performance.

Core Features & Use Cases

  • UI Conversion: Translates web HTML and Tailwind classes into React Native components styled with NativeWind.
  • Animation Implementation: Guides the integration of Reanimated patterns for breathing effects, juicy button presses, and modal transitions.
  • Use Case: For a designer providing a web prototype with Tailwind classes, the developer can use this Skill to rapidly build a matching mobile app that retains the look, feel, and interactive animations.
  • Platform Compatibility: Ensures that styles such as shadows, backdrop blurs, and absolute positioning are adapted for both iOS and Android.

Quick Start

Describe how to implement a breathing animation for a pet character using react-native-reanimated with shared values and animated styles, without referencing code fences or multi-line shell commands.

Frequently Asked Questions about react-native-kawaii-ui

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

FAQPage Schema
How do I convert a web prototype with Tailwind CSS into React Native components?▼

To convert web prototypes, this Skill translates HTML and Tailwind classes into React Native components styled with NativeWind. It ensures visual fidelity while adapting web-specific styles for mobile platforms.

How do I implement breathing and press animations in React Native?▼

You can implement breathing and press animations in React Native using Reanimated patterns. This Skill guides the integration of shared values and animated styles for breathing effects, juicy button presses, and modal transitions.

Does NativeWind work with backdrop blur and shadows on both iOS and Android?▼

NativeWind works with backdrop blur and shadows by adapting them for both iOS and Android. This Skill ensures platform compatibility for styles such as backdrop blurs, absolute positioning, and shadows.

Can I use expo-blur and expo-font for styling cross-platform React Native apps?▼

You can use expo-blur and expo-font for styling cross-platform React Native apps. This Skill leverages these dependencies alongside NativeWind and Reanimated to maintain visual fidelity and native performance.

What is the best way to translate a design system into performant React Native code?▼

The best way to translate a design system into performant React Native code is by converting web prototypes directly. This Skill accelerates mobile development by generating production-ready code with complex animation patterns.

Why are my Tailwind classes not working when converting web HTML to React Native?▼

Tailwind classes may not work during web HTML conversion because React Native requires NativeWind for styling. This Skill handles the translation of Tailwind classes into NativeWind components to resolve cross-platform styling issues.

Related Skills

Explore More Software Engineering Skills→
addisonkaddisonk
1

converting-web-to-react-native

Convert React web prototypes into Expo Router apps with Nativewind and Reanimated.

Community
Advanced
almazomalmazom

react-native-dev

Guide React Native and Expo app development across iOS and Android.

Community
Advanced
MarcoAntoliniMarcoAntolini
1

react-native-expo

Optimize React Native and Expo apps with Expo Router and NativeWind.

Community
Advanced
Insik-HanInsik-Han
16

uniwind

Translate Tailwind-like classNames into React Native styles.

Community
Advanced