@rich-apis/cursorrules 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -0
- package/bin/cli.js +111 -0
- package/index.js +66 -0
- package/package.json +39 -0
- package/templates/fastapi.cursorrules +88 -0
- package/templates/nextjs.cursorrules +58 -0
- package/templates/react-native.cursorrules +89 -0
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# @rich-apis/cursorrules
|
|
2
|
+
|
|
3
|
+
Professional `.cursorrules` templates for [Cursor AI](https://cursor.sh). One command to set up battle-tested AI coding rules for your project.
|
|
4
|
+
|
|
5
|
+
More templates and vibe coding tips: **[t.me/vibecodingtips_original](https://t.me/vibecodingtips_original)**
|
|
6
|
+
|
|
7
|
+
## Quick Start
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# Copy a template to your project
|
|
11
|
+
npx @rich-apis/cursorrules init nextjs
|
|
12
|
+
npx @rich-apis/cursorrules init fastapi
|
|
13
|
+
npx @rich-apis/cursorrules init react-native
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
That's it. Open your project in Cursor and the rules are active.
|
|
17
|
+
|
|
18
|
+
## Available Templates
|
|
19
|
+
|
|
20
|
+
| Template | Stack | Highlights |
|
|
21
|
+
|----------|-------|------------|
|
|
22
|
+
| `nextjs` | Next.js 14+, TypeScript, Tailwind | App Router, Server Components, Server Actions, Zod validation |
|
|
23
|
+
| `fastapi` | Python 3.11+, FastAPI, Pydantic v2 | 3-layer architecture, async, SQLAlchemy 2.0, Alembic |
|
|
24
|
+
| `react-native` | React Native / Expo, TypeScript | React Navigation, Zustand, React Query, FlashList |
|
|
25
|
+
|
|
26
|
+
## What's Inside
|
|
27
|
+
|
|
28
|
+
Each template defines:
|
|
29
|
+
|
|
30
|
+
- **Tech stack** expectations so the AI uses the right libraries
|
|
31
|
+
- **Code style** rules (naming, structure, patterns)
|
|
32
|
+
- **Architecture** guidelines (where logic lives, layering)
|
|
33
|
+
- **Performance** best practices specific to the framework
|
|
34
|
+
- **Security** rules the AI must follow
|
|
35
|
+
- **Testing** expectations and patterns
|
|
36
|
+
|
|
37
|
+
## CLI Usage
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
# List all templates
|
|
41
|
+
npx @rich-apis/cursorrules list
|
|
42
|
+
|
|
43
|
+
# Initialize a template
|
|
44
|
+
npx @rich-apis/cursorrules init <template>
|
|
45
|
+
|
|
46
|
+
# Help
|
|
47
|
+
npx @rich-apis/cursorrules --help
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Programmatic Usage
|
|
51
|
+
|
|
52
|
+
```js
|
|
53
|
+
const { getTemplate, listTemplates } = require('@rich-apis/cursorrules');
|
|
54
|
+
|
|
55
|
+
// Get template content
|
|
56
|
+
const rules = getTemplate('nextjs');
|
|
57
|
+
|
|
58
|
+
// List available templates
|
|
59
|
+
const templates = listTemplates();
|
|
60
|
+
// [{ id: 'nextjs', name: 'Next.js', description: '...' }, ...]
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Customization
|
|
64
|
+
|
|
65
|
+
The templates are starting points. After running `init`, edit `.cursorrules` to match your project:
|
|
66
|
+
|
|
67
|
+
- Add your specific libraries and versions
|
|
68
|
+
- Adjust architecture rules to your codebase
|
|
69
|
+
- Add project-specific conventions
|
|
70
|
+
- Include domain terminology
|
|
71
|
+
|
|
72
|
+
## Why .cursorrules?
|
|
73
|
+
|
|
74
|
+
Cursor AI reads `.cursorrules` from your project root to understand your coding standards. Without rules, the AI guesses. With good rules, it writes code that fits your codebase from the first try.
|
|
75
|
+
|
|
76
|
+
## More Resources
|
|
77
|
+
|
|
78
|
+
- **[Vibe Coding Tips](https://t.me/vibecodingtips_original)** - Telegram channel with daily AI coding tips
|
|
79
|
+
- **[Cursor Docs](https://docs.cursor.com)** - Official Cursor documentation
|
|
80
|
+
|
|
81
|
+
## License
|
|
82
|
+
|
|
83
|
+
MIT
|
package/bin/cli.js
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
'use strict';
|
|
4
|
+
|
|
5
|
+
const fs = require('fs');
|
|
6
|
+
const path = require('path');
|
|
7
|
+
|
|
8
|
+
const TEMPLATES = {
|
|
9
|
+
nextjs: 'nextjs.cursorrules',
|
|
10
|
+
fastapi: 'fastapi.cursorrules',
|
|
11
|
+
'react-native': 'react-native.cursorrules',
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const TEMPLATE_DIR = path.join(__dirname, '..', 'templates');
|
|
15
|
+
|
|
16
|
+
function showHelp() {
|
|
17
|
+
console.log(`
|
|
18
|
+
@rich-apis/cursorrules - Professional .cursorrules templates
|
|
19
|
+
|
|
20
|
+
Usage:
|
|
21
|
+
npx @rich-apis/cursorrules init [template] Copy a template to your project
|
|
22
|
+
npx @rich-apis/cursorrules list List available templates
|
|
23
|
+
|
|
24
|
+
Templates:
|
|
25
|
+
nextjs Next.js 14+ (App Router, TypeScript, Tailwind)
|
|
26
|
+
fastapi FastAPI (Python, Pydantic v2, SQLAlchemy)
|
|
27
|
+
react-native React Native / Expo (TypeScript, React Navigation)
|
|
28
|
+
|
|
29
|
+
Examples:
|
|
30
|
+
npx @rich-apis/cursorrules init nextjs
|
|
31
|
+
npx @rich-apis/cursorrules init fastapi
|
|
32
|
+
npx @rich-apis/cursorrules list
|
|
33
|
+
|
|
34
|
+
More templates and tips: https://t.me/vibecodingtips_original
|
|
35
|
+
`);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function listTemplates() {
|
|
39
|
+
console.log('\nAvailable .cursorrules templates:\n');
|
|
40
|
+
for (const [name, file] of Object.entries(TEMPLATES)) {
|
|
41
|
+
const content = fs.readFileSync(path.join(TEMPLATE_DIR, file), 'utf8');
|
|
42
|
+
const firstLine = content.split('\n').find(l => l.startsWith('#'));
|
|
43
|
+
const desc = firstLine ? firstLine.replace(/^#\s*/, '') : name;
|
|
44
|
+
console.log(` ${name.padEnd(16)} ${desc}`);
|
|
45
|
+
}
|
|
46
|
+
console.log('\nUsage: npx @rich-apis/cursorrules init <template>');
|
|
47
|
+
console.log('More templates: https://t.me/vibecodingtips_original\n');
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function initTemplate(templateName) {
|
|
51
|
+
if (!templateName) {
|
|
52
|
+
console.error('Error: Please specify a template name.');
|
|
53
|
+
console.log('Available templates: ' + Object.keys(TEMPLATES).join(', '));
|
|
54
|
+
console.log('Usage: npx @rich-apis/cursorrules init <template>');
|
|
55
|
+
process.exit(1);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
const normalized = templateName.toLowerCase().trim();
|
|
59
|
+
|
|
60
|
+
if (!TEMPLATES[normalized]) {
|
|
61
|
+
console.error(`Error: Unknown template "${templateName}".`);
|
|
62
|
+
console.log('Available templates: ' + Object.keys(TEMPLATES).join(', '));
|
|
63
|
+
process.exit(1);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
const src = path.join(TEMPLATE_DIR, TEMPLATES[normalized]);
|
|
67
|
+
const dest = path.join(process.cwd(), '.cursorrules');
|
|
68
|
+
|
|
69
|
+
if (fs.existsSync(dest)) {
|
|
70
|
+
console.log('Warning: .cursorrules already exists in this directory.');
|
|
71
|
+
console.log('Overwriting with the ' + normalized + ' template...');
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
try {
|
|
75
|
+
fs.copyFileSync(src, dest);
|
|
76
|
+
console.log(`\n Created .cursorrules (${normalized} template)\n`);
|
|
77
|
+
console.log(' Open your project in Cursor and the rules will be active.');
|
|
78
|
+
console.log(' Customize the rules to match your specific project.\n');
|
|
79
|
+
console.log(' More templates & tips: https://t.me/vibecodingtips_original');
|
|
80
|
+
console.log('');
|
|
81
|
+
} catch (err) {
|
|
82
|
+
console.error('Error writing .cursorrules:', err.message);
|
|
83
|
+
process.exit(1);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// Parse arguments
|
|
88
|
+
const args = process.argv.slice(2);
|
|
89
|
+
const command = args[0];
|
|
90
|
+
|
|
91
|
+
switch (command) {
|
|
92
|
+
case 'init':
|
|
93
|
+
initTemplate(args[1]);
|
|
94
|
+
break;
|
|
95
|
+
case 'list':
|
|
96
|
+
listTemplates();
|
|
97
|
+
break;
|
|
98
|
+
case '--help':
|
|
99
|
+
case '-h':
|
|
100
|
+
case 'help':
|
|
101
|
+
showHelp();
|
|
102
|
+
break;
|
|
103
|
+
default:
|
|
104
|
+
if (!command) {
|
|
105
|
+
showHelp();
|
|
106
|
+
} else {
|
|
107
|
+
console.error(`Unknown command: ${command}`);
|
|
108
|
+
showHelp();
|
|
109
|
+
process.exit(1);
|
|
110
|
+
}
|
|
111
|
+
}
|
package/index.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @rich-apis/cursorrules
|
|
5
|
+
* Professional .cursorrules templates for Cursor AI.
|
|
6
|
+
*
|
|
7
|
+
* CLI usage: npx @rich-apis/cursorrules init <template>
|
|
8
|
+
*
|
|
9
|
+
* Programmatic usage:
|
|
10
|
+
* const { getTemplate, listTemplates } = require('@rich-apis/cursorrules');
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
const fs = require('fs');
|
|
14
|
+
const path = require('path');
|
|
15
|
+
|
|
16
|
+
const TEMPLATE_DIR = path.join(__dirname, 'templates');
|
|
17
|
+
|
|
18
|
+
const TEMPLATES = {
|
|
19
|
+
nextjs: {
|
|
20
|
+
file: 'nextjs.cursorrules',
|
|
21
|
+
name: 'Next.js',
|
|
22
|
+
description: 'Next.js 14+ with App Router, TypeScript, and Tailwind CSS',
|
|
23
|
+
},
|
|
24
|
+
fastapi: {
|
|
25
|
+
file: 'fastapi.cursorrules',
|
|
26
|
+
name: 'FastAPI',
|
|
27
|
+
description: 'FastAPI with Pydantic v2, SQLAlchemy 2.0, and async support',
|
|
28
|
+
},
|
|
29
|
+
'react-native': {
|
|
30
|
+
file: 'react-native.cursorrules',
|
|
31
|
+
name: 'React Native',
|
|
32
|
+
description: 'React Native / Expo with TypeScript and React Navigation',
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Get the content of a template.
|
|
38
|
+
* @param {string} name - Template name: "nextjs", "fastapi", or "react-native"
|
|
39
|
+
* @returns {string} Template content
|
|
40
|
+
* @throws {Error} If template name is unknown
|
|
41
|
+
*/
|
|
42
|
+
function getTemplate(name) {
|
|
43
|
+
const template = TEMPLATES[name];
|
|
44
|
+
if (!template) {
|
|
45
|
+
throw new Error(`Unknown template: "${name}". Available: ${Object.keys(TEMPLATES).join(', ')}`);
|
|
46
|
+
}
|
|
47
|
+
return fs.readFileSync(path.join(TEMPLATE_DIR, template.file), 'utf8');
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* List available templates.
|
|
52
|
+
* @returns {Array<{ id: string, name: string, description: string }>}
|
|
53
|
+
*/
|
|
54
|
+
function listTemplates() {
|
|
55
|
+
return Object.entries(TEMPLATES).map(([id, info]) => ({
|
|
56
|
+
id,
|
|
57
|
+
name: info.name,
|
|
58
|
+
description: info.description,
|
|
59
|
+
}));
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
module.exports = {
|
|
63
|
+
getTemplate,
|
|
64
|
+
listTemplates,
|
|
65
|
+
TEMPLATES: Object.keys(TEMPLATES),
|
|
66
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@rich-apis/cursorrules",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Professional .cursorrules templates for Next.js, FastAPI, and React Native projects",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"bin": {
|
|
7
|
+
"cursorrules": "bin/cli.js"
|
|
8
|
+
},
|
|
9
|
+
"files": [
|
|
10
|
+
"index.js",
|
|
11
|
+
"bin/",
|
|
12
|
+
"templates/"
|
|
13
|
+
],
|
|
14
|
+
"keywords": [
|
|
15
|
+
"cursorrules",
|
|
16
|
+
"cursor",
|
|
17
|
+
"cursor rules",
|
|
18
|
+
"ai coding",
|
|
19
|
+
"vibe coding",
|
|
20
|
+
"cursor ide",
|
|
21
|
+
"cursor editor",
|
|
22
|
+
"nextjs",
|
|
23
|
+
"fastapi",
|
|
24
|
+
"react native",
|
|
25
|
+
"ai rules",
|
|
26
|
+
"coding assistant",
|
|
27
|
+
"cursor ai"
|
|
28
|
+
],
|
|
29
|
+
"author": "Rich APIs <npm@rich-apis.store>",
|
|
30
|
+
"license": "MIT",
|
|
31
|
+
"repository": {
|
|
32
|
+
"type": "git",
|
|
33
|
+
"url": "https://github.com/den-maxi/cursorrules"
|
|
34
|
+
},
|
|
35
|
+
"homepage": "https://github.com/den-maxi/cursorrules#readme",
|
|
36
|
+
"publishConfig": {
|
|
37
|
+
"access": "public"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# FastAPI Project Rules for Cursor AI
|
|
2
|
+
|
|
3
|
+
You are an expert Python/FastAPI developer building a production API.
|
|
4
|
+
|
|
5
|
+
## Tech Stack
|
|
6
|
+
- Python 3.11+
|
|
7
|
+
- FastAPI with Pydantic v2
|
|
8
|
+
- SQLAlchemy 2.0 (async) or Tortoise ORM
|
|
9
|
+
- Alembic for migrations
|
|
10
|
+
- pytest for testing
|
|
11
|
+
- Redis for caching (optional)
|
|
12
|
+
|
|
13
|
+
## Code Style
|
|
14
|
+
- Follow PEP 8 strictly
|
|
15
|
+
- Use type hints on all function signatures and variables
|
|
16
|
+
- Use `async def` for all route handlers
|
|
17
|
+
- Docstrings on all public functions (Google style)
|
|
18
|
+
- Maximum line length: 100 characters
|
|
19
|
+
- Use pathlib over os.path
|
|
20
|
+
|
|
21
|
+
## Project Structure
|
|
22
|
+
```
|
|
23
|
+
app/
|
|
24
|
+
api/
|
|
25
|
+
v1/
|
|
26
|
+
endpoints/ # Route handlers grouped by domain
|
|
27
|
+
dependencies.py
|
|
28
|
+
core/
|
|
29
|
+
config.py # Settings with pydantic-settings
|
|
30
|
+
security.py # Auth helpers
|
|
31
|
+
models/ # SQLAlchemy models
|
|
32
|
+
schemas/ # Pydantic request/response schemas
|
|
33
|
+
services/ # Business logic layer
|
|
34
|
+
repositories/ # Data access layer
|
|
35
|
+
main.py
|
|
36
|
+
tests/
|
|
37
|
+
conftest.py
|
|
38
|
+
api/
|
|
39
|
+
services/
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Architecture Rules
|
|
43
|
+
- 3-layer architecture: routes -> services -> repositories
|
|
44
|
+
- Routes handle HTTP concerns only (status codes, headers)
|
|
45
|
+
- Services contain business logic, never import FastAPI directly
|
|
46
|
+
- Repositories handle database queries only
|
|
47
|
+
- Use dependency injection via `Depends()` for everything
|
|
48
|
+
- Never put business logic in route handlers
|
|
49
|
+
|
|
50
|
+
## Pydantic Schemas
|
|
51
|
+
- Separate schemas for Create, Update, and Response
|
|
52
|
+
- Use `model_config = ConfigDict(from_attributes=True)` for ORM models
|
|
53
|
+
- Validate all inputs with Pydantic — never trust raw request data
|
|
54
|
+
- Use `Field()` with descriptions for auto-generated docs
|
|
55
|
+
|
|
56
|
+
## Error Handling
|
|
57
|
+
- Define custom exception classes for business errors
|
|
58
|
+
- Register exception handlers in main.py
|
|
59
|
+
- Always return structured error responses: `{"detail": "...", "code": "..."}`
|
|
60
|
+
- Use proper HTTP status codes (don't use 200 for errors)
|
|
61
|
+
|
|
62
|
+
## Security
|
|
63
|
+
- Use OAuth2 with JWT tokens
|
|
64
|
+
- Hash passwords with bcrypt via passlib
|
|
65
|
+
- Validate and sanitize all inputs
|
|
66
|
+
- Rate limit endpoints with slowapi
|
|
67
|
+
- CORS configuration: explicit allowed origins, never wildcard in production
|
|
68
|
+
- Never log sensitive data
|
|
69
|
+
|
|
70
|
+
## Database
|
|
71
|
+
- Use async sessions for all database operations
|
|
72
|
+
- Always use transactions for multi-step operations
|
|
73
|
+
- Index frequently queried columns
|
|
74
|
+
- Use `select_in_loading` to avoid N+1 queries
|
|
75
|
+
- Write Alembic migrations for every schema change
|
|
76
|
+
|
|
77
|
+
## Testing
|
|
78
|
+
- Use pytest with pytest-asyncio
|
|
79
|
+
- Create fixtures for database sessions, authenticated clients
|
|
80
|
+
- Test happy path AND error cases for every endpoint
|
|
81
|
+
- Use factories (factory_boy) for test data
|
|
82
|
+
- Target 80%+ test coverage
|
|
83
|
+
|
|
84
|
+
## Responses
|
|
85
|
+
- Explain reasoning before code
|
|
86
|
+
- Suggest performance improvements when relevant
|
|
87
|
+
- Flag potential security issues proactively
|
|
88
|
+
- Consider backward compatibility when changing API contracts
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Next.js Project Rules for Cursor AI
|
|
2
|
+
|
|
3
|
+
You are an expert Next.js developer working on a production application.
|
|
4
|
+
|
|
5
|
+
## Tech Stack
|
|
6
|
+
- Next.js 14+ (App Router)
|
|
7
|
+
- TypeScript (strict mode)
|
|
8
|
+
- Tailwind CSS for styling
|
|
9
|
+
- Prisma or Drizzle for database
|
|
10
|
+
- NextAuth.js or Clerk for authentication
|
|
11
|
+
|
|
12
|
+
## Code Style
|
|
13
|
+
- Use functional components exclusively
|
|
14
|
+
- Prefer Server Components by default; use 'use client' only when necessary
|
|
15
|
+
- Use named exports for components, default exports only for pages
|
|
16
|
+
- Colocate related files: component, styles, tests, types in the same directory
|
|
17
|
+
- File naming: kebab-case for files, PascalCase for components
|
|
18
|
+
|
|
19
|
+
## Architecture Rules
|
|
20
|
+
- Keep Server Actions in separate files (actions.ts)
|
|
21
|
+
- Validate all inputs with Zod schemas
|
|
22
|
+
- Use the `unstable_cache` or `React.cache` for data fetching deduplication
|
|
23
|
+
- Handle loading states with loading.tsx and Suspense boundaries
|
|
24
|
+
- Handle errors with error.tsx boundaries
|
|
25
|
+
- Never expose server-only code to the client
|
|
26
|
+
|
|
27
|
+
## TypeScript
|
|
28
|
+
- No `any` types — use `unknown` and narrow with type guards
|
|
29
|
+
- Define interfaces for all component props
|
|
30
|
+
- Use discriminated unions for state management
|
|
31
|
+
- Use `satisfies` operator for type-safe object literals
|
|
32
|
+
- Infer types from Zod schemas where possible
|
|
33
|
+
|
|
34
|
+
## Performance
|
|
35
|
+
- Use `next/image` for all images with explicit width/height
|
|
36
|
+
- Use `next/font` for font loading
|
|
37
|
+
- Implement proper metadata exports for SEO
|
|
38
|
+
- Use dynamic imports for heavy client components
|
|
39
|
+
- Implement ISR or SSG where data allows
|
|
40
|
+
|
|
41
|
+
## Testing
|
|
42
|
+
- Write unit tests with Vitest
|
|
43
|
+
- Use Testing Library for component tests
|
|
44
|
+
- Test Server Actions independently
|
|
45
|
+
- Mock external services in tests
|
|
46
|
+
|
|
47
|
+
## Security
|
|
48
|
+
- Validate and sanitize all user inputs
|
|
49
|
+
- Use parameterized queries (never raw SQL)
|
|
50
|
+
- Implement rate limiting on API routes
|
|
51
|
+
- Set proper CORS headers
|
|
52
|
+
- Never commit .env files
|
|
53
|
+
|
|
54
|
+
## Responses
|
|
55
|
+
- Explain your reasoning briefly before writing code
|
|
56
|
+
- If a task is ambiguous, ask for clarification
|
|
57
|
+
- Suggest simpler alternatives when the requested approach is over-engineered
|
|
58
|
+
- Always consider edge cases and error states
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# React Native Project Rules for Cursor AI
|
|
2
|
+
|
|
3
|
+
You are an expert React Native developer building a production mobile application.
|
|
4
|
+
|
|
5
|
+
## Tech Stack
|
|
6
|
+
- React Native 0.73+ (or Expo SDK 50+)
|
|
7
|
+
- TypeScript (strict mode)
|
|
8
|
+
- React Navigation v6 for routing
|
|
9
|
+
- Zustand or Jotai for state management
|
|
10
|
+
- React Query (TanStack Query) for server state
|
|
11
|
+
- Nativewind or StyleSheet for styling
|
|
12
|
+
|
|
13
|
+
## Code Style
|
|
14
|
+
- Functional components only — no class components
|
|
15
|
+
- Use named exports for all components
|
|
16
|
+
- File naming: kebab-case for files, PascalCase for components
|
|
17
|
+
- One component per file (except small helper components)
|
|
18
|
+
- Colocate styles at the bottom of the component file
|
|
19
|
+
- Prefix hooks with `use`, utilities with their domain
|
|
20
|
+
|
|
21
|
+
## Project Structure
|
|
22
|
+
```
|
|
23
|
+
src/
|
|
24
|
+
app/ # Navigation setup, providers
|
|
25
|
+
screens/ # Screen components (one per route)
|
|
26
|
+
components/
|
|
27
|
+
ui/ # Generic reusable components (Button, Input, Card)
|
|
28
|
+
domain/ # Business-specific components
|
|
29
|
+
hooks/ # Custom hooks
|
|
30
|
+
services/ # API clients, external service wrappers
|
|
31
|
+
stores/ # Zustand stores
|
|
32
|
+
utils/ # Pure utility functions
|
|
33
|
+
types/ # Shared TypeScript types
|
|
34
|
+
constants/ # App-wide constants
|
|
35
|
+
assets/ # Images, fonts, etc.
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Architecture Rules
|
|
39
|
+
- Screens orchestrate, components render
|
|
40
|
+
- Keep screens thin: delegate logic to hooks and services
|
|
41
|
+
- All API calls go through services/ — never fetch in components directly
|
|
42
|
+
- Use React Query for all server state (caching, refetching, optimistic updates)
|
|
43
|
+
- Use Zustand only for client-side state (theme, auth token, preferences)
|
|
44
|
+
- Never use `any` type
|
|
45
|
+
|
|
46
|
+
## Performance
|
|
47
|
+
- Use `React.memo` for list item components
|
|
48
|
+
- Use `useCallback` for functions passed to child components
|
|
49
|
+
- Use `useMemo` for expensive computations
|
|
50
|
+
- Use `FlashList` instead of `FlatList` for long lists
|
|
51
|
+
- Optimize images: use WebP, proper sizing, and caching
|
|
52
|
+
- Avoid unnecessary re-renders — profile with React DevTools
|
|
53
|
+
- Use `InteractionManager.runAfterInteractions` for heavy post-navigation work
|
|
54
|
+
|
|
55
|
+
## Navigation
|
|
56
|
+
- Type all navigation params with TypeScript
|
|
57
|
+
- Use deep linking configuration from the start
|
|
58
|
+
- Handle back button behavior explicitly on Android
|
|
59
|
+
- Lazy load screens with `React.lazy` or navigation lazy loading
|
|
60
|
+
|
|
61
|
+
## Platform Handling
|
|
62
|
+
- Use `Platform.select` or `.ios.tsx`/`.android.tsx` for platform differences
|
|
63
|
+
- Test on both iOS and Android simulators
|
|
64
|
+
- Handle safe areas with `react-native-safe-area-context`
|
|
65
|
+
- Handle keyboard avoidance properly (KeyboardAvoidingView)
|
|
66
|
+
|
|
67
|
+
## Error Handling
|
|
68
|
+
- Wrap screens in Error Boundaries
|
|
69
|
+
- Handle network errors gracefully — show retry options
|
|
70
|
+
- Use React Query's error states for API failures
|
|
71
|
+
- Log errors to a crash reporting service (Sentry, Bugsnag)
|
|
72
|
+
|
|
73
|
+
## Testing
|
|
74
|
+
- Unit test hooks and utilities with Jest
|
|
75
|
+
- Component test with React Native Testing Library
|
|
76
|
+
- Test navigation flows
|
|
77
|
+
- Test on real devices before release
|
|
78
|
+
|
|
79
|
+
## Accessibility
|
|
80
|
+
- Add `accessibilityLabel` to all interactive elements
|
|
81
|
+
- Support Dynamic Type / font scaling
|
|
82
|
+
- Ensure touch targets are at least 44x44 points
|
|
83
|
+
- Test with VoiceOver (iOS) and TalkBack (Android)
|
|
84
|
+
|
|
85
|
+
## Responses
|
|
86
|
+
- Always consider both iOS and Android behavior
|
|
87
|
+
- Mention if a solution requires native module linking
|
|
88
|
+
- Flag potential performance issues with large lists or heavy renders
|
|
89
|
+
- Suggest Expo alternatives when using bare React Native
|