Skip to content

Commit 8b518f1

Browse files
yjoseyjose
committed
feat: add cursor rules + few prompts
1 parent c312294 commit 8b518f1

File tree

5 files changed

+438
-0
lines changed

5 files changed

+438
-0
lines changed

‎.cursorrules‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
# React Native/Expo Project
2+
3+
You are an expert in TypeScript, React Native, Expo, and Mobile UI development with Nativewind.
4+
5+
Every time you choose to apply a rule(s), explicitly state the rule(s) in the output. You can abbreviate the rule description to a single word or phrase.
6+
7+
## Project Context
8+
9+
## Code Style and Structure
10+
11+
- Write concise, technical TypeScript code with accurate examples
12+
- Use functional and declarative programming patterns; avoid classes
13+
- Prefer iteration and modularization over code duplication
14+
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
15+
- Ensure components are modular, reusable, and maintainable.
16+
- Component Modularity: Break down components into smaller, reusable pieces. Keep components focused on a single responsibility and shouldn't be more than 80 lines of code.
17+
- To install new packages use `npx expo install <package-name>`
18+
- Structure repository files as follows:
19+
20+
```
21+
src
22+
├── api ## API related code, mainly using axios and react query
23+
├── app ## the main entry point for expo router(file-based routing), when you can find screens and navigation setup
24+
├── components ## shared components
25+
│ ├── card.tsx
26+
│ └── ui ## core ui components. buttons, inputs, etc
27+
├── lib ## shared libraries, auth, env, hooks, i18n, storage, test-utils, utils
28+
├── translations ## translations files for the app
29+
├── types ## shared types
30+
31+
```
32+
33+
## Tech Stack
34+
35+
- Expo
36+
- React Native
37+
- TypeScript
38+
- Nativewind ( Tailwind CSS for React Native )
39+
- Expo Router
40+
- React Query with React Query Kit
41+
- Zustand
42+
- React Native Keyboard Controller
43+
- React Native SVG
44+
- React Native MMKV
45+
46+
## Naming Conventions
47+
48+
- Favor named exports for components and utilities
49+
- Use kebabCase for all files names and directories (e.g., visa-form.tsx)
50+
51+
## TypeScript Usage
52+
53+
- Use TypeScript for all code; prefer types over interfaces
54+
- Avoid enums; use const objects with 'as const' assertion
55+
- Use functional components with TypeScript interfaces
56+
- Define strict types for message passing between different parts of the extension
57+
- Use absolute imports for all files @/...
58+
- Avoid try/catch blocks unless there's good reason to translate or handle error in that abstraction
59+
- Use explicit return types for all functions
60+
61+
## State Management
62+
63+
- Use React Zustand for global state management
64+
- Implement proper cleanup in useEffect hooks
65+
66+
## Syntax and Formatting
67+
68+
- Use "function" keyword for pure functions
69+
- Avoid unnecessary curly braces in conditionals
70+
- Use declarative JSX
71+
- Implement proper TypeScript discriminated unions for message types
72+
73+
## UI and Styling
74+
75+
- Use Nativewind for styling and components
76+
- Use built-in ui components such as Button, Input from `@components/ui`
77+
- Ensure high accessibility (a11y) standards using ARIA roles and native accessibility props.
78+
- Leverage react-native-reanimated and react-native-gesture-handler for performant animations and gestures.
79+
- Avoid unnecessary re-renders by memoizing components and using useMemo and useCallback hooks appropriately.
80+
- Make sure to use defined colors and fonts in the tailwind config file.
81+
82+
Here is a simple example of how a component should be written using :
83+
84+
```tsx
85+
import * as React from 'react';
86+
87+
import { Text, View, Image, SavaAreaView } from '@/components/ui';
88+
89+
// Props should be defined in the top of the component
90+
type Props = {
91+
text: string;
92+
};
93+
94+
export function Title({ text }: Props) {
95+
return (
96+
<View className="flex-row items-center justify-center py-4 pb-2">
97+
<Text className="pr-2 text-2xl">{text}</Text>
98+
<View className="h-[2px] flex-1 bg-neutral-300" />
99+
100+
<Image
101+
source={require('@assets/images/demo.png')}
102+
style={{ width: 24, height: 24 }}
103+
contentFit="contain"
104+
/>
105+
</View>
106+
);
107+
}
108+
```
109+
110+
## Error Handling
111+
112+
- Log errors appropriately for debugging
113+
- Provide user-friendly error messages
114+
115+
## Testing
116+
117+
- Write unit tests using Jest and React Native Testing Library.
118+
- Write unit tests for utilities and complex components
119+
- The test file should be named like the component file but with the .test.tsx extension (e.g., component-name.test.tsx)
120+
- Do not write unit tests for simple components that only show data
121+
122+
## Git Usage
123+
124+
Commit Message Prefixes:
125+
126+
- "fix:" for bug fixes
127+
- "feat:" for new features
128+
- "perf:" for performance improvements
129+
- "docs:" for documentation changes
130+
- "style:" for formatting changes
131+
- "refactor:" for code refactoring
132+
- "test:" for adding missing tests
133+
- "chore:" for maintenance tasks
134+
135+
Rules:
136+
137+
- Use lowercase for commit messages
138+
- Keep the summary line concise with a maximum of 100 characters
139+
- Reference issue numbers when applicable
140+
141+
## Documentation
142+
143+
- Maintain clear README with the following sections:
144+
- Setup ( how to install and run the project )
145+
- Usage ( listing all the commands and how to use them )
146+
- Stack ( the tech stack used in the project )
147+
- Folder Structure ( the folder structure of the project only the important ones inside src )

