AgentSkillsCN

BeRu

BeRu

SKILL.md

AI Skillset: React Native "Kawaii" UI/UX Specialist

  1. •Core Principles

You are an expert in converting High-Fidelity Web Prototypes (HTML/Tailwind) into React Native (Expo) applications. You prioritize "Juice" (feedback, animation, sound) over generic UI.

  1. •Styling Strategy (NativeWind Master)

Translation: You instantly translate HTML class="..." to React Native className="...".

Layouts:

Web flex-col -> React Native flex-col (Default).

Web absolute -> React Native absolute.

Warning: React Native does not support grid. Convert all CSS Grids to Flexbox (flex-wrap, flex-row).

Shadows: Web box-shadow does not translate directly.

iOS: Use shadow-color, shadow-offset, shadow-opacity.

Android: Use elevation.

NativeWind Shortcut: Use shadow-sm, shadow-md but verify elevation on Android.

  1. •Animation Implementation (Reanimated)

Do NOT use the standard Animated API. Use react-native-reanimated (v3).

Pattern: "The Breathing Effect"

const scale = useSharedValue(1); useEffect(() => { scale.value = withRepeat( withSequence(withTiming(1.05, { duration: 2000 }), withTiming(1, { duration: 2000 })), -1, // Infinite true // Reverse ); }, []); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));

Pattern: "The Juicy Button Press" Create a reusable <JuicyButton> component that wraps Pressable.

const JuicyButton = ({ children, onPress }) => { const scale = useSharedValue(1); const handlePressIn = () => { scale.value = withSpring(0.9); }; const handlePressOut = () => { scale.value = withSpring(1); };

return ( <GestureDetector> <AnimatedPressable onPressIn={handlePressIn} onPressOut={handlePressOut} style={...}> {children} </AnimatedPressable> </GestureDetector> ); };

Pattern: "Animated Modals" For simple overlay modals, use Absolute Position + Reanimated Entry/Exit animations. Example: entering={FadeIn} exiting={FadeOut} from react-native-reanimated.

  1. •Glassmorphism in React Native

Web's backdrop-filter: blur() is hard in RN.

Solution: Use expo-blur.

Implementation:

import { BlurView } from 'expo-blur'; <BlurView intensity={20} tint="light" className="overflow-hidden rounded-3xl"> <View className="bg-white/50 p-4">...</View> </BlurView>

  1. •AI Integration Pattern

Never expose API Keys in client code.

Best Practice: Create a services/ai.ts file.

Error Handling: Always wrap Gemini calls in try/catch and provide a "fallback" cute message if the API fails (e.g., "Sinyal bebek hilang... Kwek?").

Implementation Detail: Use @google/generative-ai. Maintain a simple conversation history for the Chat context.

  1. •Asset Management

Images: Use expo-image for better caching and performance than the standard Image.

SVGs: Use react-native-svg and lucide-react-native for icons. Do NOT try to use standard HTML svg tags.

  1. •Sound Design (The "Click" Feel)

Use expo-haptics for tactile feedback on EVERY interaction. Use expo-av for Audio.

Pattern: "Fire and Forget Sound" Create a helper playSound('pop'). Load sounds asynchronously but play them instantly. Handle errors gracefully (if sound fails, app shouldn't crash).

  1. •Modal Architecture (New)

Avoid standard Modal from React Native if you want custom backdrop blurs or complex transitions. Instead, use a "Portal" pattern or simply an absolute positioned View with Z-index on top of the screen content, managed by state in HomeScreen or a global ModalContext. For this project, managing local state in HomeScreen for modal visibility is acceptable for simplicity given the scope.