Project setup architecture

Skill aiskillstore/marketplace/skills/babakbar/project-setup-architecture

Security-audited skills for Claude, Codex & Claude Code. One-click install, quality verified.

Install

npx -y skills add aiskillstore/marketplace --skill project-setup-architecture

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Set up project infrastructure including TypeScript, database, state management, navigation, and testing. Use when initializing new features or configuring development environment.

SKILL.md

3.8 KB, as published. Nobody here has run it

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