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".
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-authsetup - 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
# Copy environment template
cp .env.example .env.local
# Install dependencies
npm install
# Start development server
npm run dev
Step 3: Setup Hot Reload
{
"scripts": {
"dev": "tsx watch src/index.ts",
"test": "vitest",
"test:watch": "vitest --watch"
}
}
Step 4: Configure Testing
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
vi.mock('@replit/sdk', () => ({
ReplitClient: vi.fn().mockImplementation(() => ({
// Mock methods here
})),
}));
Debug Mode
# Enable verbose logging
DEBUG=REPLIT=* npm run dev
Resources
Next Steps
See replit-sdk-patterns for production-ready code patterns.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
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.
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.
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.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
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?