Implement Replit reference architecture with best-practice project layout. Use when designing new Replit integrations, reviewing project structure, or establishing architecture standards for Replit applications. Trigger with phrases like "replit architecture", "replit best practices", "replit project structure", "how to organize replit", "replit layout".
Generates production-ready Replit project structures following layered architecture best practices.
/plugin marketplace add jeremylongshore/claude-code-plugins-plus-skills/plugin install replit-pack@claude-code-plugins-plusThis skill is limited to using the following tools:
Production-ready architecture patterns for Replit integrations.
my-replit-project/
├── src/
│ ├── replit/
│ │ ├── client.ts # Singleton client wrapper
│ │ ├── config.ts # Environment configuration
│ │ ├── types.ts # TypeScript types
│ │ ├── errors.ts # Custom error classes
│ │ └── handlers/
│ │ ├── webhooks.ts # Webhook handlers
│ │ └── events.ts # Event processing
│ ├── services/
│ │ └── replit/
│ │ ├── index.ts # Service facade
│ │ ├── sync.ts # Data synchronization
│ │ └── cache.ts # Caching layer
│ ├── api/
│ │ └── replit/
│ │ └── webhook.ts # Webhook endpoint
│ └── jobs/
│ └── replit/
│ └── sync.ts # Background sync job
├── tests/
│ ├── unit/
│ │ └── replit/
│ └── integration/
│ └── replit/
├── config/
│ ├── replit.development.json
│ ├── replit.staging.json
│ └── replit.production.json
└── docs/
└── replit/
├── SETUP.md
└── RUNBOOK.md
┌─────────────────────────────────────────┐
│ API Layer │
│ (Controllers, Routes, Webhooks) │
├─────────────────────────────────────────┤
│ Service Layer │
│ (Business Logic, Orchestration) │
├─────────────────────────────────────────┤
│ Replit Layer │
│ (Client, Types, Error Handling) │
├─────────────────────────────────────────┤
│ Infrastructure Layer │
│ (Cache, Queue, Monitoring) │
└─────────────────────────────────────────┘
// src/replit/client.ts
export class ReplitService {
private client: ReplitClient;
private cache: Cache;
private monitor: Monitor;
constructor(config: ReplitConfig) {
this.client = new ReplitClient(config);
this.cache = new Cache(config.cacheOptions);
this.monitor = new Monitor('replit');
}
async get(id: string): Promise<Resource> {
return this.cache.getOrFetch(id, () =>
this.monitor.track('get', () => this.client.get(id))
);
}
}
// src/replit/errors.ts
export class ReplitServiceError extends Error {
constructor(
message: string,
public readonly code: string,
public readonly retryable: boolean,
public readonly originalError?: Error
) {
super(message);
this.name = 'ReplitServiceError';
}
}
export function wrapReplitError(error: unknown): ReplitServiceError {
// Transform SDK errors to application errors
}
// src/replit/health.ts
export async function checkReplitHealth(): Promise<HealthStatus> {
try {
const start = Date.now();
await replitClient.ping();
return {
status: 'healthy',
latencyMs: Date.now() - start,
};
} catch (error) {
return { status: 'unhealthy', error: error.message };
}
}
User Request
│
▼
┌─────────────┐
│ API │
│ Gateway │
└──────┬──────┘
│
▼
┌─────────────┐ ┌─────────────┐
│ Service │───▶│ Cache │
│ Layer │ │ (Redis) │
└──────┬──────┘ └─────────────┘
│
▼
┌─────────────┐
│ Replit │
│ Client │
└──────┬──────┘
│
▼
┌─────────────┐
│ Replit │
│ API │
└─────────────┘
// config/replit.ts
export interface ReplitConfig {
apiKey: string;
environment: 'development' | 'staging' | 'production';
timeout: number;
retries: number;
cache: {
enabled: boolean;
ttlSeconds: number;
};
}
export function loadReplitConfig(): ReplitConfig {
const env = process.env.NODE_ENV || 'development';
return require(`./replit.${env}.json`);
}
Set up the project layout following the reference structure above.
Create the singleton client with caching and monitoring.
Implement custom error classes for Replit operations.
Add health check endpoint for Replit connectivity.
| Issue | Cause | Solution |
|---|---|---|
| Circular dependencies | Wrong layering | Separate concerns by layer |
| Config not loading | Wrong paths | Verify config file locations |
| Type errors | Missing types | Add Replit types |
| Test isolation | Shared state | Use dependency injection |
# Create reference structure
mkdir -p src/replit/{handlers} src/services/replit src/api/replit
touch src/replit/{client,config,types,errors}.ts
touch src/services/replit/{index,sync,cache}.ts
For multi-environment setup, see replit-multi-env-setup.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.