style: format all files with prettier

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,