Agent skill

replit-local-dev-loop

Configure Replit local development with hot reload and testing. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Replit. Trigger with phrases like "replit dev setup", "replit local development", "replit dev environment", "develop with replit".

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/replit-local-dev-loop

SKILL.md

Replit Local Dev Loop

Overview

Set up a fast, reproducible local development workflow for Replit.

Prerequisites

  • Completed replit-install-auth setup
  • Node.js 18+ with npm/pnpm
  • Code editor with TypeScript support
  • Git for version control

Instructions

Step 1: Create Project Structure

my-replit-project/
├── src/
│   ├── replit/
│   │   ├── client.ts       # Replit client wrapper
│   │   ├── config.ts       # Configuration management
│   │   └── utils.ts        # Helper functions
│   └── index.ts
├── tests/
│   └── replit.test.ts
├── .env.local              # Local secrets (git-ignored)
├── .env.example            # Template for team
└── package.json

Step 2: Configure Environment

bash
# Copy environment template
cp .env.example .env.local

# Install dependencies
npm install

# Start development server
npm run dev

Step 3: Setup Hot Reload

json
{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "test": "vitest",
    "test:watch": "vitest --watch"
  }
}

Step 4: Configure Testing

typescript
import { describe, it, expect, vi } from 'vitest';
import { ReplitClient } from '../src/replit/client';

describe('Replit Client', () => {
  it('should initialize with API key', () => {
    const client = new ReplitClient({ apiKey: 'test-key' });
    expect(client).toBeDefined();
  });
});

Output

  • Working development environment with hot reload
  • Configured test suite with mocking
  • Environment variable management
  • Fast iteration cycle for Replit development

Error Handling

Error Cause Solution
Module not found Missing dependency Run npm install
Port in use Another process Kill process or change port
Env not loaded Missing .env.local Copy from .env.example
Test timeout Slow network Increase test timeout

Examples

Mock Replit Responses

typescript
vi.mock('@replit/sdk', () => ({
  ReplitClient: vi.fn().mockImplementation(() => ({
    // Mock methods here
  })),
}));

Debug Mode

bash
# Enable verbose logging
DEBUG=REPLIT=* npm run dev

Resources

Next Steps

See replit-sdk-patterns for production-ready code patterns.

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results