‎prompts/expo-doctor.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
You are an expert in TypeScript, Expo, and React Native.
2+
3+
You are given a React Native project and you are tasked with fixing the project dependencies.
4+
5+
You should follow the following steps:
6+
7+
1. Run expo doctor command using `pnpm run doctor`
8+
2. Analyze the check results and provide an explanation of what we need to do to fix the issues
9+
3. Run commands to fix the issues in case there are any
10+
4. Run expo doctor command again to check if the issues are fixed
11+
5. If the issues is fixed, make sure to commit changes for package.json and pnpm-lock.yaml with the message `git add package.json pnpm-lock.yaml && git commit -m "fix(deps): expo doctor issues"`

‎prompts/image-to-components.md‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
You are an expert in TypeScript, React Native, Expo, and Mobile UI development with Nativewind.
2+
3+
Using the provided image, create a React Native component that matches the design.
4+
5+
The component should be a functional component and should be styled with Nativewind.
6+
7+
Follow the following steps:
8+
9+
1. Layout Analysis:
10+
11+
- Describe the main layout structure you observe in the image
12+
- Identify key UI components (buttons, cards, lists, etc.)
13+
- Identify components from `@/components/ui` we can use to build the layout if needed
14+
- Note any specific spacing, alignment, or positioning patterns
15+
16+
2. Component Implementation:
17+
18+
- Use Nativewind for styling
19+
- Use shared components from `@/components/ui` in case you need them
20+
- Component should be accessible and follow the accessibility best practices
21+
- Prefer using colors from tailwind config
22+
- For images, use a placeholder image from `@assets/images/placeholder.png`
23+
- Animated View doesn't support `className` prop, so you need to use `style` prop instead
24+
25+
## Example
26+
27+
Here is a example of how to write the component:
28+
29+
```tsx
30+
import * as React from 'react';
31+
32+
import { Text, View, Image, SavaAreaView } from '@/components/ui';
33+
34+
// Props should be defined in the top of the component
35+
type TitleProps = {
36+
text: string;
37+
};
38+
39+
export function Title({ text }: TitleProps) {
40+
return (
41+
<View className="flex-row items-center justify-center py-4 pb-2">
42+
<Text className="pr-2 text-2xl">{text}</Text>
43+
<View className="h-[2px] flex-1 bg-neutral-300" />
44+
<Image
45+
source={require('@assets/images/placeholder.png')}
46+
style={{ width: 24, height: 24 }}
47+
contentFit="contain"
48+
/>
49+
</View>
50+
);
51+
}
52+
```
53+
54+
- If the screen is a form, create a form component that uses `react-hook-form` and `zod` to validate the form data and handle the form submission using the `onSubmit` prop and a console log of the form data for debugging
55+
56+
Here is an example of how to write the form component:
57+
58+
```tsx
59+
import { zodResolver } from '@hookform/resolvers/zod';
60+
import React from 'react';
61+
import type { SubmitHandler } from 'react-hook-form';
62+
import { useForm } from 'react-hook-form';
63+
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
64+
import * as z from 'zod';
65+
66+
import { Button, ControlledInput, Text, View } from '@/components/ui';
67+
68+
const schema = z.object({
69+
name: z.string().optional(),
70+
email: z
71+
.string({
72+
required_error: 'Email is required',
73+
})
74+
.email('Invalid email format'),
75+
password: z
76+
.string({
77+
required_error: 'Password is required',
78+
})
79+
.min(6, 'Password must be at least 6 characters'),
80+
});
81+
82+
export type FormType = z.infer<typeof schema>;
83+
84+
export type LoginFormProps = {
85+
onSubmit?: SubmitHandler<FormType>;
86+
};
87+
88+
export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => {
89+
const { handleSubmit, control } = useForm<FormType>({
90+
resolver: zodResolver(schema),
91+
});
92+
return (
93+
<KeyboardAvoidingView
94+
style={{ flex: 1 }}
95+
behavior="padding"
96+
keyboardVerticalOffset={10}
97+
>
98+
<View className="flex-1 justify-center p-4">
99+
<View className="items-center justify-center">
100+
<Text
101+
testID="form-title"
102+
className="pb-6 text-center text-4xl font-bold"
103+
>
104+
Sign In
105+
</Text>
106+
107+
<Text className="mb-6 max-w-xs text-center text-gray-500">
108+
Welcome! 👋 This is a demo login screen! Feel free to use any email
109+
and password to sign in and try it out.
110+
</Text>
111+
</View>
112+
113+
<ControlledInput
114+
testID="name"
115+
control={control}
116+
name="name"
117+
label="Name"
118+
/>
119+
120+
<ControlledInput
121+
testID="email-input"
122+
control={control}
123+
name="email"
124+
label="Email"
125+
/>
126+
<ControlledInput
127+
testID="password-input"
128+
control={control}
129+
name="password"
130+
label="Password"
131+
placeholder="***"
132+
secureTextEntry={true}
133+
/>
134+
<Button
135+
testID="login-button"
136+
label="Login"
137+
onPress={handleSubmit(onSubmit)}
138+
/>
139+
</View>
140+
</KeyboardAvoidingView>
141+
);
142+
};
143+
```

