style: format all files with prettier

plugins/ui-design/skills/react-native-design/SKILL.md

@@ -23,6 +23,7 @@ Master React Native styling patterns, React Navigation, and Reanimated 3 to buil
 ### 1. StyleSheet and Styling
 
 **Basic StyleSheet:**
+
 ```typescript
 import { StyleSheet, View, Text } from 'react-native';
 
@@ -56,6 +57,7 @@ function Card() {
 ```
 
 **Dynamic Styles:**
+
 ```typescript
 interface CardProps {
   variant: 'primary' | 'secondary';
@@ -99,30 +101,31 @@ const styles = StyleSheet.create({
 ### 2. Flexbox Layout
 
 **Row and Column Layouts:**
+
 ```typescript
 const styles = StyleSheet.create({
   // Vertical stack (column)
   column: {
-    flexDirection: 'column',
+    flexDirection: "column",
     gap: 12,
   },
   // Horizontal stack (row)
   row: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     gap: 8,
   },
   // Space between items
   spaceBetween: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
   },
   // Centered content
   centered: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
   },
   // Fill remaining space
   fill: {
@@ -134,6 +137,7 @@ const styles = StyleSheet.create({
 ### 3. React Navigation Setup
 
 **Stack Navigator:**
+
 ```typescript
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -177,6 +181,7 @@ function AppNavigator() {
 ```
 
 **Tab Navigator:**
+
 ```typescript
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Ionicons } from '@expo/vector-icons';
@@ -216,6 +221,7 @@ function TabNavigator() {
 ### 4. Reanimated 3 Basics
 
 **Animated Values:**
+
 ```typescript
 import Animated, {
   useSharedValue,
@@ -248,6 +254,7 @@ function AnimatedBox() {
 ```
 
 **Gesture Handler Integration:**
+
 ```typescript
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
@@ -290,14 +297,14 @@ function DraggableCard() {
 ### 5. Platform-Specific Styling
 
 ```typescript
-import { Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
   container: {
     padding: 16,
     ...Platform.select({
       ios: {
-        shadowColor: '#000',
+        shadowColor: "#000",
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.1,
         shadowRadius: 4,
@@ -308,14 +315,14 @@ const styles = StyleSheet.create({
     }),
   },
   text: {
-    fontFamily: Platform.OS === 'ios' ? 'SF Pro Text' : 'Roboto',
+    fontFamily: Platform.OS === "ios" ? "SF Pro Text" : "Roboto",
     fontSize: 16,
   },
 });
 
 // Platform-specific components
-import { Platform } from 'react-native';
-const StatusBarHeight = Platform.OS === 'ios' ? 44 : 0;
+import { Platform } from "react-native";
+const StatusBarHeight = Platform.OS === "ios" ? 44 : 0;
 ```
 
 ## Quick Start Component

plugins/ui-design/skills/react-native-design/references/navigation-patterns.md

@@ -18,9 +18,12 @@ npm install react-native-screens react-native-safe-area-context
 
 ```typescript
 // navigation/types.ts
-import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
-import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native';
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
+import { BottomTabScreenProps } from "@react-navigation/bottom-tabs";
+import {
+  CompositeScreenProps,
+  NavigatorScreenParams,
+} from "@react-navigation/native";
 
 // Define param lists for each navigator
 export type RootStackParamList = {
@@ -63,9 +66,9 @@ declare global {
 
 ```typescript
 // hooks/useAppNavigation.ts
-import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { RootStackParamList } from './types';
+import { useNavigation, useRoute, RouteProp } from "@react-navigation/native";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { RootStackParamList } from "./types";
 
 export function useAppNavigation() {
   return useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -464,9 +467,9 @@ function App() {
 ### Handling Deep Links
 
 ```typescript
-import { useEffect } from 'react';
-import { Linking } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useEffect } from "react";
+import { Linking } from "react-native";
+import { useNavigation } from "@react-navigation/native";
 
 function useDeepLinkHandler() {
   const navigation = useNavigation();
@@ -481,7 +484,7 @@ function useDeepLinkHandler() {
     };
 
     // Handle URL changes
-    const subscription = Linking.addEventListener('url', ({ url }) => {
+    const subscription = Linking.addEventListener("url", ({ url }) => {
       handleDeepLink(url);
     });
 

plugins/ui-design/skills/react-native-design/references/reanimated-patterns.md

@@ -712,9 +712,12 @@ function BottomSheet({ children }) {
 
 ```typescript
 // Memoize animated style when dependencies don't change
-const animatedStyle = useAnimatedStyle(() => ({
-  transform: [{ translateX: translateX.value }],
-}), []); // Empty deps if no external dependencies
+const animatedStyle = useAnimatedStyle(
+  () => ({
+    transform: [{ translateX: translateX.value }],
+  }),
+  [],
+); // Empty deps if no external dependencies
 
 // Use useMemo for complex calculations outside worklets
 const threshold = useMemo(() => calculateThreshold(screenWidth), [screenWidth]);
@@ -725,7 +728,7 @@ const threshold = useMemo(() => calculateThreshold(screenWidth), [screenWidth]);
 ```typescript
 // Do: Keep worklets simple
 const simpleWorklet = () => {
-  'worklet';
+  "worklet";
   return scale.value * 2;
 };
 
@@ -738,7 +741,7 @@ const onComplete = () => {
 };
 
 opacity.value = withTiming(1, {}, (finished) => {
-  'worklet';
+  "worklet";
   if (finished) {
     runOnJS(onComplete)();
   }

plugins/ui-design/skills/react-native-design/references/styling-patterns.md

@@ -5,7 +5,7 @@
 ### Creating Styles
 
 ```typescript
-import { StyleSheet, ViewStyle, TextStyle, ImageStyle } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle, ImageStyle } from "react-native";
 
 // Typed styles for better IDE support
 interface Styles {
@@ -18,12 +18,12 @@ const styles = StyleSheet.create<Styles>({
   container: {
     flex: 1,
     padding: 16,
-    backgroundColor: '#ffffff',
+    backgroundColor: "#ffffff",
   },
   title: {
     fontSize: 24,
-    fontWeight: '700',
-    color: '#1f2937',
+    fontWeight: "700",
+    color: "#1f2937",
   },
   image: {
     width: 100,
@@ -425,13 +425,10 @@ export function Spacer({ size, flex }: SpacerProps) {
 ### Cross-Platform Shadows
 
 ```typescript
-import { Platform, ViewStyle } from 'react-native';
+import { Platform, ViewStyle } from "react-native";
 
-export function createShadow(
-  elevation: number,
-  color = '#000000'
-): ViewStyle {
-  if (Platform.OS === 'android') {
+export function createShadow(elevation: number, color = "#000000"): ViewStyle {
+  if (Platform.OS === "android") {
     return { elevation };
   }
 
@@ -483,7 +480,7 @@ export const shadows = {
 // Usage
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: '#ffffff',
+    backgroundColor: "#ffffff",
     borderRadius: 12,
     padding: 16,
     ...shadows.md,