ReddRadar
Agent skill
Project Setup & Architecture
Set up project infrastructure including TypeScript, database, state management, navigation, and testing. Use when initializing new features or configuring development environment.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/project-setup-architecture
SKILL.md
Project Setup & Architecture
Guide for setting up React Native/Expo project infrastructure.
When to Use
- Initializing TypeScript configuration
- Setting up database layer
- Configuring state management
- Installing and configuring testing
- Creating directory structure
- Adding linting and formatting
Setup Workflows
TypeScript Setup
# Install TypeScript
npm install --save-dev typescript @types/react @types/react-native
# Create tsconfig.json
npx tsc --init
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
"skipLibCheck": true,
"jsx": "react-native"
}
}
Directory Structure
# Create feature-sliced architecture
mkdir -p src/{app,features,shared,db,theme}
mkdir -p src/shared/{components,hooks,utils,types}
Database Setup (SQLite + Drizzle)
# Install dependencies
npx expo install expo-sqlite
npm install drizzle-orm
npm install --save-dev drizzle-kit
# Create structure
mkdir -p src/db/{schema,migrations}
// src/db/client.ts
import * as SQLite from 'expo-sqlite';
import { drizzle } from 'drizzle-orm/expo-sqlite';
const db = SQLite.openDatabaseSync('app.db');
export const drizzle = drizzle(db);
State Management (Zustand)
npm install zustand
// src/shared/stores/useAppStore.ts
import { create } from 'zustand';
interface AppState {
count: number;
increment: () => void;
}
export const useAppStore = create<AppState>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
Testing Setup
npm install --save-dev jest @testing-library/react-native
// package.json
{
"scripts": {
"test": "jest"
}
}
Linting & Formatting
npm install --save-dev eslint prettier
npx eslint --init
Configuration Files
app.json (Expo Configuration)
{
"expo": {
"name": "MyApp",
"slug": "my-app",
"version": "1.0.0",
"platforms": ["ios", "android"],
"ios": {
"bundleIdentifier": "com.company.myapp"
},
"android": {
"package": "com.company.myapp"
}
}
}
package.json Scripts
{
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"test": "jest",
"lint": "eslint src/",
"type-check": "tsc --noEmit"
}
}
Best Practices
- Incremental Setup: Install and configure one system at a time
- Verify Installation: Test each setup before moving to next
- Check Dependencies: Ensure compatibility with Expo SDK
- Use Expo Install: For Expo packages, use
npx expo install - Version Control: Commit after each successful setup step
Common Tasks
Add New Dependency
# Check if it's an Expo SDK package
npx expo install package-name
# Otherwise use npm
npm install package-name
Create New Feature Module
mkdir -p src/features/my-feature/{components,hooks,services,types}
touch src/features/my-feature/index.ts
Generate Database Migration
npx drizzle-kit generate:sqlite
npx drizzle-kit push:sqlite
Verification Checklist
After setup, verify:
- TypeScript compiles without errors (
npx tsc --noEmit) - App runs on both iOS and Android
- Tests run successfully (
npm test) - Linting passes (
npm run lint) - Database connects and queries work
- State management functions correctly
Resources
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?