UCD Mobile — Coding Assistant Skill

src/
├── app/              # Expo Router screens (file = route)
├── components/
│   ├── shared/       # Generic, reusable UI atoms
│   └── features/     # Feature-scoped components
├── constants/        # Colors, API endpoints, config
├── contexts/         # React Context providers + hooks
├── db/               # Drizzle schema
├── hooks/            # Custom hooks (data + UI logic)
├── services/         # API calls, DB operations, business logic
├── types/            # TypeScript types + Zod schemas
└── utils/            # Pure utility functions

import { View, Pressable, Text } from 'react-native';
import type { ComponentProps } from 'react';

type Props = {
  label: string;
  onPress: () => void;
  disabled?: boolean;
} & Pick<ComponentProps<typeof Pressable>, 'testID'>;

export function ActionButton({ label, onPress, disabled = false, testID }: Props) {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      testID={testID}
      accessible
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{ disabled }}
      hitSlop={8}
      className="h-11 min-w-11 items-center justify-center rounded-lg bg-aggie-blue px-4 active:opacity-70"
    >
      <Text className="text-base font-semibold text-white">{label}</Text>
    </Pressable>
  );
}

// tailwind.config.js theme extension — use as className
'aggie-blue'    // #022851  — primary brand, headers, key actions
'ucd-blue'      // #5D94FA  — active states, links, tab icons
'sub-blue'      // #AAB3BC  — secondary text, muted elements
'ui-grey'       // #F5F5F5  — screen backgrounds
'light-grey'    // #F8F8F8  — card backgrounds

const cardShadow = StyleSheet.create({
  shadow: {
    // iOS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 4,
    // Android
    elevation: 3,
    backgroundColor: '#fff', // elevation requires a background color on Android
  },
});

// Correct
<Pressable
  onPress={fn}
  className="active:opacity-70"
  hitSlop={8}
  accessible
  accessibilityRole="button"
  accessibilityLabel="Open settings"
>
  ...
</Pressable>

// Wrong — do not use
<TouchableOpacity onPress={fn}>...</TouchableOpacity>

<Pressable
  onPress={goBack}
  hitSlop={12}
  accessible
  accessibilityRole="button"
  accessibilityLabel="Go back"
  className="p-2"
>
  <HugeiconsIcon icon={ArrowLeft01Icon} size={24} color={AGGIE_BLUE} />
</Pressable>

// Fixed-size UI (e.g., tab bar label) — opt out of scaling
<Text allowFontScaling={false} className="text-xs">TAB</Text>

// Content text — always allow scaling (default is true, but be explicit)
<Text allowFontScaling className="text-base">Body content</Text>

import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  renderItem={({ item }) => <ItemRow item={item} />}
  estimatedItemSize={72}        // Required — measure your row height
  keyExtractor={(item) => item.id}
  contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}
  ListEmptyComponent={<EmptyState />}
/>

import { router } from 'expo-router';
import { Link } from 'expo-router';

// Programmatic
router.push('/Maps/Library/room-123/book');
router.back();

// Declarative
<Link href="/More" asChild>
  <Pressable ...>...</Pressable>
</Link>

import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Stack } from 'expo-router';

export default function MyScreen() {
  const insets = useSafeAreaInsets();

  return (
    <>
      <Stack.Screen options={{ title: 'Screen Title', headerShown: true }} />
      <View
        className="flex-1 bg-ui-grey"
        style={{ paddingBottom: insets.bottom }}
      >
        {/* content */}
      </View>
    </>
  );
}

import { useQuery } from '@tanstack/react-query';
import { fetchLibraryRooms } from '~/services/library';

export function useLibraryRooms() {
  return useQuery({
    queryKey: ['library', 'rooms'],
    queryFn: fetchLibraryRooms,
    staleTime: 5 * 60 * 1000,   // 5 min — adjust per data freshness needs
    retry: 2,
  });
}

const isFocused = useIsFocused();
const { data } = useQuery({ ..., enabled: isFocused });

type MyContextType = {
  value: string;
  setValue: (v: string) => void;
};

const MyContext = createContext<MyContextType | null>(null);

export function MyProvider({ children }: { children: React.ReactNode }) {
  const [value, setValue] = useState('');
  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
}

export function useMyContext(): MyContextType {
  const ctx = useContext(MyContext);
  if (!ctx) throw new Error('useMyContext must be used within MyProvider');
  return ctx;
}

import { Platform } from 'react-native';

const hitSlop = Platform.select({ ios: 8, android: 12, default: 8 });

const headerStyle = Platform.select({
  ios: { shadowOpacity: 0.1, shadowRadius: 4 },
  android: { elevation: 4 },
  default: {},
});

<Pressable
  android_ripple={{ color: 'rgba(0,0,0,0.08)', borderless: false }}
  className="active:opacity-90"
  ...
>

import { KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  className="flex-1"
>
  {/* form content */}
</KeyboardAvoidingView>

Tap targets     ≥ 44×44 pts  (use hitSlop to pad small icons)
Color contrast  ≥ 4.5:1 text, ≥ 3:1 UI components
Focus order     logical top-to-bottom, left-to-right

accessible                              // groups children for screen reader
accessibilityRole="button|link|header|image|none|..."
accessibilityLabel="Descriptive name"   // required if no visible text
accessibilityHint="What happens"        // optional but recommended for ambiguous actions
accessibilityState={{ disabled, selected, checked, expanded, busy }}

// Decorative — hide from screen readers
<Image accessible={false} ... />

// Meaningful
<Image
  accessible
  accessibilityRole="image"
  accessibilityLabel="Campus map showing Shields Library"
  ...
/>

<ActivityIndicator
  accessible
  accessibilityRole="progressbar"
  accessibilityLabel="Loading bus routes"
/>

// Correct
const data = MySchema.parse(rawApiResponse);

// Wrong
const data = rawApiResponse as MyType;

type ButtonProps = {
  label: string;
} & Pick<ComponentProps<typeof Pressable>, 'onPress' | 'disabled' | 'testID'>;

import BottomSheet, { BottomSheetView, BottomSheetFlatList } from '@gorhom/bottom-sheet';
import { useRef, useMemo } from 'react';

export function MySheet() {
  const sheetRef = useRef<BottomSheet>(null);
  const snapPoints = useMemo(() => ['40%', '85%'], []);

  return (
    <BottomSheet
      ref={sheetRef}
      index={0}
      snapPoints={snapPoints}
      enablePanDownToClose
      backgroundStyle={{ borderRadius: 16 }}
      handleIndicatorStyle={{ backgroundColor: '#ccc', width: 40 }}
    >
      <BottomSheetView className="flex-1 px-4">
        {/* content */}
      </BottomSheetView>
    </BottomSheet>
  );
}

import { HugeiconsIcon } from '@hugeicons/react-native';
import { SearchIcon } from '@hugeicons/core-free-icons';

<HugeiconsIcon
  icon={SearchIcon}
  size={24}         // Default: 24. Use 20 for dense UI, 28 for prominent actions
  color={AGGIE_BLUE}
  strokeWidth={1.5} // Default stroke — do not change without design approval
/>

DB  (Drizzle)  →  DbResult<T>
API            →  ApiResponse<T>
Service        →  ServiceResult<T>
UI             →  consumes ServiceResult<T> only

// DB layer — wraps Drizzle query results
class DbResult<T> {
  static success<T>(data?: T): DbResult<T>
  static error(error: string, errorCode?: number): DbResult<any>

  constructor(
    public success: boolean,
    public data?: T,
    public error?: string,
    public errorCode?: number,
  ) {}
}

// API layer — wraps fetch/HTTP results
class ApiResponse<T> {
  static success<T>(statusCode: number, data?: T, message?: string): ApiResponse<T>
  static error(statusCode: number, error: string, message?: string): ApiResponse<any>

  constructor(
    public success: boolean,
    public data?: T,
    public error?: string,
    public message: string = '',
    public statusCode?: number,
  ) {}
}

// Service layer — what UI consumes
class ServiceResult<T> {
  static success<T>(data?: T): ServiceResult<T>
  static successFrom<T>(dbResult: DbResult<T>): ServiceResult<T>
  static error(error: string, errorCode?: number): ServiceResult<any>
  static errorFrom<T>(dbResult: DbResult<T>): ServiceResult<T>

  constructor(
    public success: boolean,
    public data?: T,
    public error?: string,
    public errorCode?: number,
  ) {}
}

export async function getUser(id: string): Promise<DbResult<User>> {
  try {
    const user = await db.query.users.findFirst({ where: eq(users.id, id) });
    if (!user) return DbResult.error('User not found', 404);
    return DbResult.success(user);
  } catch (e: unknown) {
    return DbResult.error((e as Error)?.message ?? 'SQLite error', 500);
  }
}

export async function fetchUserFromApi(id: string): Promise<ApiResponse<User>> {
  try {
    const res = await fetch(`${API_BASE}/users/${id}`);
    const json = await res.json();
    if (!res.ok) return ApiResponse.error(res.status, json.error ?? 'Request failed');
    return ApiResponse.success(res.status, json);
  } catch (e: unknown) {
    return ApiResponse.error(503, (e as Error)?.message ?? 'Network error');
  }
}

export async function loadUserProfile(id: string): Promise<ServiceResult<User>> {
  const local = await getUser(id);
  if (local.success && local.data) return ServiceResult.successFrom(local);
  if (!local.success && local.errorCode !== 404) return ServiceResult.errorFrom(local);

  // Not in DB — fetch from API
  const remote = await fetchUserFromApi(id);
  if (!remote.success) return ServiceResult.error(remote.error!, remote.statusCode);

  await saveUser(remote.data!);
  return ServiceResult.success(remote.data);
}

export function ProfileScreen() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | undefined>();
  const [user, setUser] = useState<User | undefined>();
  const { id } = useLocalSearchParams<{ id: string }>();

  const load = async () => {
    setLoading(true);
    const res = await loadUserProfile(id);
    if (res.success) setUser(res.data);
    else setError(res.error);
    setLoading(false);
  };

  useEffect(() => { load(); }, []);

  if (loading) return <Spinner />;
  if (error) return <ErrorView message={error} onRetry={load} />;
  if (!user) return <EmptyState title="No user" />;
  return <ProfileView user={user} />;
}