‎prompts/svg-icon.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
You are an expert in TypeScript, Expo, nativeWind and React Native
2+
3+
You are given an svg icon as string file or url and you are tasked with creating a react native component for it.
4+
5+
You should follow the following steps:
6+
7+
1. Analyze the svg icon and create a react native component for it
8+
2. The component should be named after the svg file or the user will provide the name
9+
3. The component should be placed in the src/components/ui/icons folder
10+
4. The component should be exported in the src/components/ui/icons/index.ts file
11+
12+
Here is an example of how to create a react native component for an svg icon:
13+
14+
```tsx
15+
import * as React from 'react';
16+
import Svg, { Path, type SvgProps } from 'react-native-svg';
17+
18+
export function ArrowLeft({
19+
color = 'white',
20+
size = 24,
21+
...props
22+
}: SvgProps & { size?: number }) {
23+
return (
24+
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
25+
<Path
26+
d="m12 19-7-7 7-7"
27+
stroke={color}
28+
strokeWidth={2}
29+
strokeLinecap="round"
30+
strokeLinejoin="round"
31+
/>
32+
<Path
33+
d="M19 12H5"
34+
stroke={color}
35+
strokeWidth={2}
36+
strokeLinecap="round"
37+
strokeLinejoin="round"
38+
/>
39+
</Svg>
40+
);
41+
}
42+
```

0 commit comments

Comments
 (0)