Onboarding Helper

Onboarding Helper Skill

Generate comprehensive onboarding documentation and guides for new developers joining your team or project.

Instructions

You are an onboarding and developer experience expert. When invoked:

1. Assess Onboarding Needs:

• Project complexity and technology stack
• Team size and structure
• Development workflow and processes
• Domain knowledge requirements
• Common onboarding challenges

1. Create Onboarding Materials:

• Welcome documentation
• Development environment setup guides
• Codebase architecture overview
• First-task tutorials
• Team processes and conventions

1. Organize Learning Path:

• Day 1, Week 1, Month 1 goals
• Progressive complexity
• Hands-on exercises
• Checkpoint milestones
• Resources and references

1. Document Team Culture:

• Communication channels
• Meeting schedules
• Code review practices
• Decision-making processes
• Team values and norms

1. Enable Self-Service:

• FAQ sections
• Troubleshooting guides
• Links to resources
• Who to ask for what
• Common gotchas

Onboarding Documentation Structure

Complete Onboarding Guide Template

# Welcome to [Project Name]! 👋

Welcome! We're excited to have you on the team. This guide will help you get up to speed quickly and smoothly.

## Table of Contents
1. [Overview](#overview)
2. [Day 1: Getting Started](#day-1-getting-started)
3. [Week 1: Core Concepts](#week-1-core-concepts)
4. [Month 1: Making Impact](#month-1-making-impact)
5. [Team & Processes](#team--processes)
6. [Resources](#resources)
7. [FAQ](#faq)

---

## Overview

### What We're Building
We're building a modern e-commerce platform that helps small businesses sell online. Our platform handles:
- Product catalog management
- Shopping cart and checkout
- Payment processing (Stripe integration)
- Order fulfillment and tracking
- Customer relationship management

**Our Mission**: Make e-commerce accessible to businesses of all sizes.

**Our Users**: Small to medium business owners with 10-1000 products.

### Technology Stack

**Frontend**:
- React 18 with TypeScript
- Redux Toolkit for state management
- Material-UI component library
- React Query for API calls
- Vite for build tooling

**Backend**:
- Node.js with Express
- PostgreSQL database
- Redis for caching
- Stripe for payments
- AWS S3 for file storage

**Infrastructure**:
- Docker for local development
- Kubernetes for production
- GitHub Actions for CI/CD
- AWS (EC2, RDS, S3, CloudFront)
- DataDog for monitoring

### Project Statistics
- **Started**: January 2023
- **Team Size**: 12 engineers (4 frontend, 5 backend, 3 full-stack)
- **Codebase**: ~150K lines of code
- **Active Users**: 5,000+ businesses
- **Monthly Transactions**: $2M+

---

## Day 1: Getting Started

### Your First Day Checklist

- [ ] Complete HR onboarding
- [ ] Get added to communication channels
- [ ] Set up development environment
- [ ] Clone the repository
- [ ] Run the application locally
- [ ] Deploy to your personal dev environment
- [ ] Introduce yourself to the team
- [ ] Schedule 1:1s with your manager and buddy

### Access & Accounts

**Required Accounts**:
1. **GitHub** - Source code ([github.com/company/project](https://github.com))
   - Request access from @engineering-manager
2. **Slack** - Team communication
   - Channels: #engineering, #frontend, #backend, #general
3. **Jira** - Project management ([company.atlassian.net](https://company.atlassian.net))
4. **Figma** - Design files
5. **AWS Console** - Production access (read-only initially)
6. **DataDog** - Monitoring and logs

**Development Tools**:
- Docker Desktop
- Node.js 18+ (use nvm)
- PostgreSQL client (psql or pgAdmin)
- Postman or Insomnia (API testing)
- VS Code (recommended, see extensions below)

### Environment Setup

#### 1. Install Prerequisites

**macOS**:
```bash
# Install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Node.js via nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 18
nvm use 18

# Install Docker Desktop
brew install --cask docker

# Install PostgreSQL client
brew install postgresql@14

Windows:

# Install using Chocolatey
choco install nodejs-lts docker-desktop postgresql14

2. Clone Repository

# Clone the repo
git clone git@github.com:company/ecommerce-platform.git
cd ecommerce-platform

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

3. Configure Environment Variables

Edit .env.local:

# Database (local Docker)
DATABASE_URL=postgresql://postgres:password@localhost:5432/ecommerce_dev

# Redis
REDIS_URL=redis://localhost:6379

# Stripe (use test keys)
STRIPE_SECRET_KEY=sk_test_... # Get from @backend-lead
STRIPE_PUBLISHABLE_KEY=pk_test_...

# AWS S3 (dev bucket)
AWS_ACCESS_KEY_ID=... # Get from @devops
AWS_SECRET_ACCESS_KEY=...
AWS_S3_BUCKET=ecommerce-dev-uploads

# Session
SESSION_SECRET=your-random-secret-here

Where to get credentials:

• Stripe test keys: 1Password vault "Development Secrets"
• AWS credentials: Request from @devops in #engineering
• Session secret: Generate with openssl rand -base64 32

4. Start Development Environment

# Start Docker services (PostgreSQL, Redis)
docker-compose up -d

# Run database migrations
npm run db:migrate

# Seed database with sample data
npm run db:seed

# Start development server
npm run dev

Expected output:

✔ Database migrated successfully
✔ Seeded 100 products, 50 users
✔ Server running on http://localhost:3000
✔ API available at http://localhost:3000/api

5. Verify Installation

Open your browser to http://localhost:3000

You should see the application home page with sample products.

Test credentials:

• Email: test@example.com
• Password: password123

Troubleshooting:

• Port 3000 in use: Kill the process with lsof -ti:3000 | xargs kill -9
• Database connection failed: Check Docker is running with docker ps
• Module not found: Delete node_modules and run npm install again

See [Troubleshooting Guide](docs/TROUBLESHOOTING.md) for more help.

VS Code Setup

Recommended Extensions:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "ms-azuretools.vscode-docker",
    "eamodio.gitlens",
    "orta.vscode-jest",
    "prisma.prisma"
  ]
}

Settings (.vscode/settings.json):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}

Your First Commit

Let's make a simple change to verify your setup:

1. Create a branch:

``bash git checkout -b test/your-name-setup ``

1. Add your name to the team page:

Edit src/pages/About.tsx: ``typescript const teamMembers = [ // ... existing members { name: 'Your Name', role: 'Software Engineer', joinedDate: '2024-01-15' } ]; ``

1. Test your change:

``bash npm run test npm run lint ``

1. Commit and push:

``bash git add . git commit -m "docs: Add [Your Name] to team page" git push origin test/your-name-setup ``

1. Create a PR:

• Go to GitHub
• Click "Compare & pull request"
• Fill out the PR template
• Request review from your buddy

Congrats on your first contribution! 🎉

End of Day 1

You should now have:

• ✅ Development environment running locally
• ✅ Application accessible in your browser
• ✅ First PR created
• ✅ Access to all team tools and channels

Questions? Ask in #engineering or DM your buddy!

---

Week 1: Core Concepts

Project Architecture

High-Level Architecture

┌─────────────┐
│   Browser   │
│  (React)    │
└──────┬──────┘
       │ HTTPS
       ▼
┌─────────────┐     ┌──────────────┐
│ API Gateway │────▶│  Auth Service│
│  (Express)  │     │   (JWT)      │
└──────┬──────┘     └──────────────┘
       │
       ├────▶ Product Service
       │
       ├────▶ Order Service
       │
       ├────▶ Payment Service ────▶ Stripe API
       │
       └────▶ User Service
              │
              ▼
         ┌──────────┐
         │PostgreSQL│
         └──────────┘

Directory Structure

ecommerce-platform/
├── client/                 # Frontend React app
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page components
│   │   ├── hooks/         # Custom React hooks
│   │   ├── store/         # Redux store and slices
│   │   ├── api/           # API client functions
│   │   ├── utils/         # Utility functions
│   │   └── types/         # TypeScript type definitions
│   └── tests/             # Frontend tests
│
├── server/                # Backend Node.js app
│   ├── src/
│   │   ├── routes/        # Express route handlers
│   │   ├── controllers/   # Business logic
│   │   ├── services/      # External integrations
│   │   ├── models/        # Database models (Prisma)
│   │   ├── middleware/    # Express middleware
│   │   ├── utils/         # Utility functions
│   │   └── types/         # TypeScript types
│   └── tests/             # Backend tests
│
├── docs/                  # Documentation
├── scripts/               # Build and deployment scripts
├── .github/               # GitHub Actions workflows
└── docker-compose.yml     # Local development services

Key Concepts

1. Authentication Flow

// User logs in
POST /api/auth/login
{ email, password }
  ↓
// Server validates credentials
// Generates JWT token
  ↓
// Client stores token
localStorage.setItem('token', token)
  ↓
// Client includes token in requests
Authorization: Bearer 
  ↓
// Server validates token
// Attaches user to request
req.user = decodedToken

Code location: server/src/middleware/auth.ts

2. State Management (Redux)

We use Redux Toolkit for client-side state:

// Store structure
{
  auth: {
    user: User | null,
    isAuthenticated: boolean,
    loading: boolean
  },
  cart: {
    items: CartItem[],
    total: number
  },
  products: {
    list: Product[],
    filters: FilterState,
    loading: boolean
  }
}

Reading from store:

import { useAppSelector } from '@/hooks/redux';

const user = useAppSelector(state => state.auth.user);
const cartItems = useAppSelector(state => state.cart.items);

Dispatching actions:

import { useAppDispatch } from '@/hooks/redux';
import { addToCart } from '@/store/slices/cartSlice';

const dispatch = useAppDispatch();
dispatch(addToCart({ productId, quantity: 1 }));

Code location: client/src/store/

3. API Communication

We use React Query for server state:

import { useQuery, useMutation } from '@tanstack/react-query';
import { api } from '@/api/client';

// Fetching data
const { data, isLoading, error } = useQuery({
  queryKey: ['products'],
  queryFn: () => api.products.getAll()
});

// Mutating data
const mutation = useMutation({
  mutationFn: (product) => api.products.create(product),
  onSuccess: () => {
    queryClient.invalidateQueries(['products']);
  }
});

Code location: client/src/api/

4. Database Access (Prisma)

We use Prisma ORM for database operations:

import { prisma } from '@/lib/prisma';

// Find one
const user = await prisma.user.findUnique({
  where: { id: userId }
});

// Find many with filters
const products = await prisma.product.findMany({
  where: {
    category: 'electronics',
    price: { lt: 1000 }
  },
  include: {
    images: true,
    reviews: true
  }
});

// Create
const order = await prisma.order.create({
  data: {
    userId,
    total: 100,
    items: {
      create: [
        { productId: 1, quantity: 2, price: 50 }
      ]
    }
  }
});

Code location: server/src/models/ Schema: prisma/schema.prisma

Your First Real Task

Goal: Add a "Recently Viewed" feature to product pages.

Requirements:

• Track products a user views
• Display last 5 viewed products
• Persist across sessions (use localStorage)
• Show on product detail page

Steps:

1. Create a feature branch:

``bash git checkout -b feature/recently-viewed-products ``

1. Frontend: Add hook (client/src/hooks/useRecentlyViewed.ts):

```typescript export function useRecentlyViewed() { const addToRecentlyViewed = (product: Product) => { // Get existing const recent = JSON.parse(localStorage.getItem('recentlyViewed') || '[]');

// Add new (avoid duplicates) const updated = [ product, ...recent.filter((p: Product) => p.id !== product.id) ].slice(0, 5);

// Save localStorage.setItem('recentlyViewed', JSON.stringify(updated)); };

const getRecentlyViewed = (): Product[] => { return JSON.parse(localStorage.getItem('recentlyViewed') || '[]'); };

return { addToRecentlyViewed, getRecentlyViewed }; } ```

1. Frontend: Use in product page (client/src/pages/ProductDetail.tsx):

```typescript const { addToRecentlyViewed, getRecentlyViewed } = useRecentlyViewed();

useEffect(() => { if (product) { addToRecentlyViewed(product); } }, [product]);

const recentProducts = getRecentlyViewed(); ```

1. Frontend: Display component (client/src/components/RecentlyViewed.tsx):

```typescript export function RecentlyViewed({ currentProductId }: Props) { const { getRecentlyViewed } = useRecentlyViewed(); const products = getRecentlyViewed() .filter(p => p.id !== currentProductId);

if (products.length === 0) return null;

return (

Recently Viewed

); } ```

1. Add tests:

```typescript describe('useRecentlyViewed', () => { it('should add product to recently viewed', () => { const { addToRecentlyViewed, getRecentlyViewed } = useRecentlyViewed();

addToRecentlyViewed(mockProduct);

expect(getRecentlyViewed()).toContainEqual(mockProduct); });

it('should limit to 5 products', () => { // Add 6 products, check only 5 remain });

it('should move duplicate to front', () => { // Add same product twice, check it appears once at front }); }); ```

1. Test manually:

• View several products
• Check localStorage in DevTools
• Verify list appears on product pages
• Test edge cases (empty state, single item)

1. Create PR:

• Use PR template
• Add screenshots
• Request review from @frontend-team

Resources:

• React Hooks Guide
• LocalStorage API
• [Our Testing Guide](docs/TESTING.md)

Week 1 Learning Resources

Must Read:

• [ ] [Project README](README.md)
• [ ] [Architecture Decision Records](docs/adr/)
• [ ] [API Documentation](docs/API.md)
• [ ] [Contributing Guidelines](CONTRIBUTING.md)

Optional Deep Dives:

• [ ] Redux Toolkit Docs
• [ ] React Query Docs
• [ ] Prisma Docs
• [ ] [Our Style Guide](docs/STYLE_GUIDE.md)

End of Week 1

You should now:

• ✅ Understand overall architecture
• ✅ Know key technologies and tools
• ✅ Have completed your first feature
• ✅ Understand our development workflow
• ✅ Feel comfortable asking questions

Checkpoint Meeting: Schedule 30min with your manager to review progress.

---

Month 1: Making Impact

Month 1 Goals

1. Ship Features: Complete 3-5 features independently
2. Code Reviews: Provide meaningfu

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: CuriousLearner
• Source: CuriousLearner/devkit
• License: MIT

Install and usage instructions live in the source repository linked above.