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.

View SKILL.md on GitHub Repository
Stars 232
Forks 15

Install this agent skill to your Project

npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/babakbar/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

bash
# Install TypeScript
npm install --save-dev typescript @types/react @types/react-native

# Create tsconfig.json
npx tsc --init
json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "jsx": "react-native"
  }
}

Directory Structure

bash
# Create feature-sliced architecture
mkdir -p src/{app,features,shared,db,theme}
mkdir -p src/shared/{components,hooks,utils,types}

Database Setup (SQLite + Drizzle)

bash
# 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}
typescript
// 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)

bash
npm install zustand
typescript
// 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

bash
npm install --save-dev jest @testing-library/react-native
json
// package.json
{
  "scripts": {
    "test": "jest"
  }
}

Linting & Formatting

bash
npm install --save-dev eslint prettier
npx eslint --init

Configuration Files

app.json (Expo Configuration)

json
{
  "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

json
{
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "test": "jest",
    "lint": "eslint src/",
    "type-check": "tsc --noEmit"
  }
}

Best Practices

  1. Incremental Setup: Install and configure one system at a time
  2. Verify Installation: Test each setup before moving to next
  3. Check Dependencies: Ensure compatibility with Expo SDK
  4. Use Expo Install: For Expo packages, use npx expo install
  5. Version Control: Commit after each successful setup step

Common Tasks

Add New Dependency

bash
# Check if it's an Expo SDK package
npx expo install package-name

# Otherwise use npm
npm install package-name

Create New Feature Module

bash
mkdir -p src/features/my-feature/{components,hooks,services,types}
touch src/features/my-feature/index.ts

Generate Database Migration

bash
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.

aiskillstore/marketplace

perigon-backend

Perigon ASP.NET Core + EF Core + Aspire conventions

232 15
Explore
aiskillstore/marketplace

perigon-agent

Pointers for Copilot/agents to apply Perigon conventions

232 15
Explore
aiskillstore/marketplace

perigon-angular

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

232 15
Explore
aiskillstore/marketplace

fastapi-mastery

Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.

232 15
Explore
aiskillstore/marketplace

context7-efficient

Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.

232 15
Explore
aiskillstore/marketplace

browser-use

Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.

232 15
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results