msell sticker-smash-lit .cursorrules file for TypeScript

# Cursor AI Configuration

## General Project Context

This is a React-Native project that follows these principles:

- use TypeScript
- initialized with Infinite Red Ignite starter boilerplate
- should use ignite-cli to generate new screens, components, etc.
- use reactotron for console logs - console logs should use this format: `console.tron.log("Sweet Freedom!")`
- uses expo router for navigation with typescript
- When using a component that is typically imported from React-Native like Button, Text, etc import the one from @/components folder if one exists by the same name
- i18n resource files are used for copy within the app. We only care about Engilsh right now so the copy should be in `@/i18n/en.ts`. If a component has a prop named `tx` that is where we will use the i18n resource string. For example:

```tsx
<Text tx="welcomeScreen:exciting" />
```

## Code Style Preferences

When generating or modifying code:

- Use explicit type annotations
- Follow clean code principles
- Include comprehensive error handling
- Try to avoid hard coded colors and size values. Use the `spacing` values specified in `src/theme/spacing.ts` when possible.

We don't use StyleSheet.create() as a general rule, as it doesn't provide any real benefits over bare objects and functions.

We instead use a strategy of bare JS objects and functions that take a theme parameter, colocated with our components (usually below the component in the file), prefixed with $, and typed with TypeScript:

```tsx
import { View, type ViewStyle } from "react-native"
import { useAppTheme } from "@/utils/useAppTheme"

const MyComponent = () => {
  const { themed } = useAppTheme()
  return (
    <View style={themed($container)}>
      <View style={$plainObjectStyle} />
    </View>
  )
}

const $container: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
  flex: 1,
  backgroundColor: colors.background,
  paddingHorizontal: spacing.small,
})

const $plainObjectStyle: ViewStyle = {
  marginBottom: 20,
}
```

here are some values used in our theme for spacing etc

export const spacing = {
xxxs: 2,
xxs: 4,
xs: 8,
sm: 12,
md: 16,
lg: 24,
xl: 32,
xxl: 48,
xxxl: 64,
} as const

const palette = {
neutral100: "#FFFFFF",
neutral200: "#F4F2F1",
neutral300: "#D7CEC9",
neutral400: "#B6ACA6",
neutral500: "#978F8A",
neutral600: "#564E4A",
neutral700: "#3C3836",
neutral800: "#191015",
neutral900: "#000000",

primary100: "#F4E0D9",
primary200: "#E8C1B4",
primary300: "#DDA28E",
primary400: "#D28468",
primary500: "#C76542",
primary600: "#A54F31",

secondary100: "#DCDDE9",
secondary200: "#BCC0D6",
secondary300: "#9196B9",
secondary400: "#626894",
secondary500: "#41476E",

accent100: "#FFEED4",
accent200: "#FFE1B2",
accent300: "#FDD495",
accent400: "#FBC878",
accent500: "#FFBB50",

angry100: "#F2D6CD",
angry500: "#C03403",

overlay20: "rgba(25, 16, 21, 0.2)",
overlay50: "rgba(25, 16, 21, 0.5)",
} as const

export const colors = {
/\*\*

- The palette is available to use, but prefer using the name.
- This is only included for rare, one-off cases. Try to use
- semantic names as much as possible.
  \*/
  palette,
  /\*\*
- A helper for making something see-thru.
  \*/
  transparent: "rgba(0, 0, 0, 0)",
  /\*\*
- The default text color in many components.
  \*/
  text: palette.neutral800,
  /\*\*
- Secondary text information.
  \*/
  textDim: palette.neutral600,
  /\*\*
- The default color of the screen background.
  \*/
  background: palette.neutral200,
  /\*\*
- The default border color.
  \*/
  border: palette.neutral400,
  /\*\*
- The main tinting color.
  \*/
  tint: palette.primary500,
  /\*\*
- The inactive tinting color.
  \*/
  tintInactive: palette.neutral300,
  /\*\*
- A subtle color used for lines.
  \*/
  separator: palette.neutral300,
  /\*\*
- Error messages.
  \*/
  error: palette.angry500,
  /\*\*
- Error Background.
  \*/
  errorBackground: palette.angry100,
  } as const